In this lesson, you will learn how to create a table in HTML and populate the table rows and columns with data. Tables can be used to organise and display a range of information (but should not be used for creating a web page layout – you should use divs or other tags for web page layouts).

We will look at how to apply styles to a table later on but in this lesson we will focus on how to setup a table, create headings, and add rows of data.

Tables can be used for a range of purposes such as displaying scores for teams on a sports website, displaying product details, a list of people and their details, etc. They can also be used to display results from a database query. Make sure that when adding a table, you apply some CSS code to give it an effective theme which fits in with the rest of the webpage as the default table style is pretty plain and boring. You might even like to completely remove the border or just use a very light border or background colours on different rows or columns.

The main HTML tags used to create a table are:

• <table> – this actually holds the whole table. Your rows and table data should be inside the table tags.

• <caption> – this is optional and is used to add a caption to a table

• <th> – (table header) this creates a header cell for a column. Text in a header cell here is bold and centred by default.

• <tr> – (table row) this creates a row in the table

• <td> – (table data) this adds a cell of data to a table row

The number of <td> tags used in a row should generally match the number of columns in the table so that you don’t have any columns out of place.

Watch the video below and then scroll down the page to see the sample code.