一、表格介绍
1、表格简介
表格,又称为表,既是一种可视化交流模式,又是一种组织整理数据的手段。在HTML中主要的作用是用来描述具有二维结构的数据。
2、HTML中的表格
在HTML中,表格使用<table>
标签来表示,一个表格的基本结构通常涉及到页眉、正文、页脚、行、列、单元格等。
说明:
<table>
标签中包含<thead>
标签、<tbody>
标签、<tfoot>
标签,分别表示页眉、正文、页脚。<thead>
标签、<tbody>
标签、<tfoot>
标签中均可以包含<tr>
标签,<tr>
标签表示行。<tr>
标签中包含<td>
标签或<th>
标签,<td>
标签或<th>
标签表示列,也叫单元格。表格中的数据实际上是放在单元格中的。
3、一个基本的表格
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1">
<tr>
<td>我是第一行第一个单元格</td>
<td>我是第一行第二个单元格</td>
</tr>
<tr>
<td>我是第二行第一个单元格</td>
<td>我是第二行第二个单元格</td>
</tr>
</table>
</body>
</html>
说明:
- 实际开发中,当表格结构比较简单时,通常可以省略
<thead>
标签、<tbody>
标签、<tfoot>
标签。 border="1"
表示表格的边框为1像素。- 通常情况下,同行的高度一致,同列的宽度一致。
4、有页眉和页脚的表格
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>4-2</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>我是页眉的第一个单元格</th>
<th>我是页眉的第二个单元格</th>
</tr>
</thead>
<tbody>
<tr>
<td>我是正文第一行第一个单元格</td>
<td>我是正文第一行第二个单元格</td>
</tr>
<tr>
<td>我是正文第二行第一个单元格</td>
<td>我是正文第二行第二个单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>我是页脚第一个单元格</th>
<th>我是页脚第二个单元格</th>
</tr>
</tfoot>
</table>
</body>
</html>
说明:
<td>
标签和<th>
标签都表示列,但<th>
标签通常用在页眉和页脚中,<th>
标签中的文字默认是粗体;<td>
标签用在正文中。
二、HTML中表格的合并
1、单元格跨行合并
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>4-3</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3">我是第一行第一个单元个,合并了第一列的三个单元格</td>
<td>我是第一行第二个单元格</td>
<td>我是第一行第三个单元格</td>
</tr>
<tr>
<td>我是第二行第二个单元格</td>
<td>我是第二行第三个单元格</td>
</tr>
<tr>
<td>我是第三行第二个单元格</td>
<td>我是第三行第三个单元格</td>
</tr>
</table>
</body>
</html>
说明:
- 使用
rowspan
属性来设置单元格跨行,rowspan
属性的值表示当前单元格跨越的行数。
2、单元格跨列合并
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>4-4</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="3">我是第一行的第一个单元格,我合并第一行的三个单元格</td>
</tr>
<tr>
<td>我是第二行的第一个单元格</td>
<td>我是第二行的第二个单元格</td>
<td>我是第三行的第三个单元格</td>
</tr>
<tr>
<td>我是第三行的第一个单元格</td>
<td>我是第三行的第二个单元格</td>
<td>我是第三行的第三个单元格</td>
</tr>
</table>
</body>
</html>
说明:
- 使用
colspan
属性来设置单元格跨列,colspan
属性的值表示当前单元格跨越的列数。
3、带标题的表格
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>4-5</title>
</head>
<body>
<table border="1">
<caption>我是表格的标题</caption>
<tbody>
<tr>
<th>我是页眉的第一个单元格</th>
<th>我是页眉的第二个单元格</th>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">我是正文第一行第一个单元格,合并第一列的第二个单元格</td>
<td>我是正文第一列第二个单元格</td>
</tr>
<tr>
<td>我是正文第二行的第二个单元格</td>
</tr>
<tr>
<td colspan="2">我是第三行的第一个单元格,合并第三行第二个单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>我是页脚的第一个单元格</th>
<th>我是页脚的第二个单元格</th>
</tr>
</tfoot>
</table>
</body>
</html>
说明:
<caption>
标签必须是<table>
标签的子标签。<caption>
标签中的内容默认按照表格的宽度左右居中。
5、一个例子
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>4-6</title>
</head>
<body>
<table width="400" border="1" cellspacing="0" cellpadding="5">
<caption>销售报表</caption>
<thead bgcolor="#cccccc">
<tr>
<th>序号</th>
<th>部门</th>
<th>金额</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>1</td>
<td>销售1部</td>
<td>1000.00</td>
</tr>
<tr>
<td>2</td>
<td>销售2部</td>
<td>1100.00</td>
</tr>
<tr>
<td>3</td>
<td>门市1部</td>
<td>1200.00</td>
</tr>
<tr>
<td>4</td>
<td>门市2部</td>
<td>1100.00</td>
</tr>
</tbody>
<tfoot bgcolor="#FFFF99">>
<tr>
<th rowspan="2"> 统计</th>
<th>销售部</th>
<th>2100.00</th>
</tr>
<tr>
<th>门市部</th>
<th>2300.00</th>
</tr>
</tfoot>
</table>
</body>
</html>
说明:
- 属性
cellspacing
表示单元格之间的距离,单位是像素。 - 属性
cellpadding
表示单元格内容与其边框之间的空白,单位是像素。 - 属性
align
表示单元格中的文本在单元格中的对齐方式,属性值包括left
、center
、right
。 - 细心的读者应该会发现,这里使用的
width
、bgcolor
、border
、cellspacing
`cellpadding、
align`属性,已经违反了W3C所提倡的内容和表现分离的规范。事实上,这些属性在HTML5中,已经不再建议使用。但是,当前在Web上仍然留存有大量以前版本的HTML代码。所以,我们遵循了解其含义,尽可能不使用的原则,仅仅在这里权且一用。