首頁 >web前端 >html教學 >rowspan屬性怎麼使用

rowspan屬性怎麼使用

不言
不言原創
2019-02-11 14:40:4317624瀏覽

HTML中的rowspan屬性指定單元格應跨越的行數。也就是說,如果一行跨越兩行,則表示它將佔用該表中兩行的空間。它允許單一表格儲存格跨越多個儲存格或行的高度。 rowspan屬性與Excel中的電子表格的「合併儲存格」有相同的功能。

rowspan屬性怎麼使用

rowspan屬性可以與HTML表中的和 元素一起使用。

rowspan屬性與

標籤一起使用時,rowspan屬性決定了它應跨越的標準單元格數。

當rowspan屬性與

標籤一起使用時,rowspan屬性決定它應該跨越的標題單元格的數量。

下面我們來看具體的範例

與標籤一起使用

程式碼如下

<!DOCTYPE rowspan屬性怎麼使用>  
<rowspan屬性怎麼使用>  
    <head>  
        <title>HTML rowspan</title>  
        <style> 
            table, th, td { 
                border: 1px solid black; 
                border-collapse: collapse; 
                padding: 6px; 
            } 
        </style> 
    </head>  
    <body style = "text-align:center">  
  
        <table> 
            <tr> 
                <th>Name</th> 
                <th>Age</th> 
            </tr> 
            <tr> 
                <td>Tom</td> 
                <!-- This cell will take up space on  
                    two rows -->
                <td rowspan="2">24</td> 
            </tr> 
            <tr> 
                <td>Marry</td> 
            </tr> 
        </table> 
    </body>  
</rowspan屬性怎麼使用>

效果如下

rowspan屬性怎麼使用

與標籤一起使用時

程式碼如下

<!DOCTYPE rowspan屬性怎麼使用>  
<rowspan屬性怎麼使用>  
    <head>  
        <title>HTML rowspan</title>  
        <style> 
            table, th, td { 
                border: 1px solid black; 
                border-collapse: collapse; 
                padding: 6px; 
            } 
        </style> 
    </head>  
      
    <body style = "text-align:center"> 
          
        <table> 
            <tr> 
                <th>Name</th> 
                <th>Age</th> 
                <!-- This cell will take up space  
                    in 3 rows -->
                <th rowspan="3">php中文网</th> 
            </tr> 
            <tr> 
                <td>Tom</td> 
                <td>24</td> 
            </tr> 
            <tr> 
                <td>Marry</td> 
                <td>25</td> 
            </tr> 
        </table> 
    </body>  
</rowspan屬性怎麼使用>

效果如下

rowspan屬性怎麼使用

這篇文章到這裡就全部結束了,更多前端精彩內容大家可以關注php中文網相關欄位教學! ! !


以上是rowspan屬性怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn