Overview of This Lesson

Now that you have a good handle on CSS, we can talk about styling tables. You can apply many of the properties you've aleady learned about. You can style the table element, the cells, the table caption and even specific rows or columns.

Pre-Requisites

To get the most out of this lesson, you should make sure you've gone through the Combinators lesson and its pre-requisites. It's also important that you're familiar with HTML Tables.

Styling Tables

Besides properties from the Box Model, backgrounds, text/fonts, etc, you can style some things with tables we haven't discussed yet, like tinkering with the borders, creating "zebra tables", and aligning the contents of table cells.

Border Collapse

When you add borders to table cells, you'll notice that there's a gap in between:

See the Pen CSS: Tables Border Collapse by Wendi Jollymore (@ProfWendi) on CodePen.

Try uncommenting the border-collapse line in the CSS to see how it changes the appearance of the table cell borders.

To turn off the collapsing border on a table, use border-collapse: separate;

You can configure the amount of spacing between the border lines using the border-spacing property. Specyfing one value sets the amount of horizontal and vertical spacing. Specifying 2 values sets the amount of horizontal spacing and the amount of vertical spacing, respectively. The CodePen below shows you how it works:

See the Pen CSS: Tables Border Spacing by Wendi Jollymore (@ProfWendi) on CodePen.

Table Cell Alignment

You already learned how to horizontally align text within a container using text-align. You can also vertically align text within a container using the vertical-align property. The vertical-align property has several values: you can specify a specific absolute height (e.g using px) or you can specify a relative measurement (e.g. %). You can also specify values like top, middle, and bottom. There are some other values you can read about at the documentation for the vertical-align property at MDN

Here's a CodePen that demonstrates cell alignment using text-align and vertical-align.

See the Pen CSS Tables: Cell Alignment by Wendi Jollymore (@ProfWendi) on CodePen.

Zebra Tables

The term zebra table is used to describe a table that has alternating colours on the rows (or sometimes, the columns) to help readers see the data when there are several rows (or columns). Creating a zebra table is easily done using the nth-child() pseudo-class:

See the Pen Pseudo Classes: Nth-Child (Zebra) by Wendi Jollymore (@ProfWendi) on CodePen.

You can also style specific columns of a table by using first-child(), last-child(), or nth-child():

See the Pen Untitled by Wendi Jollymore (@ProfWendi) on CodePen.

In the above example, the last column of the table is styled differently from the others. In the next example, I've used nth-child() to highlight 3 separate columns of a table:

See the Pen Table Stylng: nth column by Wendi Jollymore (@ProfWendi) on CodePen.