導讀跟大家講解下有關rowspan屬性怎么使用,相信小伙伴們對這個話題應該也很關注吧,現在就為小伙伴們說說rowspan屬性怎么使用,小編也收集到了
跟大家講解下有關rowspan屬性怎么使用,相信小伙伴們對這個話題應該也很關注吧,現在就為小伙伴們說說rowspan屬性怎么使用,小編也收集到了有關rowspan屬性怎么使用的相關資料,希望大家看到了會喜歡。
HTML中的rowspan屬性指定單元格應跨越的行數。也就是說,如果一行跨越兩行,則意味著它將占用該表中兩行的空間。它允許單個表格單元格跨越多個單元格或行的高度。rowspan屬性與Excel中的電子表格的“合并單元格”有相同的功能。rowspan屬性可以與HTML表中的<td>和<th>元素一起使用。
rowspan屬性與<td>標簽一起使用時,rowspan屬性決定了它應跨越的標準單元格數。
當rowspan屬性與<th>標簽一起使用時,rowspan屬性確定它應該跨越的標題單元格的數量。
下面我們來看具體的示例
與<td>標簽一起使用
代碼如下
<!DOCTYPE html> <html> <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> </html>效果如下
與<th>標簽一起使用時
代碼如下
<!DOCTYPE html> <html> <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> </html>效果如下
本篇文章到這里就全部結束了,更多前端精彩內容大家可以關注php中文網相關欄目教程!!!
以上就是rowspan屬性怎么使用的詳細內容,更多請關注php中文網其它相關文章!
來源:php中文網