HTML Introduction

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