五、表格

最新推荐文章于 2021-05-19 16:03:02 发布

ChengMeng11

最新推荐文章于 2021-05-19 16:03:02 发布

阅读量179

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/ChengMeng11/article/details/104917418

版权

五、表格

1.简介

表格是一个规则的行列结构，每个表格是由若干行组成，每行是由若干个单元格组成

table、row、column

2.基本结构

2.1 table标签

用来定义表格

常用属性：

border边框,默认值为0
width/height宽度/高度
align对齐方式,取值：left center right
bordercolor:边框颜色
bgcolor:背景颜色
background:背景图片
cellspacing:间距单元格与单元格之间的距离
cellpadding:边距单元格内容与边界之间的距离

2.2 tr标签

用来定义行:table row

常用的属性：

align水平对齐取值left(默认)
center right valign垂直对齐取值top middle bottom
bgcolor:背景颜色
background：背景图片

2.3 td标签

用来定义单元格：table data

常用属性:align valign bgcolor background

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="2" width="400px" height="200px" align="center" bordercolor="red" bgcolor="#cccccc" background="../../img/bg.gif" cellspacing="10" cellpadding="0px">
		<tr align="right" valign="top">
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>

		<tr align="center" valign="middle" bgcolor="blue">
			<td>hello</td>
			<td bgcolor="yellow" valign="bottom">hello</td>
			<td>hello</td>
		</tr>


		<tr valign="bottom" background="../../img/heihei.gif">
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
	</table>
</body>
</html>

案例：

在这里插入图片描述

3.合并单元格

合并单元格也称为表格的跨行和跨列

两个属性:

rowspan

设置单元格所跨的行数,如rowspan=“2” 表示跨越2行
colspan

设置单元格所跨的列数,如clospan=“4” 表示跨越4列

步骤：

1. 在跨直的单元格中设置rowspan/colspan属性
2. 将被跨越的单元格删除
3. 注意：必须要保证每行的实际列数是相同的，否则表格可能会出现错乱

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- table>(tr>td{hello$}*4)*4 -->
	<table border="1" width="500px" height="300px">
		<tr>
			<td colspan="4" align="center">hello1</td>
		</tr>
		<tr>
			<td rowspan="3">hello1</td>
			<td>hello2</td>
			<td>hello3</td>
			<td>hello4</td>
		</tr>
		<tr>
			
			<td>hello2</td>
			<td rowspan="2" colspan="2">hello3</td>
			
		</tr>
		<tr>
			
			<td>hello2</td>
			
			
		</tr>
	</table>
</body>
</html>

案例：

在这里插入图片描述

4.高级标签

4.1 caption标签

表格的标题标签

4.2 thead标签

表格的头部table head

4.3th标签

表格的头部标题table head title

一般在thead中，设置头部标题，替代td标签，与td的区别，加粗和居中对齐

4.4 tbody标签

表格的主体 table body

4.5 tfoot标签

表格的底部table foot

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" width="600px" height="300px" align="center">
		<caption><h2>学生基本信息表</h2></caption>

		<thead bgcolor="cyan">
			<th>学号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
		</thead>
		<tbody bgcolor="#cccccc">
			<tr>
				<td>1001</td>
				<td>阿牛</td>
				<td>21</td>
				<td>男</td>
			</tr>
			<tr>
				<td>1002</td>
				<td>阿花</td>
				<td>20</td>
				<td>女</td>
			</tr>
			<tr>
				<td>1003</td>
				<td>张三</td>
				<td>19</td>
				<td>男</td>
			</tr>
			<tr>
				<td>1004</td>
				<td>李四</td>
				<td>22</td>
				<td>女</td>
			</tr>
		</tbody>

		<tfoot bgcolor="yellow" align="center">
			<tr>
				<td width="25%">总计人数</td>
				<td colspan="3">4</td>
				
			</tr>
		</tfoot>
	</table>
</body>
</html>

案例：

在这里插入图片描述