HTML 表格

网站首页> 编程文档> Html教程> HTML 表格

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>

显示效果如下:

2005200620072008
拨款11,98012,6509,70010,600
捐款4,7804,9896,7006,590
投资8,0008,1008,7608,490
募捐3,2003,1203,7004,210
销售28,40027,10027,95029,050
杂费2,1001,9001,3001,760
总计58,46057,85958,11060,700
2008 年统计

注意:

IE6 只有<a>标记支持:hover 伪类,其余标签都不支持!

并且<a>标记的伪类有顺序:a:link -> a:visited -> a:hover -> a:active

其他说明

在现在 div 大行其道的时代,table 这个标签似乎很少被人提及,到处都是 div+css 布局的书以及博客文章,但其实 table 以及连带的其他表格标签依然在网页中占很重要的地位,特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理,虽然 div 布局也可以做到,但是总没有表格来得方便。

编程文档