All right. 1
So how did that go? 2
The first thing that we have to do is, of course, add our h3, and we're going to do that right above 3
the horizontal rule which is here and below our table. 4
So right here. And we're going to create something that's called skills and then we need to make a new table 5
and this table is not going to have any headings because we don't have any headings over here. 6
But it is going to have some rows and some columns. 7
So let's make our first row using tr. And let's list our first skill inside a td, and let's say 8
iOS development, and then we can put our stars in a second td that's going to be right next to our first 9
td in our second column, and we're going to pull up the emoji inspector and we’re just going to add in a 10
star which I'm going to copy which I'm going to copy and paste. 11
And now to save time I'm just going to copy the row. 12
Now whenever you are programming and you'll find yourself doing a lot of copy and pasting then you're 13
probably doing something wrong. 14
Now in order to save time you'll see me do it quite a lot and it's because it's not very fun for you 15
to watch me writing tr and TD all day long, but when you're coding yourself ideally try to avoid copying 16
and pasting and when you do always make sure that you understand what you're copy and pasting and also 17
make sure you check for any bugs and errors that you introduce. 18
So let's edit some of these things. 19
All right. 20
Let's hit save and let's check it out. 21
Looks pretty neat. 22
Right? 23
All right. 24
So now let's tackle bonus points. 25
So if you’ve given it a go and you've managed do it then 26
really well done. 27
It takes a little bit of researching around and a little bit lateral thinking in order to get it working. 28
But if you haven't or if you want to find out how one might do it then take a look now. 29
So essentially what we're trying to achieve here is very similar to what we've done at the top. 30
We're trying to affect the layout by using tables. 31
So essentially what we want is a table that has two columns or two table data cells and in each cell 32
we have a separate table which itself has two rows and two columns. 33
So the solution is essentially going to be a nested table. 34
So I'm going to make a little bit of space after the h3 and I'm going to create essentially the same 35
structure as we've got up here. 36
A new table that has a single row and two table data cells. 37
This one and this one. 38
So down here I'm going to create a brand new table and then I'm going to create a tr or table row and 39
then I'm going to create two table cells. 40
Now inside that first table data cell I'm going to place our existing table. 41
So I'm going to cut it and then I'm going to paste it in here, and then I'm going to grab another copy 42
of this table and then I'm going to paste it into the second table data cell of the first level table. 43
So right over here. 44
Now this structure is a little bit confusing. 45
And this is one of the reasons why using HTML to affect the layout is not a great idea, but by doing 46
this exercise you do get to grips with using tables, table rows, table data. 47
And if you've managed to complete this challenge then you should understand the ins and outs of how 48
to create tables using HTML. 49
So now if we hit save and let's take a look at our work you can see that we've got a single table with 50
two tables nested inside and we've managed to achieve this kind of structure. 51
Now feel free to keep this layout or revert to the previous layout before the bonus challenge. 52
It's completely up to you. 53
Or even design it however you like with as many tables as you need. 54
But I'm going to get rid of this nested table because it makes it really really complicated to see at 55
a glance what's going on. 56
So I'm going to remove this top level table and everything below this closing table tag I'm going to 57
delete and I'm going to get rid of some of that space. 58
And we're back at where we were before the challenge and I'll hit save to continue from here. 59
Let's finish off by just giving our tables a little bit more spacing so that everything looks a little 60
bit more spread out. 61
So go ahead and add the cell spacing attribute to both of your tables and give it a value of say 10 62
pixels. 63
All right. 64
So that's easy enough. 65
We've done it before here. 66
So we're going to add cell spacing equals 10 up here and also in this table as well. 67
Let’s save. 68
Let's check it out. 69
Nice. 70
Looks pretty good, right? 71
And finally let's add a few more horizontal rules. 72
So let's add one between books and teaching and work experience. 73
And also one between work experience and skills. 74
OK so let's find the end of books and teaching and that's at a horizontal rule here. 75
Find the end of work experience and let's add a horizontal rule here. 76
Save. Refresh. 77
There we go. A bit more spacing. 78
Everything looks a little bit more padded up. 79
All right. 80
So if any of that was confusing or difficult, 81
make sure that you watch the video again and also have a read of the MDN web docs on not just tables 82
but also thead or tbody or tfoot or td, ths etc. So you can have a look at the example code and see 83
some other examples of how you can use tables and rows and cells. 84
Now in the next lesson we're going to learn all about HTML forms and how you can add these to your 85
web page to collect data from your users. 86
So all of that and more. 87
See you on the next lesson.