Web前端开发 table标签相关用法和属性

本文链接：https://blog.youkuaiyun.com/m0_52841254/article/details/117326581

table标签

html中的<table>标签，通常用于对页面布局的规划。

一、<table>标签简介

table标签用于在网页中建立表格布局，其子标签有<tr></tr> <th></th> <td></td> <thead></thead> <tbody></tbody> <tfoot></tfoot>

我们用如下代码在网页中建立表格

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>电影网</title>
</head>
<body>

<h1>热门电影板块</h1>
<hr>
<table width="800px">
	<tr>
		<td>最新热门电影</td><td>热门</td><td>最新</td><td>豆瓣高分</td><td>冷门佳片</td><td>华语</td><td>欧美</td><td><a href="#">更多>></a></td>
	</tr>
</table>
<hr>
<table width="800px">
	<tr>
		<td colspan="2"><img src="..\image\dy1.png"></td>
		<td colspan="2"><img src="..\image\dy2.png"></td>
		<td colspan="2"><img src="..\image\dy1.png"></td>
		<td colspan="2"><img src="..\image\dy2.png"></td>
	</tr>
	<tr>
		<td>盗梦空间</td><td></td>
		<td>致命ID</td><td></td>
		<td>盗梦空间</td><td></td>
		<td>禁闭岛</td><td></td>
	</tr>
	<tr>
		<td colspan="2"><img src="..\image\dy1.png"></td>
		<td colspan="2"><img src="..\image\dy2.png"></td>
		<td colspan="2"><img src="..\image\dy1.png"></td>
		<td colspan="2"><img src="..\image\dy2.png"></td>
	</tr>
	<tr>
		<td>盗梦空间</td><td></td>
		<td>致命ID</td><td></td>
		<td>盗梦空间</td><td></td>
		<td>禁闭岛</td><td></td>
	</tr>
</table>

</body>
</html>

二、table子标签

thead-----表格头部

tbody-----表格主干

tr-------行

td-------单元格（列）

tfoot-----表格尾部

没有使用thead和tbody还有tfoot时

默认表格所有内容都是tbody

三、属性

width,height------宽，高单位px 或者%百分比默认单位px 可以在table标签中设置

当使用了thead、tbody和tfoot标签时，直接在table中设置宽高，变化的只会有tbody中的内容

<table border="1">
			<thead><tr><th>姓名</th><th>年龄</th></tr></thead>
			<tbody><tr><td>张三</td><td>19</td></tr></tbody>
			<tfoot><tr><td>在读</td><td>大二</td></tr></tfoot>
		</table>

<table border="1" width="300px" height="200px">
			<thead><tr><th>姓名</th><th>年龄</th></tr></thead>
			<tbody><tr><td>张三</td><td>19</td></tr></tbody>
			<tfoot><tr><td>在读</td><td>大二</td></tr></tfoot>
		</table>

注：当tr和td中都设置了高度和宽度时，以最大一个值作为属性值

<table border="1" cellspacing="0">
			<tr height="80"><td height="40">123</td><td height="40">123</td></tr>
			<tr height="40"><td height="20">345</td><td height="20">345</td></tr>
			<tr height="20"><td>456</td><td>456</td></tr>
		</table>

align----对齐方式 left center right

<table border="1" width="300px" height="200px">
			<thead><tr><th align="left">姓名</th><th>年龄</th></tr></thead>
			<tbody><tr><td>张三</td><td>19</td></tr></tbody>
			<tfoot><tr><td>在读</td><td>大二</td></tr></tfoot>
		</table>

将姓名左对齐

cellpadding------表格的边距,单元格边缘和内容之间的空白

cellspacing------表格的间距,两个单元格间的距离

bgcolor------表格背景颜色

<table border="3" cellpadding="20" cellspacing="0" bgcolor="gray">
			<thead><tr><th>姓名</th><th>年龄</th></tr></thead>
			<tbody><tr><td>张三</td><td>19</td></tr></tbody>
			<tfoot><tr><td>在读</td><td>大二</td></tr></tfoot>
		</table>

四、表格的嵌套和合并

四、1.表格的嵌套

表格嵌套时，在表格的某个单元格或者某个行内嵌套一个新的表格

<table border="1" cellspacing="0" width="300px" height="300px">
		<tr><td>
				<table border="1" cellspacing="0" width="200px" height="200px">
					<tr><td>123</td><td>123</td></tr>
				</table>
			</td>
			<td>123</td>
		</tr>
		</table>

如图，在表格的第一个单元格中嵌套了新的表格

四、2.表格的合并

表格的合并使用td标签的属性colspan和rowspan来完成

rowspan-----单元格竖跨行数

colspan-----单元格横跨列数

<table cellspacing="0" border="2">
			<tr>
				<td rowspan="2">123123123</td><td>123123123</td>
			</tr>
			<tr><td>123123123</td></tr>
			<tr><td colspan="2">123123123123123123</td></tr>
		</table>

五、表格实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	<title>工商银行电子汇款单</title>
</head>
<body>
	<h3>工商银行电子汇款单</h3>
	<div>
		<table border="1" cellspacing="0">
			<tr>
				<th colspan="2">回单类型</td>
				<th width="400px">网上转账汇款</td>
				<th colspan="2">指令序号</td>
				<th width="400px">213254135454</td>
			</tr>
			<tr>
				<th rowspan="4" width="30px" align="left">收款人</th>
				<td width="150px">户名</td>
				<td>张三</td>
				<th rowspan="4" width="30px" align="left">付款人</th>
				<td width="150px">户名</td>
				<td>老刘</td>
			</tr>
			<tr>
				<th align="left">卡号</th>
				<td>0000000001</td>
				<th align="left">卡号</th>
				<td>0000000002</td>
			</tr>
			<tr>
				<td>地区</td>
				<td>南京</td>
				<td>地区</td>
				<td>杭州</td>
			</tr>
			<tr>
				<th align="left">网点</th>
				<td>工商江苏南京业务处理中心</td>
				<th align="left">网点</th>
				<td>江苏徐州业务中</td>
			</tr>
			<tr>
				<th colspan="2" align="left">币种</th>
				<td>人民币</td>
				<th colspan="2" align="left">钞汇标志</th>
				<td>钞票</td>
			</tr>
			<tr>
				<th colspan="2" align="left">金额</th>
				<td>1.00元</td>
				<th colspan="2" align="left">手续费</th>
				<td>0.75元</td>
			</tr>
			<tr>
				<th colspan="2" align="left">合计</th>
				<td colspan="4">人民币(大写)：壹</td>
			</tr>
			<tr>
				<th colspan="2" align="left">交易时间</th>
				<td>2017年6月01号</td>
				<th colspan="2" align="left">时间戳</th>
				<td>2017-06-01-13.00.00.0000</td>
			</tr>
		</table>
		<p>
			票据打印时间：2017-06-01 15：00：12
		</p>
		<p>
			<del>票据打印单位：苏徐州业务中心</del>
		</p>
		<p>
			操作员：大曾
		</p>
	</div>
</body>
</html>