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

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 Introduction
2 Structure of a HTML table
3 Table rows
4 Table columns and cells
5 Multiple rows
6 Code a table
7 Add the first body row
8 Add more body rows
Quiz

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

👇 Mark your steps as done as you complete them.

done | 30 points

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.

<table>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

👇 Mark your steps as done as you complete them.

done | 30 points

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.

<table>
    <tbody>
        <tr></tr>
        <tr></tr>
        <tr></tr>
    </tbody>
</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.

done | 30 points

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.

<table>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
        </tr>
    </tbody>
</table>

table{
    border: solid 1px blue;
}

td {
    border: solid 1px red;
	width: 100px;
}

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.

done | 30 points

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.

<table>
    <tbody>
        <tr>
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
        </tr>
        <tr>
            <td>A2</td>
            <td>B2</td>
            <td>C2</td>
        </tr>
        <tr>
            <td>A3</td>
            <td>B3</td>
            <td>C3</td>
        </tr>
        <tr>
            <td>A4</td>
            <td>B4</td>
            <td>C4</td>
        </tr>
    </tbody>
</table>

table{
    border: solid 1px blue;
}

td {
    border: solid 1px red;
	width: 100px;
}

done | 30 points

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.

Get started

Copyright Notice
This lesson is copyright of DigitalSkills.org. Unauthorised use, copying or distribution is not allowed.

HTML Tables

Live Class Feed

1 - Introduction

2 - Structure of a HTML table

3 - Table rows

4 - Table columns and cells

5 - Multiple rows

Unlock the Full Learning Experience

Learning Points