025_html表格

最新推荐文章于 2022-09-30 15:25:34 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-09-30 15:25:34 发布

阅读量188

点赞数

分类专栏： html学习

本文链接：https://blog.csdn.net/aihiao/article/details/108970140

版权

html学习专栏收录该内容

89 篇文章 2 订阅

订阅专栏

1. 你可以使用html创建表格。

2. 表格

2.1. 表格由<table>标签来定义。

2.2. 每个表格均有若干行(由<tr>标签定义), 每行被分割为若干单元格(由<td>标签定义)。

2.3. 简单的html表格由table元素以及一个或多个tr、th或td元素组成。

2.4. 更复杂的html表格也可能包括caption、col、colgroup、thead、tfoot以及tbody元素。

2.5. <table>标签可选属性

3. <tr>标签

3.1. <tr>标签定义html表格中的行。

3.2. tr元素包含一个或多个th或td元素。

3.3. 可选属性

4. <th>标签

4.1. <th>标签定义表格内的表头单元格。

4.2. html表单中有两种类型的单元格:

表头单元格: 包含表头信息(由th元素创建)
标准单元格: 包含数据(由td元素创建)

4.3. th元素内部的文本通常会呈现为居中的粗体文本, 而td元素内的文本通常是左对齐的普通文本。

4.4. 可选属性

5. <td>标签

5.1. <td>标签定义html表格中的标准单元格。

5.2. td元素中的文本一般显示为正常字体且左对齐。

5.3. 字母td(table data)指表格数据, 即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

5.4. 可选属性

5.5. 例子

5.5.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>表格</title>
	</head>
	<body>
		<table>
			<tr>
				<th>table head 1</th>
				<th>table head 2</th>
			</tr>
			<tr>
				<td>row 1, cell 1</td>
				<td>row 1, cell 2</td>
			</tr>
			<tr>
				<td>row 2, cell 1</td>
				<td>row 2, cell 2</td>
			</tr>
		</table>
	</body>
</html>

5.2.2. 效果图

6. <table>标签的border属性

6.1. 如果不定义边框属性, 表格将不显示边框。有时这很有用, 但是大多数时候, 我们希望显示边框。

6.2. border属性规定围绕表格的边框的宽度。

6.3. border属性会为每个单元格应用边框, 并用边框围绕表格。如果border属性的值发生改变, 那么只有表格周围边框的尺寸会发生变化。表格内部的边框则是1像素宽。

6.4. 从实用角度出发, 最好不要规定边框, 而是使用CSS来添加边框样式和颜色。

6.5. 例子

6.5.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>表格边框</title>
	</head>

	<body>
		<table border="1">
			<tr>
				<th>table head 1</th>
				<th>table head 2</th>
			</tr>
			<tr>
				<td>row 1, cell 1</td>
				<td>row 1, cell 2</td>
			</tr>
			<tr>
				<td>row 2, cell 1</td>
				<td>row 2, cell 2</td>
			</tr>
		</table>

		<table border="10">
			<tr>
				<th>table head 1</th>
				<th>table head 2</th>
			</tr>
			<tr>
				<td>row 1, cell 1</td>
				<td>row 1, cell 2</td>
			</tr>
			<tr>
				<td>row 2, cell 1</td>
				<td>row 2, cell 2</td>
			</tr>
		</table>
	</body>
</html>

6.5.2. 效果图

7. <table>标签的cellpadding属性

7.1. cellpadding属性规定单元边沿与其内容之间的空白。

7.2. 从实用角度出发, 最好不要规定cellpadding, 而是使用CSS来添加内边距。

7.3. 例子

7.3.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>cellpadding属性规定单元边沿与其内容之间的空白</title>
	</head>

	<body>
		<h4>没有cellpadding:</h4>
		<table border="1">
			<tr>
			  <td>First</td>
			  <td>Row</td>
			</tr>   
			<tr>
			  <td>Second</td>
			  <td>Row</td>
			</tr>
		</table>

		<h4>带有cellpadding:</h4>
		<table border="1" cellpadding="10">
			<tr>
			  <td>First</td>
			  <td>Row</td>
			</tr>   
			<tr>
			  <td>Second</td>
			  <td>Row</td>
			</tr>
		</table>
	</body>
</html>

7.3.2. 效果图

8. <table>标签的cellspacing属性

8.1. cellspacing属性规定单元格之间的空间。

8.2. 例子

