<table>

Structures tabular data presentations

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.

Tip: Use CSS to style tables. The border, cellpadding, and cellspacing attributes are deprecated.

Note: Tables should be used for tabular data, not for layout purposes. Use CSS Grid or Flexbox for layouts.

Browser Support

The <table> tag is supported in all major browsers:

Chrome

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

Opera

Yes

Attributes

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

Deprecated Attributes

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

Attribute	Description	CSS Alternative
align	Specifies the alignment of a table	Use CSS `margin` or `float`
bgcolor	Specifies the background color	Use CSS `background-color`
border	Specifies the border width	Use CSS `border`
cellpadding	Specifies the space between cell content and borders	Use CSS `padding` on `td`/`th`
cellspacing	Specifies the space between cells	Use CSS `border-spacing`
frame	Specifies which parts of the outside borders should be visible	Use CSS `border`
rules	Specifies which parts of the inside borders should be visible	Use CSS `border` on cells
summary	Specifies a summary of the table content	Use `<caption>` or ARIA attributes
width	Specifies the width of a table	Use CSS `width`

Examples

Basic Table

Create a simple HTML table:

Example
<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:

Example
<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:

Example
<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:

Example
<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:

Example
<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:

Example
<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

Interactive Example

Here's a live example of a styled table:

Product	Price	Stock
Laptop	$999	15
Mouse	$25	50
Keyboard	$75	30

Try in Code Playground

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