Styling Tables

We’ve already looked at styling rows within a table, however, you can style more. By default a table doesn’t have any borders, color, or anything else. Luckily, like all HTML elements, you can apply styles to your elements. And since a table is made up of a lot of elements, you can apply styles to each of them, which allows for a lot of control as to how things look on the web page.

Let’s start with the table first. To pull it visually off the screen, you might add a simple border, hoping to isolate the cells as well as the table.

table {
    border: 1ps solid #000;
}

However, this will only put a border around the table itself, not the cells. 

The biggest issue with this is that a lot of times our data can start to look jumbled together. Because it is all jumbled, it is harder to read and follow. If we add a border to the table cells we can start to isolate the cells, improving readability. We’ll want to apply this to the table header cells as well, so we’ll use multiple selectors separated by a comma to define them.

td, th {
    border: 1px solid #000;
}

This helps us create a little more definition with our cells, making it easier to see the data in the individual cells. However, the lines for the border are right near the text, making the initial letters hard to read. Adding a little bit of padding can fix that.

td, th {
    border: 1px solid #000;
    padding: 5px;
}

It often doesn’t take a lot of padding, and you don’t want too much when working with a table. The information will get to spread out, and that reduces the readability, just as if it was too close together.

If you look at the result there is a small issue. Since each cell has a border This makes for multiple borders, which can become overwhelming. If you try to adjust the margin, you’ll find that nothing changes. That’s because some of the rules for working with tables are a little different.

The process for working with a table is you need to collapse the cell spacing. In previous versions of HTML there was an attribute to control cell spacing. Instead, we need to use the appropriate CSS property.

table {
  border-collapse: collapse;
}

Styling a Row

You can style your <tr> tags. The most common method is to specify background color in a class. This is often to either highlight a specific row, or to provide an alternating pattern by applying a slight shade difference to odd and even rows. The purpose, of course, being to make it slightly easier to read large amounts of tabular data.

This can be as simple as creating a class, or classes, like the ones you see below.

tr.odd {
    background-color: #eee;
}
tr.even {
    background-color: #fff;
}
tr.highlight {
    background-color: yellow;
    font-weight: bold;
}

Of course, this requires that you build out your table rows adding classes to all of the rows. This is potentially time consuming, and requires all you to update each row if you add or remove a row from any place besides the end.

Luckily CSS has a special pseudo-class selector to make this easier, the nth-child selector. Here we can apply the pseudo-class and make it so the computer does the repeatable work of applying the right class. And that’s what we really want.

tr:nth-child(odd) {
    background-color: #eee;
}
tr.nth-child(even) {
    background-color: #fff;
}
tr.highlight {
    background-color: yellow;
    font-weight: bold;
}

The highlight class can be used to highlight a specific row which can be used to identify special data. 

The :hover pseudo-class which can be used to help read a table, especially with a large amount of data.

tr:hover {
    background-color: #ccc;
}

Often headers and/or footers will want to separate style. Luckily this easy, just use the selector for thead and, or tfoot.

thead tr {
    background-color: black;
    color: white;
    font-weight: bold;
}

Sizing Columns

Every cell within a column must be the same width, and typically HTML tables try to keep all the columns the same width. However, if it can’t give the same width because the amount of data is different, it will make the columns with more data wider, even if it isn’t necessary from a design perspective. The idea is to minimize the number of rows that the tables take up.

You can “suggest” a width for a column however, either by giving it a class to one or more of the cells in the column, or using the nth-child pseudo-class. 

thead th:nth-child(1) {
    width: 30%;
}

I said suggest, because in most cases, HTML styles were suggestions. However, if you add the table-layout property to your table rule set, you can get more predictable results.

table {
    table-layout: fixed;
}

Now  you only need to style the header cells, and the columns should follow properly, instead of them trying to override the setting with their data.

Styling Tables was originally found on Access 2 Learn