Instructor: 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 view port.
So here I'm gonna select the table simply
using the element selector off 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.
All right, 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 head cell,
because the same we can see here in these four.
So these 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 are table head cells.
All right?
So now let's center this inside of the view port,
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 view port?
And remember that this view port
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.
All right, 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 or 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 to 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 there are 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 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,
then 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'll automatically adjust itself if we say
that the width of each of these table head cells.
So these four here should be 25%.
So 25% is of course a hundred percent divided by four.
And there we go.
All right?
And with that, we are almost done.
So if we compare it here, it looks almost the same
while 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.
All right?
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 to width, depth and weight,
but there's no height.
So this second row here is missing somehow.
So let's quickly add that, and that will just copy all
of this here and paste it down here.
And so here this is height
and a hundred, 110 and 90.
All right?
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 six, eight, and so on.
And so let's select the TRs 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 these 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.
All right, 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 end of styling tables with HTML and CSS.