<table>標簽總結（colspan跨列，rowspan跨行）

本文轉載自查看原文 2017-04-19 11:56 56162 html5/ table colspan rowspan

table標簽有些內置屬性要設置：

<table cellpadding="0" cellspacing="0" border="0" summary="各銀行的網上銀行支付限額總表">

1.摘要summary的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，

使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。

2. cellpadding 規定單元格與其內容之間的空白

3.cellspacing 規定單元格之間的空白

4.border-collapse: collapse;去掉這些空白的屬性,如果不設置table標簽的這些屬性值為0，可以直接在樣式里面設置border-collapse: collapse;也可以去掉這些空白的！

綜合實例1-合並四行，合並三列

代碼

<!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>
　　　　<!-- 合並四行則要寫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

<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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 table合並單元格 colspan（跨列）和rowspan（跨行） table合並單元格 colspan（跨列）和rowspan（跨行） table中tr間距的設定table合並單元格 colspan（跨列）和rowspan（跨行） table中tr間距的設定table合並單元格 colspan（跨列）和rowspan（跨行） HTML表格跨行、跨列操作(rowspan、colspan) HTML的table的 rowspan, colspan 用法 colspan="2"、列、rowspan="3"、行、用法！ javascript 將 table 導出 Excel ,可跨行跨列 table合並單元格colspan和rowspan table合並單元格colspan和rowspan

標簽總結（colspan跨列，rowspan跨行）