Tables and Data Representation

Structuring data with HTML tables

Tables let you lay out information in rows and columns – useful for timetables, price lists, sports results, or anything that fits a grid. The HTML tags you need and a few ways to make tables readable and accessible.

The basic table tags

Every HTML table is built from a handful of elements: <table>, <tr>, <th>, and <td>.

<table>: the table itself.
<tr> (table row): one row of cells.
<th> (table header): a header cell, usually bold and centred.
<td> (table data): a normal data cell.

A simple table

Start with something like this:

<table>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$150</td>
    </tr>
</table>

Two columns (Month and Savings), three rows including the header row.

Grouping table sections

The `<thead>`, `<tbody>`, and `<tfoot>` tags

For larger tables, split the structure into logical sections with <thead>, <tbody>, and <tfoot>.

<thead> holds the header row(s).
<tbody> holds the main body of the table.
<tfoot> is for a footer row – totals, summaries, that sort of thing.

<table>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <!-- More rows -->
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$250</td>
        </tr>
    </tfoot>
</table>

Colspan and rowspan

To stretch a cell across multiple columns or rows, use colspan or rowspan:

<tr>
    <td colspan="2">End of Year Summary</td>
</tr>

That cell spans two columns.

Styling tables with CSS

HTML defines the structure; CSS makes it readable.

Basic styling

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

Full width, collapsed borders, and a bit of padding on each cell.

Responsive tables

Wide tables on small screens are awkward. One fix is to let the table scroll horizontally:

@media screen and (max-width: 600px) {
    table {
        overflow-x: auto;
        display: block;
    }
}

Accessibility in tables

Screen readers depend on proper table markup to read data in context. Use <th> for headers, not styled <td> cells. A <caption> at the top of the table gives a short description of what it contains.

Advanced table techniques

Fixed and sticky headers

On long tables, you may want the header row to stay visible while the user scrolls. CSS position: sticky can do that with a bit of extra work.

JavaScript-enhanced tables

For sorting, filtering, or pagination, plain HTML only gets you so far. Libraries like DataTables add that behaviour without much boilerplate.

Whether your table is three rows or three hundred, clarity beats decoration. Structure the markup properly, style it so the data is easy to scan, and do not forget accessibility – a table nobody can read is not doing its job.