Lesson 2: Working with tables CHAPTER 5 235
FIGURE 5-14 he styled tableTAlthough you can have a maximum of one <thead> element and one <tfoot> element,
you can have many <tbody> elements within a <table> element. The benefit of having
multiple <tbody> elements is that you can group rows to apply styles. You can even display
or hide groups of rows by setting the style display property to none (to hide) or by clearing
the display property (to show). The following example extends the previous example by using
multiple <tbody> elements, adding one for Antique Cars and one for Non-Antique Cars.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vehicles</title>
<link href="Content/vehicles.css" rel="stylesheet" />
<script src="Scripts/vehicles.js"></script>
</head>
<body>
<div role="main">
<button id="showAntique">Antique Cars</button>
<button id="showNonAntique">Non-Antique Cars</button>
<table>
<thead>
<tr>
<th>Vehicle #</th>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Price</th>
</tr>
</thead>
<tbody id="antiqueCars">
<tr>
<th>1</th>
<td>1957</td>
<td>Ford</td>
<td>Thunderbird</td>
<td>14,000</td>
</tr>
<tr>
<th>2</th>
<td>1958</td>