Learn how to create tables in HTML.
Tables are commonly used to organize and display information on web pages. Tables display information in a grid. In this tutorial, we’ll learn about the structure of a table and how to add them to our web pages using HTML.
Table Structure
There are a few things about the structure of a table that we’ll want to learn first. Tables are formed using rows which are horizontal and columns which are vertical. Each box in the table is sometimes known as a cell.
HTML Tables
HTML tables are created and formated by defining the rows of a table. There is a header row which typically contains the titles of each column and the data rows which hold the remaining cells of the table.
HTML Table Tags
There are four tags that you will need to use to create a table using HTML.
<table>
- container for all table data
<tr>
- container for a single row
<th>
- single table header element
<td>
- single table data element
Let’s start building our table! First, we’ll use the table tag to enclose the whole table. Tables are easier to see and use when there is a border. The default HTML table does not have a visible border, so we are going to add an attribute, or a characteristic, to the opening table tag as shown.
Now, the table won’t actually display anything unless there is a row and either a header or a data element. Indentation is very important in creating a table to avoid getting lost in all the tags and in remembering to include closing tags with each opening tag. Can you match all of the opening tags with their corresponding closing tags in this code snippet?
Take a look at the example below. Play around and change the border weight. See if you can add a row. What happens if you change the <th>
tags to <td>
tags? Click on RUN after each change to see its effect.
You Try!
It’s not much of a table with just one row, right? Now that we are better at keeping track of opening and closing tags, let’s add in another row using an additional <tr>
tag and two <td>
tags. Your job is to add in 3 more rows to complete this table. If you’re up for a challenge, see if you can add in another column that lists meals for a snack between lunch and dinner. Can you also figure out how to make the days of the week bolded?
Create!
Now, it’s your turn to create a table from scratch. Don’t forget to include all necessary closing tags, use good indentation, and refer back to the instructions and examples above if needed.
Your Task: Create an HTML table that displays information about your family tree. Your family tree can consist of relatives, friends, pets, or anyone that you’d like to include. You should include at least 5 rows and use at least 5 header elements. Consider the following options and ideas for your header elements:
Congratulations on learning how to create and format tables using HTML!