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:
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.