Lesson 11: Advanced Table Elements and Attributes

In the last two lessons, we have learned how to create tables. However, there are more advanced features available in HTML for tables. In this chapter, we shall learn a few more new attributes and a more systematic way to construct a table.

First of all, you can use the <caption></caption> element to add a title to the table. Usually we place the <caption></caption> tags after the <table></table> tags, like this:

<table>
<caption><b>Monthly Sales Report</b></caption></span>
</table>

Next we introduce the thead, tbody, tfoot, th elements. The thead element defines the header section of the table. It is used together with the th element. The  th element defines the columns in the header section and it is used to add columns' titles. The tfoot is used to group the foot content of the table. The th element display text in bold and align it in the center. They have to be enclosed within the <tr></tr> tags, as shown in the following example:

Example 11.1

<table border="1" cellspacing="1" width="50%">
<thead>
<caption><b>First Quarter Sales Report</b></caption>
<tr>
<th>Month</th>
<th> Desktop</th>
<th>Laptop</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jan</td>
<td>100</td>
<td>150</td>
<tr>
<td>Feb</td>
<td>80</td>
<td>200</td>
</tr>
</tbody>
<tfoot>
<td>Total</td>
<td>180
<td>350
</tfoot>
</table>

The actual table is shown below:

*Notice that the column titles are centered and in bold face.

The tbody element defines the table body or the main part of the table. The <tbody> open tag and </tbody> end tag are placed after the header section.

Example 11.2

<table border="1" cellspacing="1" width="50%">
<caption><b>First Quarter Sales Report</b></caption>
<tr>
<th>Month</th>
<th> Desktop</th>
<th>Laptop</th>
<tbody>
<tr>
<td>January</td>
<td>1000</td>
<td>2000</td>
</tr>
<tr>
<td>February</td>
<td>1200</td>
<td>1700</td>
</tr>
<tr>
<td>March</td>
<td>1500</td>
<td>1900</td>
</tr>
<tr>
<td>April</td>
<td>2200</td>
<td>2300</td>
</tr>
</tbody>
</table>

The resulting table is displayed below:

Finally, we need to calculate the monthly sales volumes and sum them up by adding another row to the table. We can do this by using the <tfoot></tfoot> tags which define the footer section of the table, as shown below:

Example 11.3

<table border=1 cellspacing=1 width=50%>
<caption><b>First Quarter Sales Report</b></caption>
<tr>
<th>Month</th>
<th> Desktop</th>
<th>Laptop</th>
<tbody>
<tr>
<td>January</td>
<td>1000</td>
<td>2000</td>
</tr>
<tr>
<td>February</td>
<td>1200</td>
<td>1700</td>
</tr>
<tr>
<td>March</td>
<td>1500</td>
<td>1900</td>
</tr>
<tr>
<td>April</td>
<td>2200</td>
<td>2300</td>
</tr>
<tfoot>
<tr>
<th>Total</th>
<th>5900</th>
<th>7900</th>
</tr>
</tfoot>
</tbody>
</table>

The resulting table is displayed below: