html tablesWorking 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:

HTML51

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:

<table border=”1″ style=”width:300px”>

The table will then look like this:

HTML55

HTML5 Tables – Adding Headers and Footers

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

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:

HTML53

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.

 

Top courses in HTML

Build Websites from Scratch with HTML & CSS
Brad Hussey, Code College
4.6 (5,447)
Build Responsive Real World Websites with CSS3 v2.0
Kalob Taulien, Kalob.io — Learn web development from scratch
4.6 (937)
The Ultimate HTML Developer 2020 Edition
Kalob Taulien
4.8 (433)
Highest Rated
1 Hour HTML
John Bura
4.4 (706)
Kids Coding - Beginner HTML
John Bura
4.7 (153)

More HTML Courses

HTML students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy for Business.

Request a demo