Html tutorial lesson 11: More Advanced Table Elements and Attributes

[Lesson 10]<<[Contents]>>[Lesson 12]

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>

</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 th element display text in bold and align it in the center. They have to be enclosed within the <tr></tr> tags, like this:

<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>
</tr>
</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, as follows:

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

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

[Lesson 10]<<[Contents]>>[Lesson 12]