Table Heads

The tables we have made so far in our previous examples don’t look much. They’re look bland and lack structure. To make our tables look the part, we’ll make use of table heads and bodies. In an HTML document, the head tag contains information on what the webpage is all about, while the body tag contains all the contents of the website or webpage.

In the same way, the table head contains information about the table and the table body houses the actual tabular data or information. Since we dealt with tabular data in our previous examples, let’s go ahead and put them in between opening and closing table body tags. Then, let’s go ahead and create a table head tag for our table. Look at the example below:

1<!DOCTYPE html>

2<html>

3<head>

4<title>Tables in HTML</title>

5</head>

6<body>

7<table border=”1px””>

8<thead>

9<tr>

10<th>Bike Type</th>

11<th>Price</th>

12</tr>

13</thead>

14<tbody>

15<tr>

16<td>Trek Madone</td>

17<td>MSRP $3,400</td>

18</tr>

19<tr>

20<td>Pinarello Dogma F8</td>

21<td>MSRP $4,499</td>

22<tr>

23</tbody>

</table>

24</body>

25</html>

As you can see from in our code, our table now has a heading. This gives it a more refined and professional look. Notice we’ve nested both the <thead> tag and the <tbody> tag within in the <table> tag.

In order to put a cell where the table data for our heading will be placed, we must first claim a row for it. You can clearly see that we’ve put a row for our heading in lines 9 and 12 of our sample code. Now that our heading has its own designated row, we can now put cells or table data within them. We do this be nesting table heading tags <th> within the table rows of our table head: