Be able to insert a table including table header, table rows, table data

Inserting a Table in a Web Page

Why use tables?

Tables organise data in rows and columns, making it easier for readers to compare information. In HTML a table is built from a set of specific elements that define the table structure.

Key HTML elements for a table

• <table> – container for the whole table.
• <thead> – groups the header rows.
• <tbody> – groups the body rows (the main data).
• <tr> – defines a table row.
• <th> – table header cell (bold and centred by default).
• <td> – table data cell.

Step‑by‑step insertion

1. Place the <table> element where the table should appear in the HTML document.
2. Inside the table, add a <thead> section for the column headings.
3. Within <thead>, create a row (<tr>) and add header cells (<th>) for each column.
4. Add a <tbody> section for the data rows.
5. For each data row, use <tr> and fill the cells with <td> elements.

Example code

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price (£)</th>
            <th>Stock</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Notebook</td>
            <td>2.50</td>
            <td>120</td>
        </tr>
        <tr>
            <td>Pen</td>
            <td>0.80</td>
            <td>350</td>
        </tr>
        <tr>
            <td>Eraser</td>
            <td>0.30</td>
            <td>200</td>
        </tr>
    </tbody>
</table>

Rendered table

Common pitfalls

• Forgetting the <thead> – browsers will still display the table, but the header may not be distinguished for accessibility tools.
• Mixing <th> and <td> in the same row – keep header cells only in the header row(s).
• Omitting closing tags – HTML5 is forgiving, but well‑formed markup prevents unexpected layout issues.

Practice exercise

Create a table that lists the following subjects, their weekly hours, and the teacher’s name:

1. Mathematics – 4 hours – Mr. Lee
2. English – 3 hours – Ms. Patel
3. Science – 5 hours – Dr. Ahmed

Use the structure described above and include a <thead> with appropriate headings.