HTML Basics

HTML Tables

Tables display information in rows and columns. This page shows how to build a proper table, add headers, and merge cells.

Table Building Blocks

<table> wraps the whole table.
<tr> defines a table row.
<th> defines a header cell (bold and centred by default).
<td> defines a normal data cell.

A simple table

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Asha</td>
      <td>Designer</td>
    </tr>
    <tr>
      <td>Ravi</td>
      <td>Developer</td>
    </tr>
  </tbody>
</table>

Merging Cells

Use the colspan attribute to make a cell span multiple columns, and rowspan to span multiple rows.

Spanning columns

<table>
  <tr>
    <th colspan="2">Contact Details</th>
  </tr>
  <tr>
    <td>Email</td>
    <td>hello@example.com</td>
  </tr>
</table>

💡

Use tables only for tabular data, not for page layout. For arranging a page into columns, use CSS Grid or Flexbox instead.

HTML Tables

Table Building Blocks

Merging Cells

Ready to use your HTML skills?