<table>

Syntax

<table>
  <thead>
    <tr><th>Header 1</th><th>Header 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Data 1</td><td>Data 2</td></tr>
  </tbody>
</table>

Examples

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Developer</td>
      <td>Manchester</td>
    </tr>
    <tr>
      <td>Ben</td>
      <td>Designer</td>
      <td>Leeds</td>
    </tr>
  </tbody>
</table>

<table>
  <caption>Quarterly Sales</caption>
  <thead>
    <tr><th>Quarter</th><th>Revenue</th></tr>
  </thead>
  <tbody>
    <tr><td>Q1</td><td>$12,000</td></tr>
    <tr><td>Q2</td><td>$15,500</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>$27,500</td></tr>
  </tfoot>
</table>

<table style="border-collapse: collapse; width: 100%;">
  <tr style="background: #f3f4f6;">
    <th style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">Item</th>
    <th style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">Price</th>
  </tr>
  <tr>
    <td style="border: 1px solid #d1d5db; padding: 8px;">Coffee</td>
    <td style="border: 1px solid #d1d5db; padding: 8px;">$4.50</td>
  </tr>
</table>

Attributes

• colspan (number): Used on <td>/<th> to span multiple columns
• rowspan (number): Used on <td>/<th> to span multiple rows

Best practices

• Only use tables for genuinely tabular data, never for visual page layout
• Always use <th> for header cells so screen readers can announce column/row context
• Use <thead>, <tbody>, and <tfoot> to give the table clear structure
• Add a <caption> to describe what the table contains
• Use the scope attribute on <th> elements in complex tables to clarify row vs. column headers

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard