This tutorial explains 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.

The example table created in the video will look like the one below. We will look at how to apply styles to a table later on but in this tutorial we will focus on creating the headings and adding rows of data.

Screen Shot 2020-04-29 at 12.20.10 pm

Tables can be used for a range of purposes such as displaying scores for teams on a sports website. 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 – this creates a heading for a column
  • tr – this creates a row in the table
  • td – 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 headings 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.

Here is the HTML code:

        <link rel="stylesheet" href="theme.css" type="text/css"/>

            <caption>Top Selling Games - March 2020</caption>

                <td>Animal Crossing: New Horizons</td>

                <td>Call of Duty: Modern Warfare</td>
                <td>Activision Blizzard</td>

                <td>MLB: The Show 20</td>

                <td>Resident Evil</td>
                <td>Capcom USA</td>

                <td>NBA 2K20</td>
                <td>Take 2 Interactive</td>

Here is the CSS code used to improve the appearance of the table (add a border, padding, etc.):

    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;

    border: 1px solid black;
    padding: 5px;