HTML <table> Tag

What You’ll Learn

The <table> tag structures tabular data into rows and columns. This guide covers syntax, tr/th/td, CSS styling, accessibility, tables vs layout, and best practices for beginners.

What Is the <table> Tag?

The <table> tag is an HTML element for creating tables that organize and display data in rows and columns. It is the root container for tabular content on a web page.

A table contains rows (tr), header cells (th), and data cells (td). For larger tables, group rows with thead, tbody, and tfoot.

📝 Syntax

Create a basic table with table, tr, th, and td:

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

Name and Age Example

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>25</td>
  </tr>
</table>

Syntax Rules

• Every row starts with tr and contains one or more th or td cells.
• Use th for column or row headings; use td for data values.
• Style tables with CSS, not obsolete HTML attributes like border or cellpadding.
• Add a caption as the first child when the table needs a visible title.

📋 Table Structure

Understanding how table elements fit together is essential for readable, accessible markup:

A minimal table needs only table, tr, th, and td. As tables grow, add thead and tbody to separate headers from body content.

⚖️ Tables vs Page Layout

🎨 Styling and Formatting

Customize table appearance with CSS applied to table, tr, th, and td:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  th {
    background: #f1f5f9;
  }
</style>

• border-collapse: collapse merges adjacent cell borders into a single line.
• padding on th and td controls inner spacing (replaces cellpadding).
• width: 100% lets the table fill its container on responsive layouts.

Examples Gallery

Basic structure, CSS styling, and comparative data tables with copy-ready code and live previews.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>25</td>
  </tr>
</table>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>New York</td>
  </tr>
</table>

<table>
  <tr>
    <th>Month</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$10,000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$12,500</td>
  </tr>
</table>

♿ Accessibility

• Use meaningful headers — Mark column labels with th so screen readers announce row/column context.
• Add a caption — Use caption to give the table a descriptive title.
• Use scope on th — Add scope="col" or scope="row" on header cells in complex tables.
• Never use tables for layout — Layout tables create confusing experiences for assistive technology users.

💡 Best Practices