|
|
<table>標簽中比較少見的屬性和子標簽：
summary 屬性：用于概括整個表格的內容。它對于搜索引擎的機器人記錄信息十分重要。
bordercolor 屬性：用來設置表格邊框的顏色。但它在不同的瀏覽器下顯示的效果不一致。（不推薦使用bordercolor 屬性，而推薦使用CSS 樣式表的border 屬性來進行設置）
cellspacing 屬性：用來設置表格的單元格之間的間距。（推薦使用CSS 樣式表的border-collapse 屬性來進行設置）
<caption> 標記：表示表格的大標題，該標記可以出現在<table> 之間的任意位置。它對于搜索引擎的機器人記錄信息十分重要。
<th> 標記：用于表示表格的行或者列的名稱。
<th> 標記的scope 屬性：專門用來區分行名稱和列名稱。如：<th scope='row'> 或 <th scope='col'>
<table>里還包含：<thead> 、<tbody> 、<tfoot> 標記。它們分別表示表格的表頭，表正文，表腳。在打印網頁內容的時候，如果表格很大，一頁打印不完，<thead>和<tfoot>將在每一頁出現。（注意：在IE 中無效，但在 Firefox 有效）
經典的表格代碼如下：
<html>
<head>
<title>財政報表</title>
<style type="text/css">
<!--
.datalist{
border:1px solid #429fff; /* 表格邊框 */
font-family:Arial;
border-collapse:collapse; /* 邊框重疊 */
}
.datalist tr:hover{
background-color:#c4e4ff; /* 動態變色,IE6下無效！*/
}
.datalist caption{
padding-top:3px;
padding-bottom:2px;
font:bold 1.1em;
background-color:#f0f7ff;
border:1px solid #429fff; /* 表格標題邊框 */
}
.datalist th{
border:1px solid #429fff; /* 行、列名稱邊框 */
background-color:#d2e8ff;
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
text-align:center;
}
.datalist td{
border:1px solid #429fff; /* 單元格邊框 */
text-align:right;
padding:4px;
}
-->
</style>
</head>
<body>
<table class="datalist" summary="財政報表">
<caption>財政報表 2005 - 2008</caption>
<thead>
<tr>
<th> </th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
<th scope="col">2008</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">撥款</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>
<tr>
<th scope="row">捐款</th>
<td>4,780</td>
<td>4,989</td>
<td>6,700</td>
<td>6,590</td>
</tr>
<tr>
<th scope="row">投資</th>
<td>8,000</td>
<td>8,100</td>
<td>8,760</td>
<td>8,490</td>
</tr>
<tr>
<th scope="row">募捐</th>
<td>3,200</td>
<td>3,120</td>
<td>3,700</td>
<td>4,210</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">2008 年統計</td>
</tr>
</tfoot>
</table>
</body>
</html>
it知識庫：Html中表格Table的相關知識，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
