细说HTML表格

最新推荐文章于 2022-04-20 10:07:28 发布

转载最新推荐文章于 2022-04-20 10:07:28 发布 · 66 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tograce/archive/2009/06/03/1495128.html

本文详细介绍如何使用HTML创建和美化表格，包括基本语法、CSS样式、结构划分等，并提供了丰富的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本的HTML表格
一步一步来，先看最基本的HTML表格

HTML表格基本语法
1

<html>
2

<head>
3

</head>
4

<body>
5

<table border="1">
7

<tr>
8

<td>Company</td><td>Employees</td><td>Founded</td>
9

</tr>
10

<tr>
11

<td>ACME Inc</td><td>1000</td><td>1947</td>
12

</tr>
13

<tr>
14

<td>XYZ Corp</td><td>2000</td><td>1973</td>
15

</tr>
16

</table>
17

</body>
19

</html>

在游览器中看到是什么样子

图1

这样的表格可不好看，虽然只是将“border” 设置为"1"，但表边框实在不雅。能不能要那种细线边框效果的表格呢，当然可以，加点CSS就行了：)
在<head></head>加入

< style type ="text/css" >
table { border-collapse : collapse ; }
</ style >

就可以使表格变为细边框，

图2

再将它美化

图3

它的CSS样式为:

Code
1

table{

}{
3

border: solid 1px green;
4

border-collapse:collapse;
5

}
6

td,th{

}{
7

border-bottom:1px solid green;
8

border-left:1px solid green;
9

border-right:1px solid green;
10

}
11

</style>

设置行和列的标题

如下面的表：

图4

在HTML中用 <th> 标签定义行和列的标题，如下：

< tr >
< th > Company </ th >< th > Employees </ th >< th > Founded </ th >
</ tr >

会了上面的，下面这个效果也是一样的：

图5

Code
1

<html>
2

<head>
3

table{

}{
5

border: solid 1px green;
6

border-collapse:collapse;
7

}
8

td,th{

}{
9

border-bottom:1px solid green;
10

border-left:1px solid green;
11

border-right:1px solid green;
12

}
13

</style>
14

</head>
15

<body>
16

<table >
18

<tr>
19

<td></td><th>Employees</th><th>Founded</th>
20

</tr>
21

<tr>
22

<th>ACME Inc</th><td>1000</td><td>1947</td>
23

</tr>
24

<tr>
25

<th>XYZ Corp</th><td>2000</td><td>1973</td>
26

</tr>
27

</table>
28

</body>
30

</html>

给表加上标题和内容描述

表格的标题用caption 标签表示，它会自动出现在整张表格的上方。

除了标题以外，对内容的更长描述可以写在table标签的 summary 属性中

< table summary ="The number of employees and the foundation year of some imaginary companies." >
< caption > Table 1: Company data </ caption >

效果是这样的：

图6

Code
1

<html>
2

<head>
3

table{

}{
5

border: solid 1px green;
6

border-collapse:collapse;
7

}
8

td,th{

}{
9

border-bottom:1px solid green;
10

border-left:1px solid green;
11

border-right:1px solid green;
12

}
13

</style>
14

</head>
15

<body>
16

<table summary="The number of employees and the foundation year of some imaginary companies.">
18

<caption>Table 1: Company data</caption>
19

<tr>
20

<th>Company</th><th>Employees</th><th>Founded</th>
21

</tr>
22

<tr>
23

<td>ACME Inc</td><td>1000</td><td>1947</td>
24

</tr>
25

<tr>
26

<td>XYZ Corp</td><td>2000</td><td>1973</td>
27

</tr>
28

</table>
29

</body>
31

</html>

thead、tbody和tfoot

从结构上看，表格可以分成表头、主体和表尾三部分，在HTML语言中分别用thead、tbody、tfoot表示。

语法
1

<table>
2

<thead>
3

<tr>

header information

</thead>
5

<tfoot>
6

<tr>

footer information

</tfoot>
8

<tbody>
9

<tr>

first row of block one data

<tr>

second row of block one data

</tbody>
12

<tbody>
13

<tr>

first row of block two data

<tr>

second row of block two data

<tr>

third row of block two data

</tbody>
17

</table>
18

这里有三个注意点：
1）thead和tfoot在一张表中都只能有一个，而tbody可以有多个。
2）tfoot必须出现在tbody前面，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。这一点对大型表格尤其重要。
3）thead、tbody和tfoot里面都必须使用tr标签。

