💚

Beginner-Friendly Topic

Take your time — it's perfectly normal to re-read this topic 2–3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀

HTML Table Fundamentals

Tables are the correct HTML element for displaying tabular data — spreadsheets, schedules, price comparisons, and statistics. Learn the core table elements: <table>, <tr>, <th>, <td>, and how to structure accessible, semantic tables.

35 min•By Priygop Team•Updated 2026

When to Use Tables

HTML tables should only be used for tabular data — information that logically belongs in rows and columns. Never use tables for page layout (that's CSS Grid and Flexbox). Screen readers announce tables as data grids and let users navigate cell-by-cell. A well-structured table includes <thead> for header rows, <tbody> for data rows, <tfoot> for summary rows, and <caption> for a descriptive title.

Diagram

Loading diagram…

Tables organize data into rows and columns with semantic sections

Table Elements

<table> — Container for the entire table. Add border-collapse: collapse in CSS for clean borders
<caption> — Describes the table's purpose. Screen readers read this first. Essential for accessibility
<thead>, <tbody>, <tfoot> — Semantic grouping of header, body, and footer rows
<tr> — Table row. Contains <th> or <td> cells
<th> — Header cell. Has implicit scope (row or column). Bold and centered by default
<td> — Data cell. Contains the actual content
scope attribute on <th> — Explicitly associates headers with data: scope='col' for column headers, scope='row' for row headers

Warning

Never use HTML tables for page layout — only for actual tabular data like spreadsheets, schedules, and statistics. Table-based layouts were a hack from the 1990s before CSS existed. Screen readers announce tables as data grids, which confuses users when the table is just used for visual positioning. Use CSS Grid and Flexbox for layout.

Table Code Examples

<!-- Basic table with proper structure -->
<table>
  <caption>Q3 2025 Sales Report</caption>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Units Sold</th>
      <th scope="col">Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>1,250</td>
      <td>$31,250</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>890</td>
      <td>$22,250</td>
    </tr>
    <tr>
      <td>Widget C</td>
      <td>2,100</td>
      <td>$52,500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>4,240</td>
      <td>$106,000</td>
    </tr>
  </tfoot>
</table>

Try It Yourself: HTML Tables

Try It Yourself: HTML TablesHTML

HTML Editor

✓ ValidTab = 2 spaces

<style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f0f4f8; }
  table { width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
  caption { font-size: 1.2em; font-weight: bold; padding: 16px; color: #1a1a2e; text-align: left; }
  th { background: #E44D26; color: white; padding: 12px 16px; text-align: left; font-weight: 600; }
  td { padding: 12px 16px; border-bottom: 1px solid #eee; }
  tbody tr:hover { background: #f8f9fa; }
  tfoot { font-weight: bold; background: #f0f0f0; }
</style>

<table>
  <caption>📊 Monthly Expenses</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Budget</th>
      <th>Actual</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Rent</td><td>$1,200</td><td>$1,200</td><td>✅ On Budget</td></tr>
    <tr><td>Groceries</td><td>$400</td><td>$450</td><td>⚠️ Over</td></tr>
    <tr><td>Utilities</td><td>$150</td><td>$120</td><td>✅ Under</td></tr>
    <tr><td>Transport</td><td>$200</td><td>$180</td><td>✅ Under</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>$1,950</td><td>$1,950</td><td>✅ Balanced</td></tr>
  </tfoot>
</table>

<table>
  <caption>📊 Monthly Expenses</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Budget</th>
      <th>Actual</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Rent</td><td>$1,200</td><td>$1,200</td><td>✅ On Budget</td></tr>
    <tr><td>Groceries</td><td>$400</td><td>$450</td><td>⚠️ Over</td></tr>
    <tr><td>Utilities</td><td>$150</td><td>$120</td><td>✅ Under</td></tr>
    <tr><td>Transport</td><td>$200</td><td>$180</td><td>✅ Under</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>$1,950</td><td>$1,950</td><td>✅ Balanced</td></tr>
  </tfoot>
</table>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run (Ctrl+Enter)

HTML|30 lines|1206 chars|✓ Valid syntax

UTF-8

Quick Quiz: HTML Tables

Key Takeaways

Tables are the correct HTML element for displaying tabular data — spreadsheets, schedules, price comparisons, and statistics.
<table> — Container for the entire table. Add border-collapse: collapse in CSS for clean borders
<caption> — Describes the table's purpose. Screen readers read this first. Essential for accessibility
<thead>, <tbody>, <tfoot> — Semantic grouping of header, body, and footer rows

Topics in This Module

When to Use Tables

Diagram

Loading diagram…

Tables organize data into rows and columns with semantic sections

Table Elements

<table> — Container for the entire table. Add border-collapse: collapse in CSS for clean borders

<caption> — Describes the table's purpose. Screen readers read this first. Essential for accessibility

<thead>, <tbody>, <tfoot> — Semantic grouping of header, body, and footer rows

<tr> — Table row. Contains <th> or <td> cells

<th> — Header cell. Has implicit scope (row or column). Bold and centered by default

<td> — Data cell. Contains the actual content

scope attribute on <th> — Explicitly associates headers with data: scope='col' for column headers, scope='row' for row headers