236 CHAPTER 5 More HTML5
<td>Chevrolet</td>
<td>Impala</td>
<td>3,000</td>
</tr>
</tbody>
<tbody id="nonAntiqueCars">
<tr>
<th>3</th>
<td>2012</td>
<td>BMW</td>
<td>Z4</td>
<td>40,000</td>
</tr>
<tr>
<th>4</th>
<td>2003</td>
<td>Madza</td>
<td>Miata</td>
<td>5,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total:</th>
<th></th>
<th></th>
<th></th>
<th>62,000</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html><script>
init();
</script>
This example shows the complete HTML document, so you can see the inclusion of the CSS
file and JavaScript file. The HTML has been extended to include two buttons at the top so you
can filter by Antique Cars or Non-Antique Cars. There are two <tbody> elements, each having
an explicit id of antiqueCars and nonAntiqueCars, respectively, and a <script> element at the
bottom that initializes the JavaScript, which will attach event handlers to the click event of the
buttons. The CSS file is slightly modified from the previous example as follows.
thead th {
background-color: #BDEAFF;
width: 100px;
}tbody th {
background-color: #FFFF99;