Path // www.yourhtmlsource.com → Reference → <TABLE> ELEMENT

<table> element

by Ross Shannon

The <table> element is the container for all tabular data in HTML. It represents information structured in rows and columns, making it ideal for displaying data sets, schedules, comparison charts, and other structured information. Tables should be used for presenting data, not for page layout purposes.

Clock This page was last updated on 2025-11-17


Syntax

The basic structure of a table includes the table container with rows and cells:

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

Key Attributes

Modern HTML tables rely primarily on CSS for styling, but there are some important attributes:

  • border — Specifies the width of the border around the table and cells. While still valid, it’s better to use CSS for borders. Value is in pixels (e.g., border="1").
  • summary — Provides a summary of the table’s purpose and structure for screen readers. Deprecated in HTML5 in favor of other techniques.

The following attributes are obsolete and should be replaced with CSS:

  • cellpadding — Use CSS padding on td and th elements instead
  • cellspacing — Use CSS border-spacing or border-collapse instead
  • width — Use CSS width property instead
  • align — Use CSS margin or text-align instead
  • bgcolor — Use CSS background-color instead

Examples

Simple Data Table

<table>
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Units Sold</th>
      <th>Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>150</td>
      <td>$4,500</td>
    </tr>
    <tr>
      <td>February</td>
      <td>180</td>
      <td>$5,400</td>
    </tr>
  </tbody>
</table>

Table with Footer

<table>
  <caption>Expense Summary</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>$1,250</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Office Supplies</td>
      <td>$450</td>
    </tr>
    <tr>
      <td>Software</td>
      <td>$800</td>
    </tr>
  </tbody>
</table>

Accessible Table with Scope

<table>
  <caption>Student Grades</caption>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Math</th>
    <th scope="col">English</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>95</td>
    <td>88</td>
  </tr>
  <tr>
    <th scope="row">Bob</th>
    <td>82</td>
    <td>91</td>
  </tr>
</table>

When to Use

Use tables for:

  • Displaying data that has a logical row and column relationship
  • Comparison charts and feature matrices
  • Schedules and timetables
  • Financial data and statistics
  • Any information that would make sense in a spreadsheet

Do NOT use tables for:

  • Page layout — use CSS Grid or Flexbox instead
  • Positioning elements side by side
  • Creating visual columns of content
  • Any non-tabular data presentation

Using tables for layout creates accessibility problems, as screen readers interpret them as data tables, confusing users who rely on assistive technology.