Skip to content
html.sh

<table> - Table Element

The <table> Element

Section titled “The <table> Element”
Table Element

The <table> element represents tabular data — information presented in a two-dimensional table comprised of rows and columns containing cells of data. Tables are essential for displaying structured information like schedules, pricing comparisons, statistical data, and other grid-based content.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<table>
  <caption>Table description</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
</table>

Table Structure Components

Section titled “Table Structure Components”

A well-structured table consists of several key elements:

Provides a title or description for the table. Critical for accessibility.

Contains header rows that label the columns.

Contains the main data rows of the table.

Contains footer rows, typically summaries or totals.

Defines a table row containing cells.

Header cell that labels a row or column.

Standard data cell containing information.

&

Define column properties and styling.

Attributes

Section titled “Attributes”

Global Attributes

Section titled “Global Attributes”

The <table> element supports all global HTML attributes.

Deprecated Attributes

Section titled “Deprecated Attributes”

Common Use Cases

Section titled “Common Use Cases”

Basic Data Table

Section titled “Basic Data Table”
Result
Section titled “Table with Footer”
Result

Striped Table Rows

Section titled “Striped Table Rows”
Result

Tables vs. CSS Layout

Section titled “Tables vs. CSS Layout”

Use <table> when you have:

  • Tabular data (rows and columns of related information)
  • Data that needs to be compared across dimensions
  • Financial data, statistics, or schedules
  • Information naturally organized in a grid
  • Data that would be displayed in a spreadsheet

Accessibility Best Practices

Section titled “Accessibility Best Practices”

Making tables accessible is crucial for users with screen readers:

1. Always Include a Caption

Section titled “1. Always Include a Caption”
<table>
  <caption>Student Grades - Spring 2024</caption>
  <!-- table content -->
</table>

2. Use <th> with scope Attribute

Section titled “2. Use <th> with scope Attribute”
<thead>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Alice</th>
    <td>95</td>
  </tr>
</tbody>

3. For Complex Tables, Use headers Attribute

Section titled “3. For Complex Tables, Use headers Attribute”
<table>
  <tr>
    <th id="name">Name</th>
    <th id="math">Math</th>
    <th id="science">Science</th>
  </tr>
  <tr>
    <th id="alice" headers="name">Alice</th>
    <td headers="alice math">95</td>
    <td headers="alice science">88</td>
  </tr>
</table>

4. Provide Summary for Complex Tables

Section titled “4. Provide Summary for Complex Tables”
<table>
  <caption>
    Quarterly Sales by Region
    <details>
      <summary>Table Summary</summary>
      This table shows sales figures for Q1-Q4 across three regions,
      with totals in the footer row.
    </details>
  </caption>
  <!-- table content -->
</table>

Responsive Tables

Section titled “Responsive Tables”

Tables can be challenging on mobile devices. Here are common patterns:

1. Horizontal Scroll (Simplest)

Section titled “1. Horizontal Scroll (Simplest)”
Result

2. Stacked Layout for Mobile

Section titled “2. Stacked Layout for Mobile”
@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }


  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }


  td {
    position: relative;
    padding-left: 50%;
  }


  td:before {
    content: attr(data-label);
    position: absolute;
    left: 6px;
    font-weight: bold;
  }
}
<td data-label="Name">Alice Johnson</td>
<td data-label="Email">[email protected]</td>

Styling Tables with CSS

Section titled “Styling Tables with CSS”

Basic Styling

Section titled “Basic Styling”
table {
  border-collapse: collapse; /* Remove spacing between cells */
  width: 100%;
  margin: 1em 0;
}


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


thead {
  background-color: #333;
  color: white;
}


tbody tr:hover {
  background-color: #f5f5f5;
}

Border Styles

Section titled “Border Styles”
table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
}

Common Patterns

Section titled “Common Patterns”

Highlighting on Hover

Section titled “Highlighting on Hover”
tbody tr:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}

Alternating Row Colors (Zebra Striping)

Section titled “Alternating Row Colors (Zebra Striping)”
tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}


tbody tr:nth-child(even) {
  background-color: #ffffff;
}

Fixed Header

Section titled “Fixed Header”
thead {
  position: sticky;
  top: 0;
  background-color: #333;
  color: white;
  z-index: 10;
}

Best Practices

Section titled “Best Practices”

Use Semantic Structure

Always use <thead>, <tbody>, and <tfoot> to organize your table logically.

Add a Caption

Every table should have a <caption> describing its contents.

Use Scope Attributes

Add scope to <th> elements to indicate whether they label rows or columns.

Keep It Simple

Avoid complex nested structures. Simpler tables are more accessible and maintainable.

Test Responsiveness

Test your tables on mobile devices and ensure they remain usable.

Consider Alternatives

For very complex data, consider using interactive components or charts instead.

Browser Support

Section titled “Browser Support”

The <table> element is supported in all browsers:

  • ✅ Chrome (all versions)
  • ✅ Firefox (all versions)
  • ✅ Safari (all versions)
  • ✅ Edge (all versions)
  • ✅ Opera (all versions)
  • ✅ Internet Explorer (all versions)
Section titled “Related Elements”
  • <caption> - Provides a title or description for the table
  • <thead> - Groups header rows
  • <tbody> - Groups body rows
  • <tfoot> - Groups footer rows
  • <tr> - Defines a table row
  • <th> - Defines a header cell
  • <td> - Defines a data cell
  • <colgroup> - Groups columns for styling
  • <col> - Defines properties for a column

Specifications

Section titled “Specifications”