Check out a free preview of the full CSS In-Depth, v2 course:
The "Other Table Properties" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

CSS provides the ability to style or even hide empty cells separately. Vertical alignment within cells and rows, including at baseline, is covered.

Get Unlimited Access Now

Transcript from the "Other Table Properties" Lesson

[00:00:02]
>> Estelle Weyl: Other table properties. You can actually hide empty cells.
>> Estelle Weyl: So you can say basically, empty-cell: show, which is the default, or empty-cell: hide. And empty-cell hide, do you remember when we were doing the empty pseudo class? Kind of the same thing. If you have absolutely nothing in there, that would be the other way of doing it.

[00:00:35] That's ignored if border-collapse is separate. So if you have space between those border cells, it's still going to stay there.
>> Estelle Weyl: And it applies to other elements with the display of table-cell even if it's not part of a table.
>> Estelle Weyl: So here we have,
>> Estelle Weyl: We can put it on the table or on the cell itself.

[00:01:02] So here,
>> Estelle Weyl: The table, there's no border.
>> Estelle Weyl: If I defaulted back to show, it's there,
>> Estelle Weyl: Right?
>> Estelle Weyl: And then if I just do instead on the td, so you see I could put it on the td itself or on the table. So that is empty-cell hide.

[00:01:33]
>> Estelle Weyl: Then there's table-layout of auto or fixed. And I'm not gonna show an example of this one cuz the only thing it really does is it paints faster. Because if you say it's fixed, then it knows exactly what width it is.
>> Estelle Weyl: That's if you declared the width and you want a table to be fixed.

[00:01:53] Generally, I like it to default or auto. I've never used this, so I can't tell you exactly what it does. I just want to make sure that I include it. Then we can vertically align. Yes, you could always vertically align in CSS, and that's why people used to display table and table cell all the time.

[00:02:10] So you can use baseline, sub, super, text-top, text-bottom, middle, top, bottom, or give it a percentage or length
>> Estelle Weyl: And let's just do it here. So vertical line top. So I put extra spacing and extra text in these, I increased the font size here so that we could just show.

[00:02:41]
>> Estelle Weyl: For vertical align bottom, ooh, that's exciting. You'll see here that Jade Boho, soccer player from Madrid.
>> Estelle Weyl: And then this bigger one here.
>> Estelle Weyl: I've never tried baseline, let's see if baseline works.
>> Estelle Weyl: So here baseline, you see how it's not quite at the top in this row because the 2G is really big.

[00:03:09] So I'm actually able to align in a table based on a larger font. If one of them had had padding in the top that was much bigger, then the baseline would've been pushed down further. Does that make sense? Okay,
>> Estelle Weyl: So, [COUGH] we talked about the display property yesterday when we were talking about flexbox, and we introduced display flex and display inline flex.

[00:03:36] There's many other displays that I showed, and the ones that are associated with tables but can be used on other elements as well include table and table cell. Table row group, table header group, table footer group, table row, table cell, table column group, table column and table caption.