Using tables gives you the flexibility of detailing and organizing specific areas of content for your viewer. Creating advanced tables uses both HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). Use HTML as your foundation code to work elegantly with CSS to enhance your web page with creative design aspects.
In this tutorial, we will explore how to create advanced tables: understand the essential tags, add some more advanced tags, and further define your ability to control content. Additionally, we will show you how to add some creative background colors to individual cells. All you need to start with is a simple code editor, such as Notepad ++, that is free.
The Essentials of a Table
Let’s look at the simple HTML tags that are initially used to create a table.
| <table> tag | Defines an HTML table. |
| <tr> tag | Defines the table row. |
| <th> tag | Defines the table header. By default, the text in <th> elements are bold and centered. |
| <td> tag | Defines each table cell. By default, the text in <td> elements are regular (not bold) and left-aligned. |
The HTML code for a simple table will look like the following:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Column 1 heading</th>
<th>Column 2 heading</th>
<th>Column 3 heading</th>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
</table>
</body>
</html>
The output on your web page is this:
Using Advanced HTML Table Tags
The following displays the three tags that give a better-defined table.
| <thead> | Used to group header content in an HTML table as seen in the top of each column. |
| <tbody> | Used to group body content in an HTML table. |
| <tfoot> | Used to group footer content in an HTML table as seen in the bottom row of the table. |
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>The advanced table elements: thead, tbody, and tfoot</h2>
<table>
<thead>
<tr>
<th>Column 1 Heading</th>
<th>Column 2 Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</tfoot>
</table>
</body>
</html>
From this HTML the following is displayed in the browser:
Add a Border Using CSS
The table now has a more refined appearance on the HTML page..
Now that the table has proper heading and data tags, you can move to applying a border for added definition.
Simply add the CSS in the <style> area to your existing HTML.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid orange;
}
</style>
</head>
The result is as follows:
Define thead, tbody, and tfooter with CSS
As defined above, having the appropriate tags within the HTML allows for greater control now that you have the power of CSS in your hands.
Building on what you accomplished above, outlining the table using CSS, now you can do the same with the advanced table tags.
Define the advanced HTML tags within your <style> area in your HTML so that they become CSS references.
Choose any color and see what happens.
- thead {color:cyan;}
- tbody {color:chocolate;}
- tfoot {color:DarkSlateBlue;}
Add this into your CSS code as follows:
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid orange;
}
</style>
</head>
<body>
<h2>The advanced table elements: thead, tbody, and tfoot</h2>
<table>
<thead>
<tr>
<th>Column 1 Heading</th>
<th>Column 2 Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</tfoot>
</table>
</body>
</html>
The result is as follows:
Add a Table Column Span (td colspan)
Another nice feature is being able to combine cells from one column to the next. This is referred to as Column Span or td column span because of the action taken to combine table cells. As you remember from above, the <td> tag represents the table cell. You will use the colspan tag to create this feature. Notice in the following code that the third table cell has been removed since the objective is to combine two cells.
Use the following code:
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid orange;
}
</style>
</head>
<body>
<h2>The advanced table elements: thead, tbody, and tfoot</h2>
<table>
<thead>
<tr>
<th>Column 1 Heading</th>
<th>Column 2 Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td colspan="2">Row 2, cell 2 column span</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</tfoot>
</table>
</body>
</html>
The output on your web page looks like this. Notice the table cells combined into one.
Final Note
Hopefully with this knowledge of the Advanced HTML Tables you will be able to apply these tags effectively and correctly for their respective settings. Being able to understand the correct application comes from knowing why the application exists in the first place. Use these CSS Styles in association with the HTML tags to enhance your table web text and give your viewer an enhanced experience.
Where to Next?
This “The World of CSS Font Styles “tutorial should provide a starting point for further inquiry into website design, layout, and practical applications with HTML and CSS.
Continue to explore other areas of design. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.
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!
