HTML Table

Introduction

HTML tables display tabular data in a structured grid of rows and columns. They are essential for datasets, comparisons, schedules, and any information that fits naturally into a spreadsheet-like layout.

This tutorial covers table structure, semantic sections, styling with CSS, colspan and rowspan, accessibility, common pitfalls, and a complete employee list example.

What You’ll Learn

What Is an HTML Table?

An HTML table is a container that holds data in rows and columns. You build it with the <table> element; each row uses <tr>; header cells use <th>; data cells use <td>.

Tables are for data, not page layout. Modern sites use CSS Grid and Flexbox for columns and sidebars.

Basic Structure of a Table

A well-formed table uses these elements:

• <table> — defines the table container.
• <thead> — groups header row(s).
• <tbody> — groups the main data rows.
• <tfoot> — groups footer rows (totals, optional).
• <tr> — defines one table row.
• <th> — header cell (column or row title).
• <td> — data cell.

<table>
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>28</td></tr>
    <tr><td>Bob</td><td>34</td></tr>
  </tbody>
</table>

Table Elements

• <table> — main container for all table content.
• <caption> — optional title shown above the table (great for accessibility).
• <thead> — column titles; typically one row of th cells.
• <tbody> — body rows with your data.
• <tfoot> — summary row(s) such as totals or averages.
• <tr> — a horizontal row of cells.
• <th scope="col"> — column header; use scope="row" for row headers.
• <td> — ordinary data cell.

Table Attributes

HTML4 table attributes still appear in old tutorials but are deprecated in HTML5. Use CSS instead:

• border — use border: 1px solid #ddd on cells via CSS.
• cellpadding — use padding on th, td.
• cellspacing — use border-collapse: collapse and margins/borders.

Valid modern attributes include colspan and rowspan on th and td to merge cells.

Styling Tables

CSS improves readability with borders, spacing, alignment, and alternating row colors:

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f4f4f4;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}

border-collapse: collapse merges adjacent borders into single lines. Zebra striping with nth-child(even) helps users track rows across wide tables.

colspan and rowspan

Merge cells when headers or summaries span multiple columns or rows:

<tr>
  <th colspan="2">Schedule</th>
</tr>
<tr>
  <td rowspan="2">Monday</td>
  <td>Math</td>
</tr>

Common Pitfalls

• Accessibility — use th with scope, add caption, and avoid tables for non-tabular layout.
• Responsiveness — wide tables overflow on phones; wrap in a scroll container or simplify columns on small screens.
• Complex tables — nested tables and deep colspan grids confuse users; split data or use simpler layouts when possible.
• Deprecated attributes — replace border, cellpadding, and cellspacing with CSS.

Examples Gallery

Six examples from a minimal grid to a styled employee list. Each includes View Output and Try It Yourself.

<table>
  <tr><td>Apple</td><td>Red</td></tr>
  <tr><td>Banana</td><td>Yellow</td></tr>
</table>

<table>
  <thead>
    <tr><th>Product</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Notebook</td><td>$4.99</td></tr>
    <tr><td>Pen</td><td>$1.25</td></tr>
  </tbody>
</table>

<table>
  <thead>
    <tr><th>Item</th><th>Qty</th><th>Cost</th></tr>
  </thead>
  <tbody>
    <tr><td>Coffee</td><td>2</td><td>$6.00</td></tr>
    <tr><td>Bagel</td><td>1</td><td>$3.50</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">Total</td><td>$9.50</td></tr>
  </tfoot>
</table>

<table>
  <tr><th colspan="2">Schedule</th></tr>
  <tr>
    <td rowspan="2">Mon</td>
    <td>Math</td>
  </tr>
  <tr><td>Science</td></tr>
</table>

<style>
  table { width: 100%; border-collapse: collapse; }
  th, td { border: 1px solid #ddd; padding: 8px; }
  th { background: #f4f4f4; }
  tr:nth-child(even) { background: #f9f9f9; }
</style>
<table>
  <thead><tr><th>Name</th><th>Score</th></tr></thead>
  <tbody>
    <tr><td>Alice</td><td>92</td></tr>
    <tr><td>Bob</td><td>85</td></tr>
  </tbody>
</table>

<table>
  <thead>
    <tr><th>ID</th><th>Name</th><th>Position</th><th>Department</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>John Doe</td><td>Software Engineer</td><td>Development</td></tr>
    <tr><td>2</td><td>Jane Smith</td><td>Project Manager</td><td>Operations</td></tr>
  </tbody>
</table>

Best Practices