Creating a Table

To create a table in HTML, use the table element to define the container, then add rows using the tr tag and cells inside those rows using the td tag.

Tables are the perfect way to display tabular data, such as schedules, statistics, or pricing information. They arrange data into a grid of rows and columns.

The Basic Table Structure

An HTML table is built row by row. Each row must be completely defined before moving on to the next one. Here is the breakdown of the three essential tags:

<table>: Opens and closes the entire table.
<tr> (Table Row): Defines a single horizontal row within the table.
<td> (Table Data): Defines a single cell (or column) within a row.

Full Working Example

By default, HTML tables don't have borders. In the following example, we've used a little bit of CSS so you can clearly see the grid structure of the rows and columns:

View Output Full Screen Preview

You can also add a header row to your table using th tags instead of td tags. HTML also supports caption tags that allow you to add a caption to your table. See How to Add Table Headers and Captions for more information.

Tip: Using Tables for Layout

In the early days of the web, tables were often used to create the layout of an entire webpage. This is now considered bad practice. Tables should only be used to display strictly tabular data. For page layouts, use CSS technologies like Flexbox or Grid.