From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 3.12: Styling Tables

Tables are the final thing that we are going to want to style. Most of the attributes necessary for controlling the look of the table have already been presented, it is just a matter of looking at them from a table perspective. One of the more important parts of a table is the grid. By default, there is no grid on HTML tables. You may have recalled the depreciated border statement was used earlier to demonstrate grids with borders, but you should never use depreciated attributes in new code. More importantly, you should be removing depreciated attributes from old code whenever you have a chance to refactor that code.

We have already covered the border property of the CSS Box Model, which is what would be used to generate borders around the cell and tables. This is how we do the grid. By default, there are no borders around the table and the cells. To add a border around the table, you simply need to add a border attribute the CSS definition for the table.

This, however, does not add borders around the individual cells. To do this, you need to specify the border around the cells. As you don’t want to have to specify a style, or even a class, for each table header or table data element, you will want to have a CSS style rule for this. If you want more than one table in your document and want to have those tables use different styles, like is done with the demo for this chapter, you need to have different classes. This is a good time to remind you that when defining a class, you can also specify how to style an embedded element. Here is the code for setting up a bordered table using the borderedCells class.

The problem with this is that there are gaps around the borders. Thinking about how the box model works, it is clear this is probably related to the margin attribute. Eliminating margins results in thicker border lines so does not solve our problem unless we want thicker lines. To get around this problem, CSS has a special attribute called border-collapse. This attribute has two potential values collapse or separate. The collapse option will collapse the borders of adjoining blocks into a single border, while separate is the default option.

The image below shows the different table styles.

As with the lists, it is possible to use the state :nth-child to control the state of certain rows in the table. This is done by applying the state to the tr element, such as:

Likewise, if we wanted to set the column of a table to have a different style, we would do so using the td element. If we wanted to count the column header as part of the style changes, th would also need to be included. Here is an example:

And we can apply both. One interesting thing happens when we apply both. The column styling takes priority over the row styling. Why is this? As we mentioned earlier, the style that is applied to an element is based on the most specific set of rules. As the td and th elements are part of a row, they are more specific than the tr element. It is still possible to have rows take priority over columns by creating a specific rule for the row that includes the td/th elements as part of it’s definition, such as the following:

The image below shows the different coloring options, with the code for this being in the repository under tableStyleDemo.

This covers the basics for CSS, so it is time to apply your new knowledge in a project. Any projects utilizing the material covered will help cement the knowledge, but for a fun project we are going to create a clone of a classical text game in the next section.