8.2.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>cellspacing属性规定单元格之间的空间</title>
	</head>

	<body>
		<h4>没有cellspacing:</h4>
		<table border="1">
			<tr>
			  <td>First</td>
			  <td>Row</td>
			</tr>   
			<tr>
			  <td>Second</td>
			  <td>Row</td>
			</tr>
		</table>

		<h4>带有cellspacing:</h4>
		<table border="1" cellspacing="10">
			<tr>
			  <td>First</td>
			  <td>Row</td>
			</tr>   
			<tr>
			  <td>Second</td>
			  <td>Row</td>
			</tr>
		</table>
	</body>
</html>

8.2.2. 效果图

9. <th>标签和<td>标签的colspan属性和rowspan属性

9.1. colspan合并列单元格。

9.2. rowspan合并行单元格。

9.3. 例子

9.3.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>横跨多行多列单元格</title>
	</head>

	<body>
		<h4>横跨两列的单元格:</h4>
		<table border="1">
			<tr>
			  <th>姓名</th>
			  <th colspan="2">电话</th>
			</tr>
			<tr>
			  <td>Bill Gates</td>
			  <td>555 77 854</td>
			  <td>555 77 855</td>
			</tr>
		</table>

		<h4>横跨两行的单元格:</h4>
		<table border="1">
			<tr>
			  <th>姓名</th>
			  <td>Bill Gates</td>
			</tr>
			<tr>
			  <th rowspan="2">电话</th>
			  <td>555 77 854</td>
			</tr>
			<tr>
			  <td>555 77 855</td>
			</tr>
		</table>
	</body>
</html>

9.3.2. 效果图

10. <thead>、<tbody>和<tfoot>标签

10.1 定义和用法

10.1.1. <thead>标签定义表格的表头。该标签用于组合html表格的表头内容。

10.1.2. <tbody>标签定义表格主体(正文)。该标签用于组合html表格的主体内容。

10.1.3. <tfoot>标签定义表格的页脚(脚注)。该标签用于组合html表格中的脚注内容。

10.1.4. thead、tbody以及tfoot元素应该结合起来使用。

10.1.5. 如果您使用thead、tbody以及tfoot元素, 您就必须使用全部的元素。它们的出现次序是: thead、tbody、tfoot, 这样浏览器就可以在收到所有数据前呈现页脚了。您必须在table元素内部使用这些标签。

10.1.6. thead、tbody以及tfoot元素使您有能力对表格进行分组。当您创建某个表格时, 您也许希望拥有一个表头行, 一些带有数据的行, 以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格表头和页脚的表格正文滚动。当长的表格被打印时, 表格的表头和页脚可被打印在包含表格数据的每张页面上。

10.1.7. <thead>内部必须拥有<tr>标签。

10.2. <thead>可选属性

10.3. <tbody>可选属性

10.4. <tfoot>可选属性

10.5. 例子

10.5.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>thead、tbody和tfoot标签</title>
	</head>

	<body>
		<table border="1">
		  <thead>
		    <tr>
		      <th>Month</th>
		      <th>Savings</th>
		    </tr>
		  </thead>
		  <tbody>
		    <tr>
		      <td>January</td>
		      <td>$100</td>
		    </tr>
		    <tr>
		      <td>February</td>
		      <td>$80</td>
		    </tr>
		  </tbody>
		  <tfoot>
		    <tr>
		      <td>Sum</td>
		      <td>$180</td>
		    </tr>
		  </tfoot>
		</table>
	</body>
</html>

10.5.2. 效果图

11. <caption>标签

11.1. caption标签定义表格标题。

11.2. caption标签必须紧随table标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

11.3. 可选属性

11.4. 例子

11.4.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>caption标签定义表格标题</title>
	</head>

	<body>
		<table border="6">
			<caption>我的标题</caption>
			<tr>
			  <td>100</td>
			  <td>200</td>
			  <td>300</td>
			</tr>
			<tr>
			  <td>400</td>
			  <td>500</td>
			  <td>600</td>
			</tr>
		</table>
	</body>
</html>

11.4.2. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
025_html表格

1. 你可以使用html创建表格。2. 表格2.1. 表格由<table>标签来定义。每个表格均有若干行(由<tr>标签定义), 每行被分割为若干单元格(由<td>标签定义)。字母td指表格数据(table data), 即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。2.2. 实例代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
复制链接

扫一扫