效果圖：
頁面代碼：
<table id="1233" class="Listing" >
<caption>表格標(biāo)題</caption>
<thead>
<th scope="col">表頭一</th>
<th scope="col">表頭二</th>
<th scope="col">表頭三</th>
<th scope="col">表頭四</th>
<th scope="col">表頭五</th>
</thead>
<tbody id="tbodySample">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>11</td>
<td>21</td>
<td>31</td>
<td>41</td>
<td>51</td>
</tr>
<tr>
<td>12</td>
<td>22</td>
<td>32</td>
<td>42</td>
<td>52</td>
</tr>
<tr>
<td>13</td>
<td>23</td>
<td>33</td>
<td>43</td>
<td>53</td>
</tr>
</tbody>
</table>
CSS代碼：
TABLE.Listing TD {
BORDER-BOTTOM: #e6e6e6 1px solid
}
TABLE.Listing TD {
PADDING-RIGHT: 12px;
PADDING-LEFT: 12px;
PADDING-BOTTOM: 4px;
PADDING-TOP: 4px;
TEXT-ALIGN: left
}
TABLE.Listing TH {
PADDING-RIGHT: 12px;
PADDING-LEFT: 12px;
PADDING-BOTTOM: 4px;
PADDING-TOP: 4px;
TEXT-ALIGN: center
}
TABLE.Listing CAPTION {
PADDING-RIGHT: 12px;
PADDING-LEFT: 12px;
PADDING-BOTTOM: 4px;
PADDING-TOP: 4px;
TEXT-ALIGN: left
}
TABLE.Listing {
MARGIN: 0px 0px 8px;
WIDTH: 92%;
BORDER-BOTTOM: #6b86b3 3px solid
}
TABLE.Listing TR {
BACKGROUND: #f5f5f5;
height:20px;
}
TABLE.Listing caption{
font-weight:bold;
padding:6px 0px;
color:#3d580b;
font-size:20px;
}
TABLE.Listing TH {
FONT-WEIGHT: bold;
background:#ccc url(theadbg.gif) repeat-x left center;
BORDER-BOTTOM: #6b86b3 1px solid
}
TABLE.Listing TD.Header {
FONT-WEIGHT: bold;
BORDER-BOTTOM: #6b86b3 1px solid
BACKGROUND: #ffffff;
}
TABLE.Listing TR.Header TD {
FONT-WEIGHT: bold;
BACKGROUND: #ffffff;
BORDER-BOTTOM: #6b86b3 1px solid
}
TABLE.Listing TR.Alt {
BACKGROUND: #ffffff
}