表格其實就是很多的小單元格，而這些小單元格很有次序的排列著，它們有很多行，很多列。這些由行列組成的布局，就叫表格，表格是 table 標簽來定義的。 html 表格示例:
html 表格表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。 HTML 表格和邊框?qū)傩?/h2>如果不定義邊框?qū)傩裕砀駥⒉伙@示邊框。有時這很有用，但是大多數(shù)時候，我們希望顯示邊框。 使用邊框?qū)傩詠盹@示一個帶有邊框的表格： <table border="1"> <tr> <td>行 1, 列 1</td> <td>行 1, 列 2</td> </tr> </table> HTML 表格表頭表格的表頭使用 <th> 標簽進行定義。 大多數(shù)瀏覽器會把表頭顯示為粗體居中的文本： <table border="1"> <tr> <th>表頭一</th> <th>表頭二</th> </tr> <tr> <td>行 1, 列 2</td> </tr> <tr> <td>行 2, 列 1</td> <td>行 2, 列 2</td> </tr> </table> HTML 表格標簽<table> 定義 HTML 表格 <thead> 標簽定義表格的表頭 <tbody> 標簽表格主體（正文） <tfoot> 標簽定義表格的頁腳（腳注或表注） <tr> 元素定義表格行 <th> 元素定義表頭 <td> 元素定義表格單元 <caption> 元素定義表格標題，必須緊隨 table 標簽之后。只能對每個表格定義一個標題，默認居中與表格之上 <col> 標簽為表格中一個或多個列定義屬性值。 <colgroup> 標簽用于對表格中的列進行組合，以便對其進行格式化。 <table>標簽中比較少見的屬性和子標簽：summary 屬性：用于概括整個表格的內(nèi)容。它對于搜索引擎的機器人記錄信息十分重要。 bordercolor 屬性：用來設置表格邊框的顏色。但它在不同的瀏覽器下顯示的效果不一致。（不推薦使用bordercolor 屬性，而推薦使用css 樣式表的border 屬性來進行設置） cellspacing 屬性：用來設置表格的單元格之間的間距。（推薦使用css 樣式表的border-collapse 屬性來進行設置） <caption> 標記：表示表格的大標題，該標記可以出現(xiàn)在<table> 之間的任意位置。它對于搜索引擎的機器人記錄信息十分重要。 <th> 標記：用于表示表格的行或者列的名稱。 <th> 標記的scope 屬性：專門用來區(qū)分行名稱和列名稱。如：<th scope='row'> 或 <th scope='col'> <table>里還包含：<thead> 、<tbody> 、<tfoot> 標記。它們分別表示表格的表頭，表正文，表腳。 在打印網(wǎng)頁內(nèi)容的時候，如果表格很大，一頁打印不完，<thead>和<tfoot>將在每一頁出現(xiàn)。（注意：在IE 中無效，但在 Firefox 有效） 經(jīng)典的表格代碼如下： <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; /* 動態(tài)變色,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 年統(tǒng)計</td>
</tr>
</tfoot>
</table>
</body>
</html>顯示效果如下：
注意： IE6 只有<a>標記支持:hover 偽類，其余標簽都不支持！ 并且<a>標記的偽類有順序：a:link -> a:visited -> a:hover -> a:active 其他說明在現(xiàn)在 div 大行其道的時代，table 這個標簽似乎很少被人提及，到處都是 div+css 布局的書以及博客文章，但其實 table 以及連帶的其他表格標簽依然在網(wǎng)頁中占很重要的地位，特別是后臺展示數(shù)據(jù)的時候表格運用是否熟練就顯得很重要，一個清爽簡約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理，雖然 div 布局也可以做到，但是總沒有表格來得方便。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
