CodeMIRAI
0 XP

Tables

2 min read 3 runnable examples Quiz included

Tables show data in rows and columns, like a spreadsheet.

HTML
<table border="1">
  <tr>
    <th>Language</th>
    <th>Created</th>
  </tr>
  <tr>
    <td>Python</td>
    <td>1991</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>1995</td>
  </tr>
</table>
ElementMeans
<table>the table
<tr>a table row
<th>a header cell (bold and centred by default)
<td>a data cell

A properly structured table

Real tables add a caption and group rows into a head, body and foot. This helps screen readers and makes styling easier:

<caption> Monthly sales<thead><tbody><tfoot><th> Month<th> Units<th> Revenue<td><td><td><td><td><td><td colspan="2"> Total<td>
th cells are headings, td cells hold data, each tr is a row; thead, tbody and tfoot group the rows so tools can read the table.
HTML
<style>
  table { border-collapse: collapse; font-family: system-ui; }
  th, td { border: 1px solid #ccd; padding: 6px 12px; text-align: left; }
  thead { background: #eef0ff; }
  tfoot { font-weight: bold; }
</style>

<table>
  <caption>Course enrolments, 2026</caption>
  <thead>
    <tr><th>Course</th><th>Learners</th></tr>
  </thead>
  <tbody>
    <tr><td>Python</td><td>1,240</td></tr>
    <tr><td>SQL</td><td>860</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>2,100</td></tr>
  </tfoot>
</table>

Merging cells

colspan makes a cell span several columns and rowspan several rows:

HTML
<style> td, th { border: 1px solid #ccd; padding: 6px 10px; } table { border-collapse: collapse; } </style>
<table>
  <tr><th colspan="3">Weekly timetable</th></tr>
  <tr><td rowspan="2">Monday</td><td>9:00</td><td>Python</td></tr>
  <tr><td>11:00</td><td>SQL</td></tr>
</table>
Finished this lesson?Mark it complete to earn +20 XP and move your progress on.