Learn How to Apply the HTML thead Tag

When building tables for your web page, it is nice to know how to differentiate a table row using the HTML thead tag. This will set the other rows apart allowing you to customize the top row reserved for table headers. 

For this tutorial, you will learn how to set up the code for a basic table structure and also add in the HTML thead tag to have the ability to customize this header area using CSS. Using both CSS (Cascading Style Sheets) functions along with HTML (Hypertext Markup Language)will allow you to create some amazing results for your table presentation. All you need to start with is a simple code editor such as Notepad ++.

Starting a Simple Table Structure

To set up your basic table structure, you will need to start with the basic HTML page. Notice the basic table setup with three columns and three rows.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>HTML Table</h2>

<table>
      <tbody>
        <tr>
            <td>Cell data 1</td>
            <td>Cell data 2</td>
            <td>Cell data 3</td>
        </tr>
        <tr>
            <td>Cell data 4</td>
            <td>Cell data 5</td>
            <td>Cell data 6</td>
        </tr>
        <tr>
            <td>Cell data 7</td>
            <td>Cell data 8</td>
            <td>Cell data 9</td>
        </tr>
    </tbody>
</table>

</body>
</html>

This table will display in your browser as follows:

Outline the Table Cells with a Border

Adding a border to the table and also defining a width for the table will be helpful towards distinguishing it from the rest of the page.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>HTML Table</h2>

<table border="1" width="400px">
      <tbody>
        <tr>
            <td>Cell data 1</td>
            <td>Cell data 2</td>
            <td>Cell data 3</td>
        </tr>
        <tr>
            <td>Cell data 4</td>
            <td>Cell data 5</td>
            <td>Cell data 6</td>
        </tr>
        <tr>
            <td>Cell data 7</td>
            <td>Cell data 8</td>
            <td>Cell data 9</td>
        </tr>
    </tbody>
</table>

</body>
</html>

Now the table looks as follows in your browser:

Adding the HTML thead Tag

Now it is time to add the HTML thead tag. What this will do is define the actual heading of the table.  Remember that when building an HTML page, the availability of HTML tags is almost limitless. There is an entire world of HTML tags waiting to be used to build your perfect website.

It is important to note that as the table heading is defined, the table rows must also have a <th> tag. This will automatically put the text in bold with center alignment. 

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>HTML Table</h2>

<table border="1" width="400px">
     <thead>
        <tr>
            <th>Cell data 1</th>
            <th>Cell data 2</th>
            <th>Cell data 3</th>
        </tr>
     </thead>

      <tbody>
        <tr>
            <td>Cell data 1</td>
            <td>Cell data 2</td>
            <td>Cell data 3</td>
        </tr>
        <tr>
            <td>Cell data 4</td>
            <td>Cell data 5</td>
            <td>Cell data 6</td>
        </tr>
        <tr>
            <td>Cell data 7</td>
            <td>Cell data 8</td>
            <td>Cell data 9</td>
        </tr>
    </tbody>
</table>

</body>
</html>

The table now looks as follows in your browser:

Adding a Footer

You can just as easily add a footer into your table as well.

It is important to note that the header and footer are defined first in the table before the tbody (table body) tag starts the body section of the table itself.

<table border="1" width="400px">
     <thead>
        <tr>
            <th>Cell data 1</th>
            <th>Cell data 2</th>
            <th>Cell data 3</th>
        </tr>
     </thead>
     <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
            <td>Footer 3</td>
        </tr>
     </tfoot>

      <tbody>
        <tr>
            <td>Cell data 1</td>
            <td>Cell data 2</td>
            <td>Cell data 3</td>
        </tr>
        <tr>
            <td>Cell data 4</td>
            <td>Cell data 5</td>
            <td>Cell data 6</td>
        </tr>
        <tr>
            <td>Cell data 7</td>
            <td>Cell data 8</td>
            <td>Cell data 9</td>
        </tr>
    </tbody>
</table>

Notice how this looks in your browser. 

Adding a Splash of Color to the Table

Now that you have:

  • successfully built a table, 
  • added a border, and 
  • have defined both a header and footer,

it is time to add some background color. While you are at it why not change the text color as well.

With the header and footer defined, it is now much easier to add in some color using defined CSS.

Remember that in between the <style> elements in the <head> section of your HTML page is where you will be placing and defining the CSS.

For the thead section, how about adding a yellow background and defining the text color as green.

<!DOCTYPE html>
<html>
<head>

<style>
thead {color:green; background-color:yellow;}
</style></head><body><h2>HTML Table</h2><table border="1" width="400px"> <thead> <tr> <th>Cell data 1</th> <th>Cell data 2</th> <th>Cell data 3</th> </tr> </thead> <tfoot> <tr> <td>Footer 1</td> <td>Footer 2</td> <td>Footer 3</td> </tr> </tfoot> <tbody> <tr> <td>Cell data 1</td> <td>Cell data 2</td> <td>Cell data 3</td> </tr> <tr> <td>Cell data 4</td> <td>Cell data 5</td> <td>Cell data 6</td> </tr> <tr> <td>Cell data 7</td> <td>Cell data 8</td> <td>Cell data 9</td> </tr> </tbody></table></body></html>

You will see the following:

Similarly, you can define the footer as well. How about a blue font color and a gray background.

Simply add in the CSS.

<!DOCTYPE html>
<html>
<head>

<style>
 thead {color:green; background-color:yellow;}

 tfoot {color:blue; background-color:gray;}
</style>
</head><body><h2>HTML Table</h2><table border="1" width="400px"> <thead> <tr> <th>Cell data 1</th> <th>Cell data 2</th> <th>Cell data 3</th> </tr> </thead> <tfoot> <tr> <td>Footer 1</td> <td>Footer 2</td> <td>Footer 3</td> </tr> </tfoot> <tbody> <tr> <td>Cell data 1</td> <td>Cell data 2</td> <td>Cell data 3</td> </tr> <tr> <td>Cell data 4</td> <td>Cell data 5</td> <td>Cell data 6</td> </tr> <tr> <td>Cell data 7</td> <td>Cell data 8</td> <td>Cell data 9</td> </tr> </tbody></table></body></html>

What you will see is the following:

Where to Next?

The “Learn How to Apply the HTML thead Tag” tutorial should provide a starting point for further inquiry into the world of HTML properties for customizing your web layout while always keeping in mind the practical applications with HTML and CSS

Check out “The World of Advanced HTML Tables“ and Designing CSS Borders to enhance your understanding and expand your horizon.

HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!