HTML之表格_html dr-CSDN博客

本文链接：https://blog.csdn.net/Dr____sweet/article/details/75091553

1.表格构成三个要素

table：表格的范围，外框；用来定义表格，表哥的其他元素包含在table标签里面。
tr：表格的行。
td：表格的单元格。

2.关于表格属性的一点说明

HTML5中删除HTML4中的table的大部分属性，HTML5中推荐使用css设定原来table属性实现的效果，对于HTML5中废弃的一部分属性不在对其讲解。

3.相关元素及属性

th元素：为表格添加表行题

th元素用来定义表格的标题单元格，他是tr元素的子元素，必须放在tr标签里边，tr元素的内容会自动居中并加粗文字。

colspan属性：横向合并单元格

属性值为正整数，表示该单元格横向合并的列数，语法为<td colspan="2"><td>。

rowspan属性：竖向合并单元格。

属性值为正整数，表示该单元格横向合并的列数，语法为<td rowspan="2"><td>。

caption元素：给表格添加标题

用来指定表格的标题或说明，是table的子元素，必须放在table中使用。caption的algin属性可以设置标题的位置，胆子HTM L5中已经弃用，建议使用css样式设置。

thead/tbody/tfoot元素

thead：表格的表头 tbody：表格的主题 tfoot：表格的页脚；表格的规范写法应该包含这三个部分内容，注：这三个要结合css，JavaScript来使用。

colgroup元素

用来组合列：他的span元素属性可以设置组合列的数目，它还包含一个子元素col

colgroup是table元素的子元素，必须放在caption元素之后，thead之前。

col元素

设定列的属性，它也可以使用span元素，col元素一般作为colgroup元素的子元素配合使用。

表格综合代码示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>less09_表格</title>
</head>
<body>
	<table border="1">
		<tr>
			<td>单元格1</td> <td>单元格1</td><td>单元格1</td>
		</tr>
		<tr>
			<td>单元格2</td> <td>单元格2</td><td>单元格2</td>
		</tr>
		<tr>
			<td>单元格3</td> <td>单元格3</td><td>单元格3</td>
		</tr>
	</table>
	<br><br>
<h1>加标题的单元格</h1>
	<table border="1">
		<tr><th>标题1</th><th>标题2</th><th>标题3</th></tr>
		<tr>
			<td>单元格1</td> <td>单元格1</td><td>单元格1</td>
		</tr>
		<tr>
			<td>单元格2</td> <td>单元格2</td><td>单元格2</td>
		</tr>
		<tr>
			<td>单元格3</td> <td>单元格3</td><td>单元格3</td>
		</tr>
	</table>
<br><br>
<h1>横向合并单元格</h1>
	<table border="1">
		<tr><th colspan="3">标题</th></tr>
		<tr>
			<td>单元格1</td> <td>单元格1</td><td>单元格1</td>
		</tr>
		<tr>
			<td colspan="2" align="center">单元格2</td> <td>单元格2</td>
		</tr>
		<tr>
			<td>单元格3</td> <td>单元格3</td><td>单元格3</td>
		</tr>
	</table>
<br><br>
<h1>竖向合并单元格</h1>
	<table border="1">
		<tr><th rowspan="4">竖向陈列</th> <th>1</th><th>2</th></tr>
		<tr>
		 <td>单元格1</td><td>单元格1</td>
		</tr>
		<tr>
			 <td rowspan="2">单元格2</td><td>单元格2</td>
		</tr>
		<tr>
			 <td>单元格3</td>
		</tr>
	</table>
	<br><br>
	<h1>表格的标题</h1>
	<table border="1">
	<caption> 表格标题</caption>
		<tr><th rowspan="4">竖向陈列</th> <th>1</th><th>2</th></tr>
		<tr>
		 <td>单元格1</td><td>单元格1</td>
		</tr>
		<tr>
			 <td rowspan="2">单元格2</td><td>单元格2</td>
		</tr>
		<tr>
			 <td>单元格3</td>
		</tr>
	</table>
<br><br>
<h1>标题</h1>
	<table border="1">
		<tr><th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th></tr>
		<tr> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> </tr>
		<tr> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> </tr>
		<tr> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> </tr>
		<tr> <td>单元格4</td> <td>单元格4</td> <td>单元格4</td> <td>单元格4</td> <td>单元格4</td> </tr>
	</table>
	<br><br>

		<table border="1">

		<thead>
				<tr><th colspan="5">标题</th></tr>
		</thead>
		<tbody>
			<tr> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> </tr>
			<tr> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> </tr>
			<tr> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> </tr>
			
		</tbody>
		<tfoot>
			<tr> <td>备注：</td> <td colspan="4">单元格4</td>  </tr>
		</tfoot>
	</table>
	<br><br>
	<table border="1">
		<colgroup span="1" style="width: 100px">
			<col style="background:cyan">
		</colgroup>
		<colgroup span="3" style="width: 200px">
			<col style="background: red"><col style="background: green"><col style="background: blue">
		</colgroup>
		<colgroup span="1" style="width: 100px"></colgroup>
		<tr><th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th></tr>
		<tr> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> <td>单元格1</td> </tr>
		<tr> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> <td>单元格2</td> </tr>
		<tr> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> <td>单元格3</td> </tr>
		<tr> <td>单元格4</td> <td>单元格4</td> <td>单元格4</td> <td>单元格4</td> <td>单元格4</td> </tr>
	</table>
</body>
</html>

效果图