HTML
Beginner
30 mins
Teacher/Student led
325 points
What you need:
Chromebook/Laptop/PC or iPad/Tablet

HTML Tables

In this step-by-step lesson, you'll learn how to create HTML tables. Starting with an introduction to tables, you'll understand their structure and how to code them. You'll then move on to creating rows, columns, and cells, and adding multiple rows. Finally, you'll get hands-on experience by coding your own table, adding a header, body, and multiple rows.
Learning Goals Learning Outcomes Teacher Notes

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    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.

    Unlock the Full Learning Experience

    Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

    Copyright Notice
    This lesson is copyright of Coding Ireland. 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