All language subtitles for 024 HTML Tables Solution Walkthrough.en_US

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.