HTML5 Table Tutorial - Create Amazing Tables in HTML5

Udemy Editor

Working with tables in HTML5 has become more powerful due to the new HTML5 table tags and other elements available in HTML5. This tutorial will show you how to create and format your own tables using HTML5 table tags and elements. If you need to get your HTML5 skills up to speed in a hurry, check out the acclaimed HTML5 Beginners Crash Course and join thousands of students who are learning to harness the power of the new HTML5 tags. This course contains 46 lectures designed to turn beginners into competent web developers. The lessons start with HTML for newcomers, and the lessons will teach you all the tags and HTML elements you need to know to create your own HTML5 webpages. The course also covers how to use the HTML canvas and drawing elements. There are also lectures on geolocation, local storage and forms and will also includes lessons on how to add audio and video to your webpages. Let’s move on to table creation.

HTML5 Tables

Tables are not new to HTML but there are a few new tags available in HTML5. To define a table in HTML you need to use the <table> tag. Tables are divided into rows using the <tr> tag. To define the cells in the table you need to use the <td> tag.

Tables can contain column elements, row elements, headers, footers and other elements. This tutorial will show you how to use the various table tags to define these elements and how to format the elements using style sheet options.

HTML5 Table Creation

Here is the code necessary to create your table:

<table style="width:300px"><tr><td>Jack</td><td>Sales</td><td>555-5555</td></tr><tr><td>John</td>
<td>Admin</td>
<td>555-5555</td>
</tr>
<tr>
<td>James</td>
<td>Sales</td>
<td>555-5555</td>
</tr>
</table>

The table will be displayed as follows:

Note that HTML defaults to no borders unless you specify a border for the table. To specify borders for your table, you need to add the border element to your table tag:

The table will then look like this:

HTML5 Tables – Adding Headers and Footers

You can use the following tabs to create and format the headers and footers for your table:

<th> – used to denote a table header cell – th stands for table header
<thead> – This element tag can be used to group content as the header of a table for formatting purposes
The <tbody> tag can be used to group table content to format it as the body of the table
<tfoot> – set to group footer information for your table for formatting purposes.

Cells formatted using the <th> tag will be centered and the text will be bold. Table elements defined using the body tag <td> will be left aligned and the text will be normal.

All HTML5 attributes can be used to format the table using the <thead>, <tbody> and <tfoot> tags. In this tutorial, we will use the color attribute to format the various elements of the table in different colors. We will set the header as green, the body as blue and the footer as red for this tutorial.

Take a look at the following code:

<!DOCTYPE html><html><head><style>thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table,th,td
{border:1px solid black;}
</style>
</head>
<body>
<table border="1" style="width:300px">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Telephone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jack</td>
<td>Sales</td>
<td>555-5555</td>
</tr>
<tr>
<td>John</td>
<td>Admin</td>
<td>555-5555</td>
</tr>
<tr>
<td>James</td>
<td>Sales</td>
<td>555-5555</td>
</tr>
<tbody>
<tfoot>
<tr>
<td>Total</td>
<td>Total</td>
<td>Total</td>
</tr>
</tfoot>
</table>
</body>
</html>

The table will look like this on your page:

Note that the Name, Surname and Telephone cells are all center aligned and bold because of the use of the <th> tag.

If you would like to learn more about HTML5 tags, try enrolling in the HTML5 Fundamentals course. This course offers 43 lessons that include all of the HTML fundamentals you need to know to create your own webpages. You will learn to work with text elements and how to format any text elements. The course will teach you how to create lists and links using HTML5. You will learn to work with tables and images and you will learn website basics to ensure your websites work on various browsers.

HTML5 Tables – Formatting Columns

The column group tag allows you to specify formatting to columns within your table. If you want to add specific formatting to columns in your table then you can specify the elements and formats using the <colgroup> tag.

The <colgroup> tag must appear within the table it is being used to format. The span element within the <colgroup> tag can be used to span multiple columns. If no span element is defined, the formatting will be applied to a single column. All HTML formatting attributes can be used for formatting purposes. For our table we will use the background color attribute to format background color of the various columns.

Take a look at the code below:

<!DOCTYPE html><html><head><style>thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table,th,td
{border:1px solid black;}
</style>
</head>
<body>
<table border="1" style="width:300px">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Telephone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jack</td>
<td>Sales</td>
<td>555-5555</td>
</tr>
<tr>
<td>John</td>
<td>Admin</td>
<td>555-5555</td>
</tr>
<tr>
<td>James</td>
<td>Sales</td>
<td>555-5555</td>
</tr>
<tbody>
<tfoot>
<tr>
<td>Total</td>
<td>Total</td>
<td>Total</td>
</tr>
</tfoot>
</table>
</body>
</html>

This is what the table will look like:

HTML54

HTML5 Tables are Easy

Tables are often a great way to present your data. The HTML5 tags make table creation and formatting really simple.

If you are eager to learn how to take advantage of the new HTML5 tags, then sign up to Learn HTML 5 today. This course offers 44 lectures that will teach you all about the HTML building blocks needed to create a page in HTML5. You will learn about the commonly used HTML tags and how to use them in your development. The course will teach you how to create forms and use the form tags. You will learn how to style HTML. Once you are familiar with HTML basics, the course will teach you about advanced HTML concepts like scripting and handling events. The course will help you create responsive, interactive websites using HTML5.