Tables are a useful way to arrange and display information in rows and columns. This lesson goes through how we can code them in HTML.
Tables are used to arrange and display information into rows and columns. The following table shows the 5 highest mountains in the world. It has 3 columns (Rank, Mountain and Height) and a row for each mountain.
Rank | Mountain | Height (Metres) |
---|---|---|
1 | Mount Everest | 8,848 |
2 | K2 | 8,611 |
3 | Kangchenjunga | 8,586 |
4 | Lhotse | 8,516 |
5 | Makalu | 8,485 |
This tables lists the top 5 highest mountains in the world. |
In the above table the first row is displayed differently and is the header row of the table. The other rows are the body of the table and the last row is the footer row of the table. Sometimes you might not want a header row or footer row in your table and you would just code the body content.
To create tables in HTML we use the <table></table>
element. The <table>
tag defines where the HTML code of the table starts and the </table>
tag defines where the HTML code of the table ends.
Then inside the <table></table>
tags you define the header, body and footer content of the table.
<thead></thead>
tags are used to define the header content.<tbody></tbody>
tags are used to define the body content.<tfoot></tfoot>
tags are used to define the footer content.Table rows can be put inside the header (<thead></thead>
), body (<tbody></tbody>
) or footer (<tfoot></tfoot>
) tags. To create a row we use the <tr></tr>
tags.
The following code creates a table with 3 rows in the body part of the table.
To create columns we need to specify the cells of a row. To create a cell we use the <td></td>
tags and these go inside the <tr></tr>
tags. So for example if we want to put three cells into the first row of a table we would use the following code.
To put multiple rows in the table we just need to put in more <tr></tr>
tags with the cell <td></td>
tags inside them. The following code creates a table with 4 rows and 3 columns.