Are CSS Tables Better Than HTML Tables?

Posted: 13 Oct 2011 05:30 AM PDT

Mention css and tables in the same sentence and controversy is sure to follow. Web designers like myself have been telling you not to use html tables for layouts and now here we have a way to create tables with css alone.

What’s the difference between html tables and css tables? Should we use css tables? If so how?

Once again I want to thank Pedro for emailing me the idea to talk about css tables. I hope I cover what you’re interested in knowing.

Let’s get to the how of css tables first and then tackle the question of whether or not you’d want to use them in practice.

How to Create CSS Tables

The css table model is based on the html4 table model and has pretty good browser support. In both table models the table structure parallels the visual display of the table itself.

Rows are primary. The row is specified explicitly and columns are derived from how the rows and cells are set up.

I’m sure you’ve worked with html tables before and if you have you shouldn’t have any problem creating css tables.

Each html table element has an equivalent css display value. The only real difference is that there’s no distinction between td and th with the css variety.

Below are the html table elements and their corresponding css display value.

 table     { display: table } tr        { display: table-row } thead     { display: table-header-group } tbody     { display: table-row-group } tfoot     { display: table-footer-group } col       { display: table-column } colgroup  { display: table-column-group } td, th    { display: table-cell } caption   { display: table-caption }

Captions can be positioned above or below the table with the caption-side property

 #caption {caption-side: top} #caption {caption-side: bottom}

Looking at the above it shouldn’t be too hard to figure out how to set up a css table. Here’s a simple example.

 <div id="table">   <div class="row">     <span class="cell"></span>     <span class="cell"></span>      <span class="cell"></span>   </div>   <div class="row">     <span class="cell"></span>     <span class="cell"></span>      <span class="cell"></span>   </div>   <div class="row">     <span class="cell"></span>     <span class="cell"></span>      <span class="cell"></span>   </div> </div>

 #table {display: table;} .row {display: table-row;} .cell {display: table-cell;}

If you look only at the html above you can easily see the basic table structure except that I’ve used div and span with ids and classes instead of table, tr, and td.

A relatively small amount of css then presents the divs and spans as the familiar table, table row, and table cell.

In addition to the above the css table model includes an inline-table value, which defines a new table the same as display: table, but does so according to the inline formatting context.

Columns and Column-Groups

While tables cells are always descendants of table rows it makes sense to set some properties on columns. The css table model allows for the following on columns and column-groups

border — The usual properties as long as border-collapse has been set to collapse on the table element
background — The usual properties as long as both row and cell have background set to transparent
width — Sets a max-width on the column
visibility — If set to collapse (the only available value) then column cells don’t display, cells spanning into other columns are clipped, and width of the table is adjusted

CSS Table Stacking Context

Different table elements have different stacking contexts for the purpose of adding backgrounds to these different layers.

These layers can be seen in the image below.

table – lowest layer
column group
columns
row group
rows
cells – highest layer

The background of any layer will only be seen if all the layers above it have backgrounds set to transparent.

This can be a nice way to show an empty cell is truly empty by having its background be transparent and letting the background of the row, column, or table show through.

Table Layout Algorithm

The width of css tables can be calculated using one of two algorithms. This can be controlled through the table-layout property and the 2 values below.

fixed — The width of the layout is not determined by its content, but rather by the widths set on the table, cells, borders, and/or cell spacing
auto — The width of table is set by width of columns and borders

The important thing to consider is that a fixed table-layout is a one-pass calculation and very quick. On the other hand auto requires the same multiple passes of html tables. It’s also the default value.

If you explicitly set a width on the table then the fixed table layout algorithm will be used.

By default the cell height will be the minimum necessary to display the contents of the cell, but you can also explicitly set heights. All cells in a row will be the height of the cell with the maximum minimum necessary height.

The vertical-align property of each table cell determines the cell’s alignment within the row

baseline
top
bottom
middle
sub, super, text-top, text-bottom, <length>, <percentage>

The last group of values do not apply to cells, but the text within the cells. The cell is aligned at the baseline instead.

CSS Table Borders

There are 3 interesting properties for table borders

border-collapse — values can be collapse, separate, or inherit
border-spacing — values can be <length> (horizontal), <length> (vertical), or inherit. border-spacing is the distance between cell borders.
empty-cells — values can be show, hide, or inherit. If cells are empty or set to visibility: hidden content doesn’t show by default. Setting empty-cells: show on the table will cause backgrounds and borders to display for the empty cell.

Should You Use CSS Tables?

Are css tables better than html tables? If so what advantages do they have and if not why should we use them at all? Good questions that I don’t have great answers for.

I can say I’ve never used a css table in practice and have no intention of using them any time soon. If a page calls for tabular content it strikes me than an html table is called for and I think we have and will have better techniques for site layout than css tables.

I took a look at an older post I wrote on css vs tables to remind myself of the cons for using html tables for layout over a combination of divs and css.

Extra code — html tables require more structural code than divs, but css tables use just as much. If anything css tables use more since ids and classes will likely be added. If html tables use too much code then css tables do too.
Rigid structure — html tables are source dependent. The order you structure the cells is the same order in which they’ll display. The same is essentially true of css tables as well.
Browser rendering — browsers require multiple passes at the structure of html tables. They should only require one pass to display a css table if the table-layout is set to fixed. They’ll require the same multiple passes if set to auto.

Considering the above css tables aren’t offering enough benefit over html tables to use them for layout.

We could reach and suggest that since the css can be easily changed a css table is less rigid than an html table, but in practice I think they’re going to be just as rigid.

CSS tables do have the advantage of being more semantically correct as we can choose html elements that better describe our content.

Overall it’s hard for me to see much improvement in css tables over html tables, some perhaps, but not enough to justify to myself using them.

I think some of the other css layout modules on the horizon will be better and even our current practice of using floats and positioning for layout are still a better option.

At the same time I can’t say I’ve worked much with css tables. This post is the most time I’ve spend with them since they’ve been introduced and I’m open to someone else’s reasons for why we should use them.

I have a hunch they’ll remain in use to solve some specific problems like vertically centering content or cleverly switching the display order of different elements in a responsive design.

They may also prove to be a good pattern for navigation. I don’t see them being a viable solution to the problem of layouts though.

Summary

CSS tables are pretty simple to understand and use. It’s mostly a matter of remembering the corresponding css display property values for the basic html table elements.

table becomes display: table. td becomes display: table-cell, etc.

There are some nice features of css tables like the ability to collapse one or more columns through the visibility: collapse property and they can be used as solutions to some specific problems.

However they don’t provide enough advantage for me over html tables when it comes to layout. Their advantages seem minor and a bit of a reach. Ultimately I think we have better layout solutions than both html and css tables.

Again though I’m open to being convinced otherwise.

Have you used css tables in practice? If so how? Have you used them for site layout? To present tabular data? To solve a specific problem?