WebCodeFun

Beginner's HTML Course

How to create a <table> element in HTML

In this tutorial, we will create a table for our pizza sauce ingredients. We could write these out in a paragraph, but that wouldn’t provide a good user experience for our visitors. We could use a list, but we’ll explore lists in the next part of the course for adding other information to our page.

So, for our ingredients, we will take the opportunity to learn how to create a table.

YouTube Video

Written Guide

Contents

Create a <section> element

We will start by creating a section element to contain our table. Like the header element we made earlier in the course for our introduction content, the section element enables us to organise our document into logical pieces. An essential part of coding is to organise our code so that it is easy to read and understand.

We will add a comment to our HTML to note that it is our ingredients section. We don’t necessarily need to do this either, but again, it is good to practise.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <section>
<!--INGREDIENTS TABLE-->
</section>
</body>
</html>

Good organisation will save us, and anyone else who works on our code, lots of time in the future. Using elements such as the section element doesn’t necessarily change how visitors view our web page. But it does aid us as developers when working on the code.

Add a <h2> heading

Let’s introduce our ingredients table with a heading. We have already learned how to do this earlier in the course. We have a main h1 heading, and as this is a sub-heading, we will use an h2 element.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <section>
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2>
</section>
</body>
</html>

Underneath this, we will place our table.

Create the table structure

We will create a table with two columns, one for our ingredients and one for the quantities we require. To begin, we open our table using the table tags.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <section>
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2> <table> </table>
</section>
</body>
</html>

We will use the table head and the table body elements to provide structure to our table. Like the section element, these elements are not strictly necessary, but they help organise our table. We can also use them for styling later on.

Add table headings

We use the table head element for our headings. We create our table head element using the <thead> tag, where the T stands for the table.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <section>
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2> <table>
<thead> </thead>
</table>
</section>
</body>
</html>

Inside the table head, we will add our two column headings. These will sit in our first row. We wrap each row in the <tr> tags. T for the table, R for the row. Once we have created our row, the number of columns will keep going as long as we continue to add cells to the row. We can add cells using either the <th> element for headings or the <td> element for data.

We use the <th> tags to enclose content that we want to be a heading. T for the table, H for heading. Our headings are ingredients and quantity.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <section>
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2> <table>
<thead>
<tr>
<th>Ingredient</th> <th>Quantity</th>
</tr>
</thead>
</table>
</section>
</body>
</html>

That is our table head section complete. If you refresh the page in your browser, you will see the table’s first two columns, and the two heading cells we have added are in the first row. As they are headings, the browser has automatically increased the font-weight to make the text bold.

Notice that there is no border to define our table? In the CSS course, we will provide more styling and add a border to the table. As we are focusing on HTML in this course, this will do for now. Once we have added the data, the table will take on more shape, and it will be easier to see the structure.

Add table data

We will now add the body of the table using the <tbody> tags.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <section>
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2> <table>
<thead>
<tr>
<th>Ingredient</th> <th>Quantity</th>
</tr>
</thead> <tbody> </tbody>
</table>
</section>
</body>
</html>

Inside the body, we will create each row, again, using the <tr> tags. Each cell, or table data content, is wrapped in the <td> tags. T for the table, D for the data. In each row, we will add an ingredient and the quantity. Each ingredient and quantity added follows the same pattern. There is a row and two columns of data added to that row. Each time we start a new row with the <tr> tags, we add a new row to our table.

Whilst we are adding text and numbers to our table, you can add anything you like. You could place an image inside the <td> element, for example, or a list.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <section>
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2> <table>
<thead>
<tr>
<th>Ingredient</th> <th>Quantity</th>
</tr>
</thead> <tbody>
<tr>
<td>Extra virgin olive oil</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Red onion</td> <td>1, chopped finely</td>
</tr> <tr>
<td>Granulated sugar</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Tinned tomatoes</td> <td>1 can</td>
</tr> <tr>
<td>Tomato puree</td> <td>2 tablespoons</td>
</tr> <tr>
<td>Sea salt</td> <td>Large pinch</td>
</tr> <tr>
<td>Garlic</td> <td>1 teaspoon, crushed or finely chopped</td>
</tr> <tr>
<td>Oregano</td> <td>1/2 teaspoon</td>
</tr> <tr>
<td>Black pepper</td> <td>1 pinch</td>
</tr> <tr>
<td>Cayenne pepper</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Basil</td> <td>1/2 teaspoon</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>

If we go to the browser and hit refresh, we can see our table. It has two headings and a list of ingredients and quantities underneath. It isn’t pretty to look at, but we will improve the styling when we get to our CSS beginner’s course.

Useful resources

Need help?

OK, that’s our table added with our ingredients and the quantities. We have learned to use the table head and table body elements to organise our code. We have created rows using the <tr> tags and added data, either with the <th> tags for headings or the <td> tags for cell data.

In the following tutorial of this beginner’s HTML course, we will add lists to our web page and discuss nesting elements. If anything is unclear, please do get in touch by contacting me. Thanks for reading.

Back to top