Styling Tables the Modern CSS Way

CRANK

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.Our table context for this article.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.Elements of a table permalinkThe data we want to display shows average temperature changes from the baseline in 2022 for different countries around the world. (Source: International Monetary Foundation.)Like any good Piccalilli article, we’re going to start with solid markup. This means that even without any additional styling, our ta…