HTML 表格
表格其实就是很多的小单元格,而这些小单元格很有次序的排列着,它们有很多行,很多列。这些由行列组成的布局,就叫表格,表格是 table 标签来定义的。
html 表格示例:
姓名 | 性别 | 年龄 |
---|---|---|
张三 | 男 | 40 |
李四 | 女 | 32 |
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>
显示效果如下:
2005 | 2006 | 2007 | 2008 | |
---|---|---|---|---|
拨款 | 11,980 | 12,650 | 9,700 | 10,600 |
捐款 | 4,780 | 4,989 | 6,700 | 6,590 |
投资 | 8,000 | 8,100 | 8,760 | 8,490 |
募捐 | 3,200 | 3,120 | 3,700 | 4,210 |
销售 | 28,400 | 27,100 | 27,950 | 29,050 |
杂费 | 2,100 | 1,900 | 1,300 | 1,760 |
总计 | 58,460 | 57,859 | 58,110 | 60,700 |
2008 年统计 |
注意:
IE6 只有<a>标记支持:hover 伪类,其余标签都不支持!
并且<a>标记的伪类有顺序:a:link -> a:visited -> a:hover -> a:active
其他说明
在现在 div 大行其道的时代,table 这个标签似乎很少被人提及,到处都是 div+css 布局的书以及博客文章,但其实 table 以及连带的其他表格标签依然在网页中占很重要的地位,特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理,虽然 div 布局也可以做到,但是总没有表格来得方便。