HTML
Advanced
30 mins
325 points
What you need:

HTML Tables

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.

1 - Introduction

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
5Makalu
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.

2 - Structure of a HTML table

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.

  • The <thead></thead> tags are used to define the header content.
  • The <tbody></tbody> tags are used to define the body content.
  • The <tfoot></tfoot> tags are used to define the footer content.

3 - Table rows

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.

You will notice that when you run the above HTML code that nothing displays. That is because we haven't created any columns or put any content in them yet.

4 - Table columns and cells

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.

Note that in the above example we are also using some CSS code to style the table with a blue border and the cells of the table with a red border. We will be learning about CSS in a later lesson.

5 - Multiple rows

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.

Join our club 😃

To view the remaining 3 steps and access hundreds of other coding projects please login or create an account.

Copyright Notice
This lesson is copyright of . Unauthorised use, copying or distribution is not allowed.
🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more