HTML表格标签，及表格合并代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table height='100px' width="500px" border="2px" bgcolor="pink" cellpadding="10px" cellspacing="0px">
<!-- cellpadding是表格内元素距离每个边框的距离，cellspacing是每一个单位元素边框和附近的单位元素边框边框的距离。 -->
<!-- 还可以导入背景图片，background='',值写想放入图片的路径。 -->
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<br>
<hr>
<table height='100px' width="500px" border="2px" bgcolor="pink" cellpadding="10px" cellspacing="0px">
<!-- cellpadding是表格内元素距离每个边框的距离，cellspacing是每一个边框和附近的边框的距离。 -->
<!-- 还可以导入背景图片，background='',值写想放入图片的路径。 -->
<tr>
<td >第一行第一列</td>
<td >第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td >第二行第一列</td>
<td >第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
<br>
<hr>
<table height='100px' width="500px" border="2px" bgcolor="pink" cellpadding="10px" cellspacing="0px">
<!-- cellpadding是表格内元素距离每个边框的距离，cellspacing是每一个边框和附近的边框的距离。 -->
<!-- 还可以导入背景图片，background='',值写想放入图片的路径。 -->
<tr>
<td rowspan="2">第一行第一列</td>
<td colspan="2">第一行第二列</td>
<!-- <td>第一行第三列</td> -->
</tr>
<tr>
<td >第二行第一列</td>
<td >第二行第二列</td>
<!-- <td>第二行第三列</td> -->
</tr>
</table>
<!-- 如果选择合并表格，两格和成一格，那一格不会消失，要记得删除或者注释，或者在开始前就规划好 -->
</body>
</html>
效果图
案例（工商银行电子汇款单）
效果图
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>工商银行电子汇款单</h1>
<table border="3" cellspacing="0px" >
<tr>
<td colspan="2"align="center" width="50px" ><b>回单类型</b></td>
<td width="1500px" align="center"><b>网上转账汇款</b></td>
<td colspan="2"align="center" width="50px" ><b>指令序号</b></td>
<td width="1500px" align="center"><b>213254135454</b></td>
</tr>
<tr>
<td rowspan="4" width="30px" align="left"><b>收款人</b></td>
<td width="100px"><b>户名</b></td>
<td width="1500px">张三</td>
<td rowspan="4" width="30px" align="left"><b>付款人</b></td>
<td width="100px"><b>户名</b></td>
<td width="1500px">老刘</td>
</tr>
<tr>
<td width="100px"><b>卡号</b></td>
<td width="1500px">000000001</td>
<td width="100px"><b>卡号</b></td>
<td width="1500px">000000002</td>
</tr>
<tr>
<td width="100px"><b>地区</b></td>
<td width="1500px">南京</td>
<td width="100px"><b>地区</b></td>
<td width="1500px">杭州</td>
</tr>
<tr>
<td width="100px"><b>网点</b></td>
<td width="1500px">工商江苏南京业务处理中心</td>
<td width="100px"><b>网点</b></td>
<td width="1500px">江苏徐州业务处理中心</td>
</tr>
<tr>
<td colspan="2"><b>币种</b></td>
<td width="1500px">人民币</b></td>
<td colspan="2"><b>钞汇标志</b></td>
<td width="1500px">钞票</td>
</tr>
<tr>
<td colspan="2"><b>金额</b></td>
<td width="1500px">1.00元</td>
<td colspan="2"><b>手续费</b></td>
<td width="1500px">0.75元</td>
</tr>
<tr>
<td colspan="2"><b>合计</b></td>
<td width="1500px" colspan="4">人民币（大写）壹</td>
</tr>
<tr>
<td colspan="2"><b>交易时间</b></td>
<td width="1500px">2017年6月01号</td>
<td colspan="2"><b>时间戳</b></td>
<td width="1500px">2017-06-01-13.0000000</td>
</tr>
</table>
票据打印时间2017-06-01 15:00:12 <br><br>
<del>票据打印单位徐州业务中心</del><br><br>
操作员：大曾
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
