Loading

Tables


There are times when we wish to display data that is sorted into columns and rows. This is called tabular data and HTML has a <table> tag and sub elements for organizing such data. For example, a vegetable comparison table might consist of vegetable names and their corresponding color or nutritional value. Lets construct a simple table.

To begin, we open the <table> tag:

<table>

Immediately after <table> tag, we can include a <caption> tag to quickly inform the reader the intent of the table.

<caption>A table of vegetable colors.</caption>

Tables consist of rows and columns. The table row <tr> tag is used to seperate table rows, while table data <td> fits within each row.

Also note, the first row of this table will be reserved for table headers <th>. Headers let a reader know what each column, or row, of a table represents.

<tr>

  <th>Name of Vegetable</th>

  <th>Color</th>

</tr>

Additional table rows <tr> and table data <td> will follow the same format as the table headers <th>, i.e. they will be typed in the same order.

<tr>

  <td>Carrot</td>

  <td>Orange</td>

</tr>

<tr>

  <td>Asparagus</td>

  <td>Green</td>

</tr>

Lastly, we will close the table tag.

</table>

External Resources

Hackbook: Tables

Task Discussion