All language subtitles for 093 Building a Table Component - Part 2.en_US

So now let's style the table that we have been working on.

And as always, let's start

by giving our component a fixed width,

and also center it in the Viewport.

So here, I'm gonna to select the table,

simply using the element selector of the table.

So, a width again of 800 pixels,

and just so we can see this,

let's actually also give it some background color,

just for a short amount of time.

Alright?

So you see that now the table got wider

and then these three columns here,

basically grew in order to fill that empty space.

And we can also see that by default,

now this text here is centered.

So that's because this is a <th> element.

So a table had cell, because the same,

we can see here in these four.

So this one are now also centered, right?

But this column here,

did not expand like these three did,

and that's simply because all of these cells here

our table had cells.

Alright?

So now let's center this inside of the Viewport,

but let's actually use another way.

So we have been doing always, this trick,

so margin, something and then auto.

And of course that is going to work here as well.

However, I want to start showing you

that there are always multiple ways of doing things in CSS.

So, can you think of another way

of centering our entire page

here inside of the Viewport?

And remember that this Viewport that we see here,

is basically the body.

So how could we do this?

Well, one way of doing it

is to say that the body should be a flex container.

So display, flex, and there is nothing wrong with that.

So the body is just like any other element,

so we can also make it a flex container,

just like any of the other elements.

And so now in order to then center all the flex items,

which in this case, is just one,

remember that we use justify content, set to center.

And there we go.

Now let's just give this here some margin to the top still.

Alright.

Now let's remove this color here.

And now I actually want to give this table

for now, some borders.

So we can say border, one pixel and then solid as always.

And let's just use some gray,

well we can go with this one, actually.

And so this will add, basically,

a border all around the table.

And now let's say we wanted to add borders

inside of the whole table.

So between all the cells,

like in a more traditional table.

So between all the rows and all the columns.

So to do that,

we can simply select all of the tables cells

and then add a border around all of them.

Now, our cells are these <td> elements

and also the <th> elements, right?

So we need to select both of them at the same time here,

if we want to style them in the same way.

And for now, that's what we want to do.

And so, as I was saying,

let's add some border here,

of one pixel, solid

and our gray color,

and there we go.

And that looks a little bit strange,

but if we think about it, this result actually makes sense.

So each of the cells has a border around it.

And so that's why here, basically, we have two borders,

very close to each other.

Right?

Now, usually we don't want this to look in this way,

and so there is this weird property

which is called border-collapse.

And so basically, what we will do here

is that when we have two borders close to one another,

like we have here, we can make them collapse.

So collapse means that these will basically be put together

into just one border.

So just like this.

So, see the difference?

Before, we basically had two borders

in the same position.

So here, for example,

coming from the top of this one

and coming from the bottom of this one.

And so, if we say we want to collapse them,

then they are transformed into just one.

Now here, let's also add some padding.

So 16 top and bottom, 24 left and right,

let's say.

So that is starting to look more like a real table.

And actually, we want all of the text here

to be aligned to the left.

So no centering.

And so text,

align,

left.

Nice.

So that is starting to look a little bit

like what we have here,

right?

But now let's actually get rid of these borders

because in this case we don't want it,

but I still wanted show you how you could add borders

in the correct way,

if you wanted to do that for your own tables at some point.

Great.

Now, remember what we want to do now

is to format this first row here

to have this green background color,

and the text should also be white.

Okay.

So, how are we going to do that?

Well, we somehow need to select

basically, all of these cells that we have here

and format them individually.

So we usually never format like an entire row or the head.

So, instead, what we do is to format the cells themselves.

Now these four here are <th> elements,

but we cannot just do this

because they're also <th> elements right here,

so inside of the table body.

But we just want the ones that are in the table head.

And so we can simply do this, right?

So a descendant selector,

selecting only the table head cells

that are inside of the actual table head.

And so here, we can now give them

that green background color

and also set the text to white.

Okay.

So that is starting to look better and better.

Now we have this issue

that we have, a kind of these invisible borders here,

basically between these cells.

And in order to fix that,

we actually need to make them disappear

by turning this one here back on.

So we do in fact, always need this border collapse here,

set to collapse.

Alright.

And so now, since we didn't specify any borders

than these invisible borders that we had here before

kind of disappeared.

Now, if we take a look here at the demo,

we see that actually the four columns

have the exact same width.

So, let me show you how we can also do that.

And so basically what we need to do is

to format the width of these very first cells.

So the ones that are in the head

and then the entire table will follow.

So it will automatically adjust itself.

If we say that the width of each of these table had cells,

so these four here should be 25%.

So 25% is of course,

a hundred percent divided by four and there we go.

Alright?

And with that, we are almost done.

So if we compare it here,

it looks almost the same

well the text is a little bit bigger,

let's fix that as well.

So here, we can say that the font size should be 18 pixels.

Alright?

But now what's missing is this very typical table formatting

of adding these zebra stripes, which is what we call them.

So basically that's having

this alternating background colors,

which makes the table really easy to read and to scan.

Now, I noticed that we're kind of

missing one of the rows here.

So we have the width, depth and weight,

but there's no height.

So this second row here is missing somehow.

So let's quickly add that.

And I will just copy all of this here

and paste it down here.

And so here, this is height

and a hundred, 110 and 90.

Alright.

And so this now actually looks exactly the same

except for the zebra stripes.

So, let's do those zebra stripes.

And so let me show you how we can do that.

So inside of the tbody,

we now basically want to select the odd rows

and the even ones.

So with odd, I mean,

the row number one, three, five and so on and so forth.

And with odd, we want the second one,

the fourth, sixth, eighth, and so on.

And so let's select the tr's inside of the tbody,

so the table rows.

And then, remember that we have

this very handy nth child pseudo class.

So nth child, which, remember,

basically allowed us to select any of the child elements

by their order number.

So for example, we could do this,

select just the third one

and set the background color to red there.

And so now the entire third row here would become red.

Now, I said previously here that we actually,

usually select the cells individually,

but back here, that was basically

because I also needed to individually style

actually, these cells with this width,

but we could in fact also have done this.

So thead and then the tr,

and here, of course there's only one.

And so, the result would look exactly the same, right?

But this styling here of the width of the individual cells,

will of course, need to stay in this selector right here,

so in this rule.

Alright.

So again, many times we do format only individual cells,

but in this case where we want to select the row,

based on the order, we actually need to style rows.

Alright.

And so, I think I explained this before,

that here we can use a keyword of "odd" and "even".

And so, the odd ones are now a red.

So again, that's one, three, five and so on.

And then, let's do the same with even.

And so here, some other color,

and of course, that looks very bad.

And so let's get some actual colors again here

from open color.

And so let's actually use this

very, very light gray here for the odd ones,

and then some darker tone,

maybe this one here for the even cells,

or the even rows, actually.

And yeah, there we go.

That's it.

Let's compare it.

And it is exactly the same one.

Great.

And so, this is the basics of creating

and of styling tables with HTML and CSS.