<table>标签总结（colspan跨列 ，rowspan跨行）

table标签有些内置属性要设置：

?
1
<table cellpadding="0" cellspacing="0" border="0" summary="各银行的网上银行支付限额总表">

1.摘要summary的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，  

   使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

2. cellpadding 规定单元格与其内容之间的空白

3.cellspacing   规定单元格之间的空白

4.border-collapse: collapse;去掉这些空白的属性,如果不设置table标签的这些属性值为0，可以直接在样式里面设置border-collapse: collapse;也可以去掉这些空白的！

综合实例1-合并四行，合并三列

代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各银行的网上银行支付限额总表</title>
    <link href="//gsy.oss-cn-beijing.aliyuncs.com/css/global.css>" rel="stylesheet">
    <style type="text/css"> 
    table{width:1190px;font-size:15px;line-height:1.2;border-top:1px solid #a8a8a8;border-left:1px solid #a8a8a8;text-align: center;margin:57px auto;}
    table  caption{padding:26px 0;font-size: 26px;line-height: 1;color:#e63b3b;}
    table td, table th{ border-right:1px solid #a8a8a8; border-bottom:1px solid #a8a8a8;height:20px;}
    table th{background-color:#eeeeee;padding:8px 0;}
    table td{font-size: 12px;line-height:26px;padding:4px 15px 4px 9px;}
    .align-justy{text-align: justify;}
</style> 
</head>
<body>
    <table cellpadding="0" cellspacing="0" border="0" summary="各银行的网上银行支付限额总表">
        <caption align="top">各银行的网上银行支付限额总表</caption>
        <tr>
            <th width="89"></th>
            <th width="80"></th>
            <th width="156"></th>
            <th width="300"></th>
            <th width="109"></th>
            <th width="130"></th>
            <th width="130"></th>
            <th></th>
        </tr><br>　　　　<!-- 合并四行则要写4个 tr ,第二第三第四个 tr 里面合并过了的列就不用再写了,如下是合并了四行的代码-->
        <tr>
            <th rowspan="4"></th>
            <td rowspan="4"></td>
            <td rowspan="4"></td>
            <td rowspan="4" class="align-justy"></td>
            <td rowspan="3"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th rowspan="3"></th>
            <td rowspan="3"></td>
            <td rowspan="3"></td>
            <td rowspan="3" class="align-justy"></td>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th rowspan="3"></th>
            <td rowspan="3"></td>
            <td rowspan="3"></td>
            <td rowspan="3" class="align-justy"></td>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="3"></td>
        </tr>
    </table>
</body>
</html>

 

　

 综合实例2 - 综合应用colspan ,rowspan

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
</head>
<table border= "1 "   width= "200 " >
     <tr>
        <td colspan="4"  >ss
        </td>
     </tr>
     <tr>
        <td   width= "25% "> 　 </td> 
        <td   width= "25% "> 　 </td> 
        <td   width= "25% "> 　 </td> 
        <td   width= "25% "> 　 </td>
     </tr>
     <tr>
        <td   width= "25% "rowspan="2"> 　 </td> 
        <td   width= "25% "> 　 </td> 
        <td   width= "25% "> 　 </td> 
        <td   width= "25% "> 　 </td>
     </tr>
     <tr>
        <td   width= "25% "> 　 </td> 
        <td   width= "25% " rowspan="3"> 　 </td> 
        <td   width= "25% "> 　 </td>
     </tr>
     <tr>
        <td   width= "25% " colspan="2"  > 　 </td> 
        <td   width= "25% "> 　 </td> 
 
     </tr>
     <tr>
        <td   width= "25% "> 　 </td> 
        <td   width= "25% "> 　 </td> 
        <td   width= "25% "> 　 </td> 
     </tr>
</table>
</html>

　　

　

　　

　　

posted @   front-gl  阅读(78831)  评论(1)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示