<< Home

Chapter 6: Tables for Real Data

For many years tables ruled the web. Early site builders treated them as invisible scaffolding that held every banner, column and button in place. A page might hide dozens of nested grids, each one nudging content into rigid arrangements. This worked in a practical sense but it was never the purpose of tables. They were built for data rather than layout. Once CSS became widely supported, the web slowly stepped away from these table labyrinths and returned the element to its original role. This chapter focuses on that role and shows how to build clean, meaningful data tables that help readers understand information at a glance.

Used well, a table becomes a careful map of values. Every row forms a small story, and every column tracks one attribute of that story. Presenting information in this structured way lets readers compare numbers, find patterns and move through the content with confidence. The sections that follow help you decide when a table is right, how to construct its main parts and how to shape a simple design even without CSS. By the end you will have a practical pattern that you can reuse whenever your projects call for real data.

When tables are the right choice

Use tables only when your content is truly tabular. If readers need to compare values across rows or follow patterns down a column, a table supports this naturally. If the information reads more like a list of features or a narrative, avoid forcing it into a grid because that can make the page harder to understand.

Recognising true tabular data

Think about the data as a set of relationships. If each row describes a single item and each column describes one attribute of that item, then you have a natural fit for a table. A price list, a timetable or a set of measurements works well. A paragraph of mixed facts does not.

💡 If you can name the columns with short labels, you probably have tabular data. When column names begin to stretch into sentences, the structure may need rethinking.

Avoiding layout tables

Early web pages often used tables to lay out an entire page. This pattern is no longer appropriate because it makes the structure unclear for screen readers, search engines and anyone who relies on assistive tools. Modern HTML provides better layout options, so use tables only for genuine data.

💡 When your data has only two columns, pause for a moment and consider whether a list would express it more clearly. Many pairs of values read better as short labelled items, especially when the second column holds brief descriptions rather than strict measurements or comparable figures.

Caption, thead, tbody, and tfoot

Data tables become easier to understand when you separate their parts. The caption explains the purpose of the table to machines such as screen readers. The thead groups the column labels, the tbody holds the main data and the tfoot holds summary values that help readers interpret the numbers. These elements do not change the visual appearance on their own. Their main job is to express meaning so assistive tools and automated processes can interpret the table correctly.

By contrast, tags such as the <th> element affect how the table looks to humans. Browsers treat header cells differently by centering the text and applying a bold style. This can feel too strong in a compact table or in layouts where you want precise control over alignment. If the built-in styling is not suitable, you can skip <th> entirely and place your header labels inside ordinary <td> cells. This keeps the visual weight even across the grid and leaves you free to highlight information in your own way.

Adding a caption

A caption appears at the top of the table and acts like a concise title. It should be short and informative because some assistive technologies treat the caption as the primary description.

<table>
  <caption>Quarterly sales by region</caption>
  <tr>
    <td><b>Region</b></td>
    <td><b>Q1</b></td>
    <td><b>Q2</b></td>
    <td><b>Q3</b></td>
  </tr>
  …
</table>

Structuring headers and body

Use thead to group column labels and tbody to wrap the main rows. This structure helps tools and browsers interpret the data. It also improves clarity when tables grow larger.

<table>
  <caption>Daily temperatures</caption>
  <thead>
    <tr>
      <td><b>Day</b></td>
      <td><b>High</b></td>
      <td><b>Low</b></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monday</td>
      <td>18°C</td>
      <td>11°C</td>
    </tr>
  </tbody>
</table>
⚠️ Avoid splitting a single logical header row across thead and tbody. Keep labels together to avoid confusing assistive technologies.

Using tfoot for summaries

The tfoot group holds totals or remarks that summarise your data. Browsers can place the foot at the end or the beginning depending on printing preferences, so keep the summary short and clear.

<table>
  <caption>Weekly expenses</caption>
  <thead>
    <tr>
      <td><b>Item</b></td>
      <td><b>Cost</b></td>
    </tr>
  </thead>
  <tbody>
    <tr><td>Transport</td><td>£28</td></tr>
    <tr><td>Food</td><td>£42</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>£70</td></tr>
  </tfoot>
</table>

Styling tables without CSS

You can make tables legible with pure HTML features even when you avoid CSS. Attributes such as colspan, rowspan and scope help you express structure clearly. The border attribute still works in HTML although it is not recommended for long term documents, but it can help you explain concepts during learning.

Using colspan and rowspan

Merge cells when one value logically covers multiple columns or rows. This avoids repetition and reduces visual noise.

<table border="1">
  <caption>Merged cells</caption>
  <tr>
    <td colspan="2"><b>Group A</b></td>
    <td><b>Score</b></td>
  </tr>
  <tr>
    <td rowspan="2">Team 1</td>
    <td>Round 1</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Round 2</td>
    <td>7</td>
  </tr>
</table>

Adding basic styling

The border attribute creates simple lines that help users track rows and columns. Although modern documents use CSS instead, this attribute is enough for quick prototypes or learning exercises.

<table border="1">
  <caption>Simple grid</caption>
  <tr><td>A</td><td>B</td><td>C</td></tr>
  <tr><td>D</td><td>E</td><td>F</td></tr>
</table>
💡 Borders can look heavy at larger scales. If a table contains many rows, consider reducing repetition by grouping or using clearer headers.

Plain HTML offers only limited ways to add colour to a table. You can use the bgcolor attribute on cells or rows, although it is an old feature that survives mostly for compatibility. It does work in simple learning examples, for instance to highlight a header row or to distinguish alternating rows, but it is not recommended for modern documents. When you want consistent colours or themes, you will eventually need CSS because that gives you clearer control and avoids mixing presentation with structure.

Building a small data table

Here you create a compact table that uses caption, thead, tbody and simple borders. This pattern is suitable for short statistical summaries or quick comparisons.

Putting the parts together

The example below lists the height of three popular peaks. It uses borders for clarity and a short caption for context.

<table border="1">
  <caption>Mountain heights</caption>
  <thead>
    <tr>
      <td><b>Mountain</b></td>
      <td><b>Height (m)</b></td>
    </tr>
  </thead>
  <tbody>
    <tr><td>Ben Nevis</td><td>1345</td></tr>
    <tr><td>Snowdon</td><td>1085</td></tr>
    <tr><td>Scafell Pike</td><td>978</td></tr>
  </tbody>
</table>

This is the core pattern for real data tables. As your projects grow, you can extend it with CSS for spacing, stripes and responsive layouts, but the essential structure will remain the same.