<table>

Definition and Usage

The <table> element establishes an HTML table.

An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.

The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

An HTML table may also include <thead>, <tbody>, <tfoot>, and <caption> elements.

Attributes

The <table> tag also supports the Global Attributes in HTML.

Deprecated Attributes

The following attributes are deprecated in HTML5. Use CSS instead:

Examples

Basic Table

Create a simple HTML table:

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Smith</td>
    <td>25</td>
  </tr>
</table>

Table with thead, tbody, and tfoot

Use semantic table structure with header, body, and footer sections:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>2</td>
      <td>$1,200</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>5</td>
      <td>$75</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>$1,275</td>
    </tr>
  </tfoot>
</table>

Styled Table with CSS

Add modern styling to your table:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

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

  th {
    background-color: #745af2;
    color: white;
    font-weight: 600;
  }

  tr:hover {
    background-color: #f5f5f5;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>jane@example.com</td>
    <td>UK</td>
  </tr>
</table>

Responsive Table

Make tables responsive with horizontal scrolling on small screens:

<style>
  .table-container {
    overflow-x: auto;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
  }

  th, td {
    padding: 12px;
    border: 1px solid var(--border-color);
  }

  th {
    background-color: var(--text-primary);
    color: white;
  }
</style>

<div class="table-container">
  <table>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Department</th>
      <th>Salary</th>
      <th>Start Date</th>
    </tr>
    <tr>
      <td>001</td>
      <td>Alice Johnson</td>
      <td>Engineering</td>
      <td>$85,000</td>
      <td>2022-01-15</td>
    </tr>
  </table>
</div>

Table with Caption

Add a caption to describe the table content:

<table>
  <caption>Monthly Sales Report - January 2025</caption>
  <thead>
    <tr>
      <th>Region</th>
      <th>Sales</th>
      <th>Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>North</td>
      <td>$125,000</td>
      <td>+12%</td>
    </tr>
    <tr>
      <td>South</td>
      <td>$98,000</td>
      <td>+8%</td>
    </tr>
  </tbody>
</table>

Table with Colspan and Rowspan

Use colspan and rowspan to merge cells:

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Contact Information</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
    <td>555-1234</td>
  </tr>
  <tr>
    <td rowspan="2">Jane Smith</td>
    <td>jane@example.com</td>
    <td>555-5678</td>
  </tr>
  <tr>
    <td>jane.smith@work.com</td>
    <td>555-9012</td>
  </tr>
</table>

Try it Yourself

Table Structure

A well-structured HTML table should use the following elements:

• <caption> - Provides a title for the table
• <thead> - Groups header content
• <tbody> - Groups body content
• <tfoot> - Groups footer content
• <tr> - Defines a table row
• <th> - Defines a header cell
• <td> - Defines a data cell

Accessibility

Make tables accessible by following these guidelines:

• Use <caption> to provide a descriptive title
• Use <th> elements for header cells
• Use scope attribute on <th> elements (row or col)
• For complex tables, use headers attribute on <td> elements
• Provide adequate color contrast for text
• Don't rely solely on color to convey information

Best Practices

• Use semantic table structure with <thead>, <tbody>, and <tfoot>
• Always use CSS for styling instead of deprecated HTML attributes
• Make tables responsive for mobile devices
• Use tables for tabular data only, not for page layout
• Keep tables simple and easy to scan
• Include a <caption> or header to describe the table
• Use border-collapse: collapse for cleaner borders
• Add hover effects to improve readability

Responsive Tables

Make tables work on mobile devices using these techniques:

• Horizontal Scroll: Wrap table in a container with overflow-x: auto
• Stack Columns: Use CSS to stack cells vertically on small screens
• Card Layout: Transform table rows into cards using CSS Grid
• Hide Columns: Hide less important columns on mobile

Related Tags

• <thead>

  Groups header content in a table

• <tbody>

  Groups body content in a table

• <tfoot>

  Groups footer content in a table

• <tr>

  Defines a row in a table

• <th>

  Defines a header cell in a table

• <td>

  Defines a data cell in a table

• <caption>

  Defines a table caption