我们回过来看看图4和图5这两个表，我们用<th>定义了行或列标题，需要知道作为标题的内容不再是表格数据，但如果某些内容既是标题又是数据，那么仍然应该使用<td>。表格标题可以设置为 row 或 col 的scope属性，定义它们为行标题还是列标题。

Code
1

<table summary="The number of employees and the foundation year of some imaginary companies.">
2

<caption>Table 1: Company data</caption>
3

<tr>
4

<th scope="col">Company</th>
5

<th scope="col">Employees</th>
6

<th scope="col">Founded</th>
7

</tr>
8

<tr>
9

<td scope="row">ACME Inc</td>
10

<td>1000</td>
11

<td>1947</td>
12

</tr>
13

<tr>
14

<td scope="row">XYZ Corp</td>
15

<td>2000</td>
16

<td>1973</td>
17

</tr>
18

</table>

图7

我上面的图7可看出，因将列标题定义为 <td>，虽然将scope属性设置为 row ，但在游览器中没有加粗显示，还需要在CSS加点......

td[scope] {font-weight:bold;}

在FireFox中的效果己达到了我们期望了:

图8

为什么我要强调说在FireFox游览器，因为IE不支持 td[scope] {font-weight:bold;} 这样的语法，看到的效果还是图7那样

列的分组 col和colgroup

我们可以用<tr>或<tbody>对整行应用样式，但很难对整列应用样式。为此，W3C引入了colgroup和col元素。同样不幸的是，支持的游览器并不多。

< colgroup >
< col id ="CompanylistCol" />
< col id ="EmployessCol" />
< col id ="FoundedCol" />
</ colgroup >

综合练习

我们将上面涉及的内容组合在一起，能做出什么样的表格呢？>>>

Code
1

<table summary="The number of employees and the foundation year of some imaginary companies.">
2

<caption>Table 1: Company data</caption>
3

<colgroup>
4

<col id="CompanylistCol" />
5

<col id="EmployessCol" />
6

<col id="FoundedCol" />
7

</colgroup>
8

<thead>
9

<tr>
10

<th id="Companylisthead" scope="col">Company</th>
11

<th scope="col">Employees</th>
12

<th scope="col">Founded</th>
13

</tr>
14

</thead>
15

<tbody>
16

<tr class="odd">
17

<td scope="row">ACME Inc</td>
18

<td>1000</td>
19

<td>1947</td>
20

</tr>
21

<tr >
22

<td scope="row">XYZ Corp</td>
23

<td>2000</td>
24

<td>1973</td>
25

</tr>
26

<tr class="odd">
27

<td scope="row">DTS</td>
28

<td>20</td>
29

<td>2007</td>
30

</tr>
31

</tbody>
32

</table>

接下来，逐渐给它穿上衣服:)

Code
1

/**//*先为整个表添加外边框：*/
2

table{

}{border-collapse:collapse;border: solid 1px #666;}
3

/**//*给表格标题也摆弄摆弄*/
5

caption{

}{font-size:1.2em;font-weight:bold;margin:0.5em 0;}
6

/**//*设置列间隙*/
8

td,th{

}{padding:0.1em 1em;}
9

/**//*设置列分隔线*/
11

col{

}{border-right:1px solid #ccc;}/**//*★IE不支持*/
12

/**//*设置表头*/
14

thead{

}{
15

background:#ddd; /**//*url(images/bar.gif) repeat-x left center */;
16

border-bottom:1px solid #a5a5a5;
17

}
18

/**//*让行标题左对齐*/
20

th{

}{/**//*font-weight:normal;*/text-align:left;}
21

/**//*隔行显示色彩*/
23

.odd{

}{background-color:#edf5ff;}
24

/**//*当鼠标置于行上时，色彩变化,但不希望包含表格标题的行也变色，所以需要覆盖它的样式*/
26

tr:hover{

}{background-color:#99CCFF;color:#fff} /**//*★IE不支持*/
27

thead tr:hover{

}{background-color:transparent;color: inherit;}
28

/**//*最后，不希望标题“company”显示，但考虑到屏幕阅读器用户，用一个很大负缩进将它隐藏*/
30

#Companylisthead{

}{text-indent:-1000em}

在FireFox中有漂亮的表格

图9
在IE中的效果

图10
在IE中的有两点没有达到：1、列分隔线没有；2、当鼠标置于行上时，色彩不变化。
关于没有列分隔线，可以用一个星号招数解决：

* td,th { border-right : 1px solid #ccc ; }

参考文章:http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2
http://www.ui163.com/w3c/second_3455.html

转载于:https://www.cnblogs.com/tograce/archive/2009/06/03/1495128.html