HTML 表格
表格其实就是很多的小单元格,而这些小单元格很有次序的排列着,它们有很多行,很多列。这些由行列组成的布局,就叫表格,表格是 table 来定义的。
html 表格示例:
html 表格
表格由 <table> 来定义。每个表格均有若干行(由 <tr> 定义),每行被分割为若干单元格(由 <td> 定义)。字母 td 指表格数据(table data),即数据单元格的。数据单元格可以包含文本、、列表、段落、表单、水平线、表格等等。
HTML 表格和边框
如果不定义边框,表格将边框。有时这很有用,但是大多数时候,我们希望边框。
使用边框来带有边框的表格:
<table border="1"> <tr> <td>行 1, 列 1</td> <td>行 1, 列 2</td> </tr> </table>
HTML 表格表头
表格的表头使用 <th> 进行定义。
大多数浏览器会把表头为粗体居中的文本:
<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 :用于概括整个表格的。它对于引擎的机器人记录信息十分重要。
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>
如下:
注意:
IE6 只有<a>:hover 伪类,其余都!
并且<a>的伪类有顺序:a:link -> a:visited -> a:hover -> a:active
其他说明
在现在 div 大行其道的时代,table 这个似乎很少被人提及,到处都是 div+css 布局的书以及,但其实 table 以及连带的其他表格依然在网页中占很重要的地位,特别是展示数据的时候表格运用是否熟练就显得很重要,清爽简约的表格能够把繁杂的数据表现得很有条理,虽然 div 布局也可以做到,但是总没有表格来得方便。