Tables are one of the very few choices in our palette when it comes to displaying tabular data, such as reports, statistics, comparison charts, checklists, etc. Without doubt, they are very easy to understand and they usually convey information very well.
However, tables are probably one of the most difficult objects to style in the Web. This makes tables them a no-go when it comes to page design, especially in responsive layouts. A lot of time might be wasted to make a single table look like we want it to, even a simple one, let alone using them in fluid or responsive layouts.
Its cryptic markup (just thinking about cell spacing and padding makes you shiver), the amount of small things to consider when styling them and very poor browser compatibility.
CSS tables to the rescue
However, we still need tables in many situations. So what to do? The CSS table model is based on the html4 table model and has very good browser support. Even IE8 supports CSS tables, so it’s a pretty good thing. In both table models the table structure parallels the visual display of the table itself.
Since CSS tables are based on the HTML table model, in which the structure of a table closely resembles the visual layout of the table, it’s quite easy to create div-based tables. CSS tables are said to be “row primary” since developers explicitly specify rows, not columns, in the document layout.
Rows and columns may be grouped structurally and this grouping reflected in presentation (e.g., a border may be drawn around a group of rows).
There is a “table” element, styled using the “display: table;” property, and then there are row elements (using display: table-row;) and finally, cell elements (specified using display:table-cell), making it to to closely resemble the way HTML tables are specified.
Columns are derived once all the rows have been specified — the first cell of each row belongs to the first column, the second to the second column, and so on). This means that, as in HTML tables, columns have the same width across all rows, making it easy to control.
For instance, one of the nice things about HTML tables is that we can easily specify how content should align inside cells (both horizontally and vertically). We can do that with CSS tables. See the example below.
As we can see in the example, by using DIVs (we can use any other HTML entity that might be more semantically relevant, such as aside, article, etc.) and CSS styling we can specify how each cell looks. For instance, in the following example, we used zebra-like row styling, where odd and even rows are styled differently.
Since CSS rules are used to style cells (and rows too), we can use almost any CSS property to adjust their look, making it simpler to develop and maintain during the life of the page/website.
So there it is, you can now use CSS tables to display reports, lists, and anything with tabular data in it, without feeling guilty about it.