All language subtitles for 092 Building a Table Component - Part 1.en_US

The next component that we're going

to build is a table.

So we're going to build a similar table

to this one that we saw in our component gallery.

So again, this is what our final table will look like.

And let's again start by creating a new HTML file.

So 03table.HTML.

And now remember, we will copy the code from this component.

So selecting everything

and then pasting it here.

Then let's also go back here.

So to this base, your URL basically,

and then we're going to select, oh, actually right here,

we need to do that.

So we finished our carousel before.

now let's go back.

So this here is indeed the base URL.

And then here, now we have or,

we need to reload apparently.

So now here is the table.

So it's still empty and so let's get started.

And the first thing that I want to tell you is that tables

are actually not used a lot anymore in web development.

Now, way back in the day,

tables actually used to be the first way

in which developers built layouts.

But now of course, with flexbox and CSS Grid,

we have way better ways of doing that.

However, that being said,

tables do still have a place in HTML,

especially if we are really trying

to represent some dataset that can be displayed

using a table.

And so then the table is the most semantic way

of doing that.

So let's see how it works in HTML.

So we have the table element

and so all starts with that element.

So the table element,

and then for each of the rows that we want in the table,

we use a TR element.

So TR stands for table row, right?

And then inside of the row for each column,

so basically for each piece of data,

we use a TD element.

So TD stands for table data.

So here in this table, we basically want four columns.

So just like this.

So Chair, the Laid Back, the Worker Bee and the Chair 4/2,

because those are the four chair names

that we had in the project in the last section.

Remember that?

And so here, this is basically simply a table,

which contains some of the information about those chairs.

And now the Chair 4/2.

Let's also create another row right away

before we actually see what it looks like in our HTML.

And let's actually create another row here

before we see the result in the browser.

So the second row.

And so therefore another TR element here.

And then once again inside of that,

one TD for each of the pieces of data.

So here we want the width,

so this row here is all about the width dimension.

So 80 centimeters then here,

and this other one has 220 centimeters.

Okay.

So let's check it out and

well, for now that doesn't look so great,

but still we can see that somehow,

it is a table actually.

So this 60, for example, starts right here

below the Worker Bee.

So in the same place here.

And so it does look like a table already,

but of course we will need to style it a lot using CSS.

But for now, let's actually finish here

and add the other two rows.

And to see that this is actually a lot of work

writing all this code like this.

Here I'm even missing DTD.

And if you think about it,

we could actually create the exact same thing

using CSS Grid.

Right?

So this table that we see here on the right side,

you could probably quite easily build that up

using CSS Grid.

However, again, in many situations,

using a table is actually the more semantic way of doing it.

So if you really have tabular data,

so data that really can be fit into a table like this,

then using the right element for the job

is many times the best way to go.

So even though visually,

we could create the same thing in another way.

But anyway, finishing here our table,

we're almost done with that.

And of course, we could have just copied this code here,

then replaced everything,

but while, as I mentioned in the beginning,

actually typing the code is the way that it gets

into your brain.

Okay.

So this is our table.

And as I mentioned, we still need to style this a lot

using CSS,

but let's actually leave that for the next video,

because there's still some more things that I want

to show you about tables.

So right now all the cells in our table here look basically

exactly the same.

However, usually in a table, the first row is different.

So as we see here in the demo,

the first row has this background color

and the text is bold.

And the same thing here for the first column.

So the text is bold

and so it's kind of special and different

from the data itself that is right here, right?

And we can actually do that using HTML.

So basically marking this first column here

as being special.

And what's special, I mean,

that we can basically tell our HTML

that this first row here is the head of the table

and the rest of the content is the table's body.

So to do that,

we can wrap this first row here into the T head element.

So that's table head

and then I will use that trick of using option,

or alt down, to move this down.

Oh, sorry.

And then here we have the T body.

Now let's actually copy this or cut

and put it here at the end.

And now if we give this a save,

then it actually still looks the same

because this is only one part of what we need to do.

So again,

first we declared that this first row here

should be the head of the table.

And so now semantically,

this table makes a lot more sense

because it's nicely divided

into these more logical sections.

So we have the table head and the table body,

but if we actually want the cell here to look different,

so if we want to mark it as an actual table head,

we need to use a different element here also.

So here, instead of using TD, we use TH,

which is basically a table head cell

within this group of cells.

So inside of this row here.

All right?

So let's do that with all of these four.

We want all of them to be a table head cell.

And so now if we reload, now they look bold and special.

All right.

And now let's do the same actually with these here.

So with the width, depth and height,

and so we can do the same here inside of all the other rows.

So this cell right here,

we can also declare it as the table head cell

of this basically group of cells here.

So this row, in this case.

And so now as we reload,

then this one is marked special as well.

And so let's do the same here with these two.

And with that, we have a nice semantic table,

which now makes a lot of sense visually

and also in terms of what the code represents.

Great.

So with that, we finished the HTML markup.

Now there's a lot more things to do with tables in HTML.

So things like spanning across multiple rows

or multiple columns,

but that is not really necessary to learn these days,

I believe.

So this is more of an overview of how we work with tables,

just in case you see one in the wild,

because otherwise this code might be quite confusing to you.

So like, what is all these TRs and TH

and TD here actually mean?

And so now you know that it is a table, right?

But anyway,

let's now go to the next lecture

and actually style this table.