In the last two chapters, we have learned how to create tables. However, there are more advanced features available in table. In this chapter, we shall learn a few more new tags and a more systematic way to construct a table.
First of all, you can use the <caption></caption> tags 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></thead>, <tbody></tbody>, <tfoot></tfoot> and <th></th> tags. <thead></thead>tags define the header section of the table. It is used together with the <th></th> tags. <th></th> tags define the columns in the header section and they are used to add columns' titles. <th></th> tags display text in bold and align it in the center. They have to be enclosed within the <tr></tr> tags, like this:
|
The actual table is shown below:
| Month | Desktop | Laptop |
|---|
*Notice that the column titles are centered and in bold face.
The <tbody</tbody> tags define the table body or the main part of the table. They 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:
| Month | Desktop | Laptop |
|---|---|---|
| January | 1000 | 2000 |
| February | 1200 | 1700 |
| March | 1500 | 1900 |
| April | 2200 | 2300 |
| Total | 5900 | 7900 |
© 2010-2011 htmltutor.org All Rights Reserved [Privacy Policy]