目录
1. 表格布局的相关标签
标签名 | 语义和效果 |
table | 定义表格 |
thead | 表格的头部(语义) |
tbody | 表格的身体(语义) |
tfoot | 表格的表尾(语义) |
tr | 定义表格的行 |
td | 放置表格文本 |
th | 放置表格文本(加粗 居中效果) |
2.表格中的属性:
- cellpadding 表格中的单元格到表格的间距
- cellspacing 表格中各个单元格的距离
- colspan 水平方向合并的是列
- rowspan 垂直方向合并的是行
代码示例:
布局一个银行的账单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,td,th{
border: 1px solid black;
}
table{
width: 100%;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">回单类型</th>
<th>网上转账汇款</th>
<th colspan="2">指令序号</th>
<th>213254135454</th>
</tr>
<tr>
<td rowspan="4" width='30px'>收款人</td>
<td>户名</td>
<td>张三</td>
<td rowspan="4" width='30px'>付款人</td>
<td>户名</td>
<td>老刘</td>
</tr>
<tr>
<td>卡号</td>
<td>0000000001</td>
<td>卡号</td>
<td>0000000002</td>
</tr>
<tr>
<td>地区</td>
<td>南京</td>
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<td>网点</td>
<td>工商江苏南京业务处理中心</td>
<td>网点</td>
<td>江苏徐州业务中心</td>
</tr>
<tr>
<td colspan="2">币种</td>
<td>人民币</td>
<td colspan="2">钞汇标志</td>
<td>钞票</td>
</tr>
<tr>
<td colspan="2">金额</td>
<td>1.00元</td>
<td colspan="2">手续费</td>
<td>0.75元</td>
</tr>
<tr>
<td colspan="2">合计</td>
<td colspan="5">人民币(大写):壹</td>
</tr>
<tr>
<td colspan="2">交易时间</td>
<td>2017年6月01号</td>
<td colspan="2">时间截至</td>
<td>2017-06-01-13.00.00.00000</td>
</tr>
</table>
</body>
</html>