table合並單元格 colspan（跨列）和rowspan（跨行）

本文轉載自查看原文 2017-09-07 14:26 1125 技術

colspan和rowspan這兩個屬性用於創建特殊的表格。

colspan是“column span（跨列）”的縮寫。colspan屬性用在td標簽中，用來指定單元格橫向跨越的列數：

在瀏覽器中將顯示如下：

單元格1
單元格2	單元格3	單元格4

該例通過把colspan設為“3”, 令所在單元格橫跨了三列。如果我們將colspan設為“2”，則該單元格將只跨越兩列，於是有必要在第一行插入另外一個單元格，以確保兩行占據相同的列數。

該例在瀏覽器中將顯示如下：

單元格1		單元格2
單元格3	單元格4	單元格5

`rowspan`的作用是指定單元格縱向跨越的行數。

瀏覽器中將顯示如下：

單元格1	單元格2
	單元格3
	單元格4

上例中的單元格1，其rowspan被設為“3”，這表示該單元格必須跨越三行（本身一行，加上另外兩行）。因此，單元格1和單元格2在同一行，而單元格3和單元格4形成獨立的兩行。

綜合實例

ss

<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中tr間距的設定table合並單元格 colspan（跨列）和rowspan（跨行） table中tr間距的設定table合並單元格 colspan（跨列）和rowspan（跨行） table合並單元格colspan和rowspan table合並單元格colspan和rowspan Python---- table合並單元格colspan和rowspan easyui DataGrid表體單元格跨列rowspan jquery 合並單元格，rowspan

標簽總結（colspan跨列，rowspan跨行） HTML表格跨行、跨列操作(rowspan、colspan)

table合並單元格 colspan（跨列）和rowspan（跨行）

rowspan的作用是指定單元格縱向跨越的行數。

免責聲明！

`rowspan`的作用是指定單元格縱向跨越的行數。