All right. So how did that go?
The first thing that we have to do is, of course,
add our h3 and we're going to do that right above the horizontal rule,
which is here and below our table. So right here.
And we're going to create something that's called skills,
and then we need to make a new table.
And this table is not going to have any headings because we don't have any
headings over here, but it is going to have some rows and some columns.
So let's make our first row using tr and let's list our first skill inside
a td. And let's say, uh,
iOS development.
And then we can put our stars in a second td
that's going to be right next to our first td in our second column.
And we're going to pull up the emoji inspector and we're just gonna add in a
star which I'm going to copy and paste.
And now to save time, I'm just going to copy the row. Now,
whenever you're Programming and you find yourself doing a lot of copying and
pasting, then you're probably doing something wrong. 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 to watch me writing tr and td all
day long. But when you're coding yourself,
ideally, try and avoid copying and pasting.
And when you do, always make sure that you understand what you're copying and
pasting,
and also make sure you check for any bugs and errors that you introduce.
So let's edit some of these things.
All right, cool. Let's hit save and let's check it out. Looks pretty neat,
right? All right. So now let's tackle bonus points.
If you've given it a go and you've managed to do it, then really well done.
It takes a little bit of researching around and a little bit of lateral thinking
in order to get it working.
But if you haven't or if you want to find out how one might do it, then take a
look now. Essentially what we're trying to achieve here
is very similar to what we've done at the top.
We're trying to affect the layout by using tables.
So essentially what we want is a table that has two columns or two table
data cells and in each cell we have a separate table
which itself has two rows and two columns.
So the solution is essentially going to be a nested table.
I'm going to make a little bit of space after the h3
and I'm going to create essentially the same structure as we've got up here,
a new table that has a single row and two table data cells,
this one, and this one. Down here,
I'm going to create a brand new table.
And then I'm going to create a tr or a table row.
And I'm going to create two table cells.
Now, inside that first table data cell,
I'm going to place our existing table.
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 of this table
and then I'm going to paste it into the second table data cell of the first
level table. So right over here. Now,
the structure is a little bit confusing,
and this is one of the reasons why using HTML to affect the layout is not a
great idea. But, by doing this exercise,
you do get to grips with using tables, table rows, table datas.
And if you've managed to complete this challenge,
then you should understand the ins and outs of how to create tables using HTML.
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 two tables nested inside,
and we've managed to achieve this kind of structure. Now,
feel free to keep this layout or revert to the previous layout before the bonus
challenge. It's completely up to you, or even design it
however you like with as many tables as you need.
But I'm going to get rid of this nested table because it makes it really,
really complicated to see at a glance what's going on.
So I'm going to remove this top-level table and everything below this closing
table tag, I'm going to delete.
And I'm going to get rid of some of that space.
And we're back at where we were before the challenge
and I'll hit save to continue from here.
Let's finish off by just giving our tables a little bit more spacing so that
everything looks a little bit more spread out.
So go ahead and add the cell spacing attribute to both of your tables and give
it a value of say 10 pixels.
All right. So that's easy enough. We've done it before here.
So we're going to add cell spacing equals 10 up here and also in this table as
well. Hit save. Let's check it out. Nice. It looks pretty good, right?
And finally, let's add a few more horizontal rules.
So let's add one between books and teaching and work experience and also one
between work experience and skills.
Okay.
So let's find the end of books and teaching and let's add a horizontal rule here.
Let's find the end of work experience and let's add a horizontal rule here.
Hit save, refresh. There we go. A bit more spacing,
everything looks a little bit more padded out. Alright.
So if any of that was confusing or difficult,
make sure that you watch the video again and also have a read of the MDN web
docs on not just tables,
but also thead or tbody or tfoot or th, th, et cetera.
So that you can have a look at the example code and see some other examples of
how you can use tables and rows and cells.
Now in the next lesson,
we're going to learn all about HTML forms and how you can add these to your
webpage to collect data from your users.
So all of that and more see you on the next lesson.