基本表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML表格元素:

标签 属性
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
  • 示例代码一:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
  <head>
    <title>17_基本表格.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <table>
		<tr>
			<td><b>名称</b></td><td><b>性别</b></td><td><b>年龄</b></td>
		</tr>
		<tr>
			<td>张三</td><td>男</td><td>18</td>
		</tr>
		<tr>
			<td>李四</td><td>女 </td><td>16</td>
		</tr>
	</table>
  </body>
</html>
  • 示例代码二:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
  <head>
    <title>17_基本表格.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <table border="1" width="20%" rules="rows" frame="below">
		<tr>
			<td><b>名称</b></td><td><b>性别</b></td><td><b>年龄</b></td>
		</tr>
		<tr>
			<td>张三</td><td>男</td><td>18</td>
		</tr>
		<tr>
			<td>李四</td><td>女 </td><td>16</td>
		</tr>
	</table>
  </body>
</html>
  • 示例代码三:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
  <head>
    <title>17_基本表格.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <table border="1" width="20%">
		<tr align="center">
			<td><b>名称</b></td><td><b>性别</b></td><td><b>年龄</b></td>
		</tr>
		<tr>
			<td>张三</td><td>男</td><td>18</td>
		</tr>
		<tr>
			<td>李四</td><td>女 </td><td>16</td>
		</tr>
	</table>
  </body>
</html>
  • 示例代码四:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
  <head>
    <title>17_基本表格.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <table border="1" width="20%">
		<tr align="center">
			<td><b>名称</b></td><td><b>性别</b></td><td><b>年龄</b></td>
		</tr>
		<tr>
			<td align="center">张三</td><td>男</td><td>18</td>
		</tr>
		<tr>
			<td height="30px" width="90px">李四</td><td>女 </td><td>16</td>
		</tr>
	</table>
  </body>
</html>

带表头的表格

<th> 标签定义 HTML 表格中的表头单元格。HTML 表格有两种单元格类型:

  • 表头单元格 - 包含头部信息（由 <th> 元素创建）
  • 标准单元格 - 包含数据（由 <td> 元素创建）

值得注意的是:

  • <th> 元素中的文本通常呈现为粗体并且居中。
  • <td> 元素中的文本通常是普通的左对齐文本。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
  <head>
    <title>18_带表头的表格.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
  	<table border="1" width="20%">
		<tr>
			<th>名称</th><th>性别</th><th>年龄</th>
		</tr>
		<tr>
			<td>张三</td><td>男</td><td>18</td>
		</tr>
		<tr>
			<td>李四</td><td>女 </td><td>16</td>
		</tr>
	</table>
  </body>
</html>

带标题的表格

<caption> 标签定义表格的标题。

  • <caption> 标签必须直接放置到 <table> 标签之后。
  • 只能对每个表格定义一个标题。
  • 通常这个标题会被居中于表格之上。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <title>19_带标题的表格.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <table border="1" width="20%">
		<caption>人员信息列表</caption>
		<tr>
			<th>名称</th><th>性别</th><th>年龄</th>
		</tr>
		<tr>
			<td>张三</td><td>男</td><td>18</td>
		</tr>
		<tr>
			<td>李四</td><td>女 </td><td>16</td>
		</tr>
	</table>
  </body>
</html>

跨行或跨列的表格

属性名 值 描述
colspan number 规定表头单元格可横跨的列数。
rowspan number 规定表头单元格可横跨的行数。

跨列示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <title>20_跨行或跨列的表格.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <h4>跨两列的表格:</h4>
	<table border="1">
	<tr>
	  <th>名称</th>
	  <th colspan="2">电话</th>
	</tr>
	<tr>
	  <td>尚硅谷</td>
	  <td>555 77 854</td>
	  <td>555 77 855</td>
	</tr>
	</table>
  </body>
</html>

跨行示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <title>20_跨行或跨列的表格.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
	<h4>跨两行的表格:</h4>
	<table border="1">
	<tr>
	  <th>名称:</th>
	  <td>尚硅谷</td>
	</tr>
	<tr>
	  <th rowspan="2">电话:</th>
	  <td>555 77 854</td>
	</tr>
	<tr>
	  <td>555 77 855</td>
	</tr>
	</table>
  </body>
</html>

表格的页眉、主体及页脚

  • <thead> 标签用于组合 HTML 表格的页眉内容。
  • <tbody> 标签用于组合 HTML 表格的主体内容。
  • <tfoot> 标签用于组合 HTML 表格的页脚内容。

通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

值得注意的是:

  • <tbody>、<tbody> 及 <tfoot> 元素内部必须包含一个或者多个 <tr> 标签。
  • <thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
  <head>
    <title>21_表格的页眉、主体及页脚.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <table border="1">
	  <thead>
	    <tr>
	      <th>月份</th>
	      <th>收入</th>
	    </tr>
	  </thead>
	  <tfoot>
	    <tr>
	      <td>总和</td>
	      <td>$180</td>
	    </tr>
	  </tfoot>
	  <tbody>
	    <tr>
	      <td>二月</td>
	      <td>$100</td>
	    </tr>
	    <tr>
	      <td>三月</td>
	      <td>$80</td>
	    </tr>
	  </tbody>
	</table>
  </body>
</html>