Styling Tables the Modern CSS Way

HTML tables are almost as old as the web itself, and have been used — and abused — for decades. Once upon a time, intrepid web designers hacked together complex layouts using tables, in the absence of other suitable methods. Thankfully that’s no longer common practice today, but tables are still a vital part of the web, and are crucial for displaying tabular data — two-dimensional data, organised in rows and columns.

Creating good-looking tables on the web can be fiddly at times. We’re going to run through some tips and gotchas for building simple and complex tables in HTML and CSS, and where modern CSS can help us.

The < table > element is vital for wrapping our table content. The < thead > and < tbody > elements contain the table’s header and body rows respectively. < tr > elements form the rows, which contain < th > ( header ) and < td > ( body ) cells. We’re also using a < tfoot > ( footer ) element to show the global average temperature change at the bottom of the table.