（9）HTML表格

最新推荐文章于 2023-08-15 09:01:14 发布

mxd_xyz

最新推荐文章于 2023-08-15 09:01:14 发布

阅读量378

点赞数

分类专栏： html学习笔记

本文链接：https://blog.csdn.net/mxd395/article/details/23852685

版权

html学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

（一）表格元素<table> <tr> <td> <th>

<tr>表示行；<td>创建单元格；<th>与<td>类似，用于表示标题单元格，形式上为加粗居中显示（<td>为左对齐）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<title>表格学习</title>
	</head>
	
	<body>
		<table border="1">
			<tr>
				<td>第一行第一列</td>
				<td>第一行第二列</td>
				<td>第一行第三列</td>
			</tr>
			<tr>
				<th>第二行第一列</th>
				<th>第二行第二列</th>
				<th>第二行第三列</th>
			</tr>
		</table>	
	</body>
</html>

以上代码效果如下：

（二）table元素的特性

1. align特性（可由CSS实现，已被弃用）

用于指明该table在窗口中处于左边（align=left）、右边（align=right）还是居中（align=center）的位置。

2. bgcolor特性用于指明表格的背景颜色（值可以为颜色名或6位16进制数字）

3. border特性用于在表格的周围以及每个单元格的周围添加边框，默认情况以及border=“0”的情况下，边框不显示。

4. cellpadding特性用于单元格内边距，值可以为像素或者百分比。

5. cellspacing特性用于创建单元格边框间的空间量，值可以为像素或者百分比。

6. dir特性用于指明表格中文本的方向。（dir=“rtl”为从右向左；ltr表示从左向右）

7. rules用于指示内边框外观，frame用于指示外边框外观，均可由CSS实现。

8. width用于指明表格宽度，该值通常为像素值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<title>表格学习</title>
	</head>
	
	<body>
		<table border="1" align="center" bgcolor="red" cellpadding="10%" cellspacing="5" dir="rtl" width="800">
			<tr>
				<td>第一行第一列</td>
				<td>第一行第二列</td>
				<td>第一行第三列</td>
			</tr>
			<tr>
				<th>第二行第一列</th>
				<th>第二行第二列</th>
				<th>第二行第三列</th>
			</tr>
		</table>	
	</body>
</html>

效果图如下：

（三）tr元素的特性

1. align特性（可由CSS实现，已被弃用）用于指明该某行所有单元格内容的位置：左对齐（align=eft）、右对齐（align=right）、居中（align=center）、两端对齐（align=justify）。

2. bgcolor特性用于指明该行的背景颜色，通常用于颜色交替，便于辨别不同行（值可以为颜色名或6位16进制数字）

3. valign特性用于指明每个单元格内容的垂直对其方式：单元格顶部对齐（top）、单元格中心对其（middle）、单元格底部对齐（bottom）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<title>表格学习</title>
	</head>
	
	<body>
		<table border="1" width="600">
			<tr align="right" bgcolor="red">
				<td>第一行第一列</td>
				<td>第一行第二列</td>
				<td>第一行第三列</td>
			</tr>
			<tr align="center" bgcolor="green">
				<td>第二行第一列</td>
				<td>第二行第二列</td>
				<td>第二行第三列</td>
			</tr>
		</table>	
	</body>
</html>

（四）td元素的特性

1. align特性（可由CSS实现，已被弃用）用于指明该某单元格内容的水平对其方式：左对齐（align=eft）、右对齐（align=right）、居中（align=center）、两端对齐（align=justify）。

2. bgcolor特性用于指明该单元格的背景颜色，（值可以为颜色名或6位16进制数字）

3. colspan特性用于一个单元格跨越多列时使用（合并单元格）如：colspan=“2”。

4. rowspan特性用于一个单元格跨多行时使用，如：rowspan=“2”。

5. height特性用于指定单元格高度（其值可为像素值或百分比）。

6. width特性用于指定单元格宽度（其值可为像素值或百分比）。

3. valign特性用于指明每个单元格内容的垂直对其方式：单元格顶部对齐（top）、单元格中心对其（middle）、单元格底部对齐（bottom）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<title>表格学习</title>
	</head>
	
	<body>
		<table border="1" width="800">
			<tr >
				<td align="left" height="30">第一行第一列</td>
				<td align="center">第一行第二列</td>
				<td align="right">第一行第三列</td>
			</tr>
			<tr >
				<td colspan="2" width="500">两列合并</td>
				<td rowspan="2">两行合并</td>
			</tr>
			<tr >
				<td>第三行第一列</td>
				<td>第三行第二列</td>
			</tr>
		</table>	
	</body>
</html>

（五）为表格添加标题（<caption>元素）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<title>表格学习</title>
	</head>
	
	<body>
		<table border="1" align="center">
			<caption>表格学习</caption>
			<tr>
				<td>第一行第一列</td>
				<td>第一行第二列</td>
				<td>第一行第三列</td>
			</tr>
			<tr>
				<th>第二行第一列</th>
				<th>第二行第二列</th>
				<th>第二行第三列</th>
			</tr>
		</table>	
	</body>
</html>

（六）对表格进行分组，便于对一组表格进行格式调整（与CSS结合）

使用<colgroup>对列进行分组，可用特性有：align，span，valign，width等。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<title>表格学习</title>
	</head>
	
	<body>
		<table border="1" align="center" width="900">
			<caption>表格学习</caption>
			<colgroup span="2" class="first_part" width="40%" ></colgroup>
			<colgroup span="1" class="second_part" width="20%"></colgroup>
			<tr>
				<td>第一行第一列</td>
				<td>第一行第二列</td>
				<td>第一行第三列</td>
			</tr>
			<tr>
				<td>第二行第一列</td>
				<td>第二行第二列</td>
				<td>第二行第三列</td>
			</tr>
			<tr >
				<td>第三行第一列</td>
				<td>第三行第二列</td>
				<td>第二行第三列</td>
			</tr>
		</table>	
	</body>
</html>