table 布局

cfw19990927

于 2021-05-30 16:14:03 发布

阅读量66

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/cfw19990927/article/details/117394755

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>