table 布局

最新推荐文章于 2024-06-24 06:42:28 发布

孤舟一落叶

最新推荐文章于 2024-06-24 06:42:28 发布

阅读量218

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_58463882/article/details/117257630

版权

本文介绍了HTML表格的使用，包括如何通过``、``、`

`和`

`标签创建表格，以及设置表格属性如`border`、`cellspacing`和`cellpadding`等。同时讲解了表格的跨行(`rowspan`)和跨列(`colspan`)合并技巧，并提供了一个工商银行电子汇款单的实例，展示了表格在信息展示和网页布局中的应用。摘要由CSDN通过智能技术生成

table 布局

用表格显示信息调理清楚，使浏览者一目了然。表格在网页中还有协助布局的作用，可以把文字、图像等组织到表格的不同行列。对网页进行一个简单的布局。

常用的属性：

border	边框
cellspacing	单元格与单元格之间的间隙距离。
cellpadding	每个单元格中的内容，与边框线的距离
weight/height	表格的宽高
align	表格在屏幕的左中右位置显示，left、center、right（给表格加上align，相当于让表格浮动，会直接打破表格后面元素的原有排列方式）
bgcolor	背景色
background：background="img/aaa.png"	背景图片

表格标签

tr -----元素定义表格行

th-------- 元素定义表头

td ---------元素定义表格单元。

表格的合并

跨行合并 rowspan=" "

跨列合并 colspan=" "

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>工商银行电子汇款单</title>
</head>
<body>
	<table border="1" width="1450" align="center" cellspacing="0" cellpadding="0">
		<thead>
			<caption><strong>工商银行电子汇款单</strong></caption>
			<tr>
				<th colspan="2" width="50">回单类型</th>
				<th>网上转账汇款</th>
				<th colspan="2" width="50">指令序号</th>
				<th>213254135454</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="4" width="20"><b>收款人</b></td>
				<td>户名</td>
				<td>张三</td>
				<td rowspan="4" width="20">付款人</td>
				<td>户名</td>
				<td>老刘</td>
			</tr>
			<tr>
				<td><b>卡号</b></td>
				<td>00000000001</td>
				<td><b>卡号</b></td>
				<td>00000000002</td>
			</tr>
			<tr>
				<td>地区</td>
				<td>南京</td>
				<td>地区</td>
				<td>杭州</td>
			</tr>
			<tr>
				<td><b>网点</b></td>
				<td>工商南京江苏业务处理中心</td>
				<td><b>网点</b></td>
				<td>江苏徐州业务处理中心</td>
			</tr>
			<tr>
				<td colspan="2"><b>币种</b></td>
				<td>人民币</td>
				<td colspan="2"><b>钞汇标志</b></td>
				<td>钞票</td>
			</tr>
			<tr>
				<td colspan="2"><b>金额</b></td>
				<td>1.00元</td>
				<td colspan="2"><b>手续费</b></td>
				<td>0.75元</td>
			</tr>
			<tr>
				<td colspan="2"><b>合计</b></td>
				<td colspan="4">人民币（大写）：壹</td>
			</tr>
			<tr>
				<td colspan="2"><b>交易时间</b></td>
				<td>2017年10月6号</td>
				<td colspan="2"><b>时间</b></td>
				<td>2017-10-06-13：00：00</td>
			</tr>
		</tbody>
		<tfoot>
			<table width="1450"  align="center" height="150">
				<tr>
					<td>
						<p>票据打印时间：2017-06-01 15：00：12</p>
						<p><del>票据打印单位：苏州业务中心</del></p>
						操作员：大曾
					</td>			
			</table>
		</tfoot>
		
	</table>

</body>
</html>

代码显示：

孤舟一落叶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
table 布局

table 布局用表格显示信息调理清楚，使浏览者一目了然。表格在网页中还有协助布局的作用，可以把文字、图像等组织到表格的不同行列。对网页进行一个简单的布局。常用的属性：border 边框 cellspacing 单元格与单元格之间的间隙距离。 cellpadding 每个单元格中的内容，与边框线的距离 weight/height 表格的宽高 align 表格在屏幕的左中右位置显示，left、center、right（给表格加上align，相当于..
复制链接

扫一扫