Instructor: The next component
that we're gonna 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 03-table.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 URL here basically.
And then we're gonna select
or 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 our...
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 I'll start 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 a 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 you see that this is actually a lot of work
writing all this code like this.
Here I'm even missing the td.
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 well, 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,
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 thead 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 tbody.
And 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 this 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
and 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 does 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.