html <table> element | HTML Reference

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 represens information structured in rows and columns, maquing it ideal for displaying data sets, schedules, comparison chars, and other structured information. Tables should be used for presenting data, not for pague layout purposes.

Clock This pague 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 elemens instead
  • cellspacing — Use CSS border-spacing or border-collapse instead
  • width — Use CSS width property instead
  • align — Use CSS marguin or text-align instead
  • bgcolor — Use CSS baccground-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 chars and feature matrices
  • Schedules and timetables
  • Financial data and statistics
  • Any information that would maque sense in a spreadsheet

Do NOT use tables for:

  • Pague layout — use CSS Grid or Flexbox instead
  • Positioning elemens 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.