HTML Tables

Understanding HTML Tables

HTML tables organize related data into rows and columns, making structured information easier to read and compare.

A basic table uses the <table> element as its container, <tr> elements to create rows, and <td> elements to create data cells within those rows.

HTML Table Syntax

A basic HTML table consists of rows containing individual cells. The following example creates three rows with three cells in each row.

<table>
  <tr>
    <td>HTML</td>
    <td>CSS</td>
    <td>JavaScript</td>
  </tr>
  <tr>
    <td>Beginner</td>
    <td>Beginner</td>
    <td>Intermediate</td>
  </tr>
  <tr>
    <td>Markup</td>
    <td>Styles</td>
    <td>Scripting</td>
  </tr>
</table>

Each <tr> creates a table row, while each <td> creates a data cell within that row.

The <table> Element

The <table> element represents data arranged in rows and columns. It acts as the container for the elements that define the table's structure and content.

<table>
  ...
</table>

Additional table elements can provide captions, headers, row groups, column groups, and other structural information. These are covered in the following tutorials.

The <tr> Element

The <tr> element represents a row of cells in a table. The letters tr stand for table row.

<tr>
  <td>HTML</td>
  <td>Markup Language</td>
</tr>

A table normally contains multiple rows, with each row containing the cells that belong across that horizontal part of the table.

The <td> Element

The <td> element represents a data cell within a table row. The letters td stand for table data.

<td>HTML</td>

Data cells can contain text and other HTML content, including links, images, lists, and other elements when appropriate for the table's data.

Rows and Columns

HTML table markup is written one row at a time. The cells within corresponding positions in those rows form the table's visual columns.

<table>
  <tr>
    <td>Alice</td>
    <td>HTML</td>
    <td>Completed</td>
  </tr>
  <tr>
    <td>David</td>
    <td>CSS</td>
    <td>In Progress</td>
  </tr>
</table>

In this example, the first cells form one column, the second cells form another, and the third cells form a third column.

When to Use HTML Tables

Use a table when information has meaningful relationships across rows and columns and readers benefit from comparing the values. Examples include schedules, price comparisons, statistics, specifications, reports, and other tabular data.

If the content does not have a meaningful row-and-column relationship, another HTML structure such as paragraphs, lists, or sections is usually more appropriate.

Tables Are Not for Page Layout

HTML tables should be used to represent tabular data rather than to control the visual layout of a webpage. Using tables to position headers, navigation, sidebars, columns, or other page components gives the markup a meaning that does not match the content.

Modern webpage layouts should be created with CSS. HTML provides the document structure and meaning, while CSS controls how that structure is arranged and presented.

HTML Table Example

The following example creates a simple table containing three rows and three columns. Edit the cell contents, add another row, or add another cell to each row to see how the table changes.

HTML Table Best Practices

• Use tables for information that has meaningful relationships between rows and columns.
• Use <tr> elements to define table rows and appropriate table-cell elements within each row.
• Keep the number and purpose of cells consistent when the data follows a regular table structure.
• Use table headers to identify the meaning of rows or columns rather than relying only on visual formatting.
• Provide a table caption when it helps identify or explain the table.
• Do not use HTML tables simply to position or arrange webpage content.
• Consider accessibility and smaller screens when creating more complex tables.

Summary

HTML tables organize related data into rows and columns. The <table> element contains the table, <tr> defines each row, and <td> defines individual data cells. Tables should be used for genuinely tabular information rather than webpage layout, with additional table elements used to provide headers, captions, grouping, and accessibility as needed.