Build: The Table Element

Step 1

Declare the Table

We declare a table using the <table>...</table> element. All the content of that table lives within those tags.

HTML
<table>

</table>
The beginnings of a 3x2 table.
Step 2

Add Rows

The table rows are created using the <tr>...</tr> element. Inside of a table row lives the individual cells (equal to the number of columns), each referenced using a set of <td> tags.

HTML
<table>
  <tr>
    <!-- Row 1 -->
  </tr>

  <tr>
    <!-- Row 2 -->
  </tr>

  <tr>
    <!-- Row 3 -->
  </tr>
</table>
This table has 3 rows made with sets of <tr> tags.
Step 3

Add Data

The table data is contained in cells, which is represented using a <td>...</td> element.

HTML
<table>
  <tr>
    <!-- Row 1 -->
    <td></td>
    <td></td>
  </tr>

  <tr>
    <!-- Row 2 -->
    <td></td>
    <td></td>
  </tr>

  <tr>
    <!-- Row 3 -->
    <td></td>
    <td></td>
  </tr>
</table>
This table has 2 colums and 3 rows, so we need 4 cells made with <td> elements.
Step 4

Add Headings

The table data is contained in cells, which is represented using a <td>...</td> element.

HTML
<table>
  <tr>
    <!-- Row 1 -->
    <th></th>
    <th scope="col">Column A</th>
  </tr>

  <tr>
    <!-- Row 2 -->
    <th scope="row">Row 1</th>
    <td>Cell A1</td>
  </tr>

  <tr>
    <!-- Row 3 -->
    <th scope="row">Row 2</th>
    <td>Cell A2</td>
  </tr>
</table>
This table has 2 colums, so we need 4 cells made with <td> elements.
Preview

Preview

A full table element is a combination of columns and rows (both delineated by headings), and cells:

Preview
Column A
Row 1 Cell A1
Row 2 Cell A2

html element table