Home icon
Data Visualisation Guide

HTML tables

2 minutes read

HTML 101

Tables in HTML are defined with <table> tags. The header of a table, containing the column names, is contained in the <thead> tag, the body of the table in the <tbody> tag. Each row in a table goes in a <tr> tag (for “table row”) and each cell in a row of a table is contained in a <td> tag (”td” stands for “table data”).

<!DOCTYPE html>
<html>
  <head>
    <title>Webdev 101</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
  </head>
  <body>
    <h1>Tables</h1>
		<p>Here is a table in HTML:</p>
        <table>
            <thead>
                <tr>
                    <th>Module</th>
                    <th>Completed</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>5. Colours, colour blindness and data visualisation</td>
                    <td><input type="checkbox" checked></td>
                </tr>
                <tr>
                    <td>6. Making data visualisations understandable</td>
                    <td><input type="checkbox" checked></td>
                </tr>
                <tr>
                    <td>7. HTML 101</td>
                    <td><input type="checkbox"></td>
                </tr>
                <tr>
                    <td>8. Accessible HTML</td>
                    <td><input type="checkbox"></td>
                </tr>
            </tbody>
        </table>
  </body>
</html>

Related pages

HTML and <img>

SVG elements: text

Styling and CSS

Images in HTML

Browsers and servers

HTML elements

HTML 101