You define a table using the table tag:

<table>

</table>

Inside the table we define the data. We reason in terms of rows, which means we add rows into a table (not columns). We’ll define columns inside a row.

Rows

A row is added using the tr tag (table row), and that’s the only thing we can add directly into a table element:

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

This is a table with 3 rows.

The first row can take the role of the header.

Column Headers

The table header contains the name of a column, typically displayed in a bold font.

Think about an Excel or Google Sheets document with the top row containing column names.

We define the header using the th tag (table header):

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr></tr>
  <tr></tr>
</table>

Table Content

The content of the table is defined using td tags (table data), inside the other tr elements:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Row 1 Column 1</td>
    <td>Row 1 Column 2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td>Row 2 Column 1</td>
    <td>Row 2 Column 2</td>
    <td>Row 2 Column 3</td>
  </tr>
</table>

Without any CSS styling, browsers render tables with minimal styling. Adding some basic CSS makes them more readable:

th, td {
  padding: 10px;
  border: 1px solid #333;
}

Lessons in this unit:

0:	Introduction
1:	▶︎ How to Create HTML Tables
2:	How to Span Rows and Columns in HTML Tables
3:	Using thead, tbody, and tfoot in HTML Tables