Tables

For a long time, tables were the "hacky" solution for web layouts. Developers used them to force side-by-side columns and headers before modern tools existed. Today, thanks to Flexbox and Grid, we have reclaimed tables for their true purpose: organizing and displaying structured data.

In this tutorial, we will take a raw, "ugly" HTML table and style it step-by-step into a professional data component.

1. The Skeleton: Basic HTML Structure

A standard table consists of the <table> wrapper, a header (<thead>), and the body (<tbody>). Inside these, we use table rows (<tr>), header cells (<th>), and data cells (<td>).

2. Adding Borders and Spacing

By default, table cells have no borders and very little spacing. To make the data readable, we apply borders to the table, th, and td elements.

Code Block Loading...

3. The Magic of Border-Collapse

When you apply borders to both the table and the cells, you’ll notice a "double border" effect. The border-collapse property determines whether cells have shared or separate borders.

This instruction tells the browser to merge adjacent cell borders into one. It is the most common property used in professional web design to make tables look clean.

Code Block Loading...

4. Improving Readability with Zebra Striping

When dealing with large datasets, it becomes difficult for the eye to track a single row across the screen. Zebra Striping solves this by alternating background colors.

Using the :nth-child pseudo-class, we can target specific rows without adding extra classes to our HTML:

  • tr:nth-child(even): Styles the 2nd, 4th, 6th rows, etc.
  • tr:nth-child(odd): Styles the 1st, 3rd, 5th rows, etc.

Code Block Loading...

5. Complete Interactive Table Demo

This demo combines all the properties discussed: borders, padding, collapsing, and zebra striping into one manageable interface.

Code Block Loading...

Key Takeaways

  • Semantic Use: Only use tables for tabular data, never for page layouts (use Flexbox/Grid for that).
  • Border-Collapse: Always use border-collapse: collapse; if you want a modern, single-border look.
  • Padding is King: Tables look cramped by default. Adding padding to th and td is the easiest way to improve design.
  • Pseudo-selectors: Use nth-child(even) or nth-child(odd) to create zebra stripes, which significantly improves data readability.