HTML Tables tr, td, th, colspan, rowspan

Basic table Structure

HTML tables organize information into rows and columns. They are best used for tabular data such as price lists, schedules, reports, scoreboards, comparison charts, and account summaries.

Tables should not be used for page layout. Modern page layout should be handled with CSS tools like Flexbox and Grid, while tables should be reserved for real data relationships.

Basic Table

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>25</td>
            <td>London</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>30</td>
            <td>New York</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total: 2 users</td>
        </tr>
    </tfoot>
</table>

Table Tags Reference

A well-structured table uses semantic elements to separate the header, body, and footer. This improves readability, styling, and accessibility for assistive technologies.

Tag	Description
<table>	Defines the table
<thead>	Groups header rows - helps with accessibility and styling
<tbody>	Groups body rows
<tfoot>	Groups footer rows (totals, summaries)
<tr>	Table row
<th>	Table header cell - bold and centered by default
<td>	Table data cell
<caption>	Table title/caption (placed right after <table>)

Caption and Header Scope

The <caption> element gives the table a title, which helps users understand what the table represents. Header cells should also use scope="col" or scope="row" when appropriate so screen readers can associate headers with the correct data cells.

Accessible table

<table>
    <caption>Student Scores</caption>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Math</th>
            <th scope="col">Science</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Ava</th>
            <td>88</td>
            <td>91</td>
        </tr>
    </tbody>
</table>

Spanning Rows & Columns

Sometimes a table needs cells that stretch across multiple rows or columns. HTML supports this with the rowspan and colspan attributes. These are commonly used in grouped headers, timetable layouts, and summary rows.

colspan & rowspan

<table border="1">
    <caption>Quarterly Sales</caption>
    <thead>
        <tr>
            <th rowspan="2">Product</th>
            <th colspan="2">Sales</th>
        </tr>
        <tr>
            <th>Q1</th>
            <th>Q2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Widget A</td>
            <td>$1,200</td>
            <td>$1,500</td>
        </tr>
        <tr>
            <td>Widget B</td>
            <td>$800</td>
            <td>$950</td>
        </tr>
    </tbody>
</table>

Styling Tables with CSS

HTML provides the structure of the table, while CSS controls its appearance. Common table styles include borders, striped rows, spacing, alignment, and hover effects. Clean styling can make large data sets much easier to read.

Table styling

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

th, td {
    border: 1px solid #d1d5db;
    padding: 12px;
    text-align: left;
}

thead {
    background: #f3f4f6;
}

tbody tr:nth-child(even) {
    background: #f9fafb;
}

tbody tr:hover {
    background: #eef6ff;
}

Responsive Tables

A wide table needs an overflow wrapper when the columns cannot shrink enough for a small screen. Putting the table inside a scrollable container preserves the column structure and keeps the page from forcing the layout to stretch horizontally.

Responsive wrapper

<div style="overflow-x:auto;">
    <table>
        <!-- wide table content -->
    </table>
</div>

Best Practices

Use tables only for data that naturally fits rows and columns.
Add a <caption> so users understand what the table represents.
Use <th> and scope attributes for better accessibility.
Keep large tables readable with borders, spacing, and striped rows.
Make wide tables responsive by allowing horizontal scrolling on small screens.

HTML semantic HTML example

<section aria-labelledby="html-title">
  <h2 id="html-title">HTML</h2>
  <p>This block uses meaningful tags so browsers, users, and assistive technology understand the content.</p>
  <a href="/learn/html">Read the full HTML note</a>
</section>

HTML accessibility check example

<form>
  <label for="html-input">HTML value</label>
  <input id="html-input" name="html" required>
  <button type="submit">Save</button>
</form>
<!-- Check: every interactive element has a name, purpose, and keyboard path. -->

Before you move on