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>
代码显示: