rowspan属性怎么使用(autotian的博客)
生活随笔
收集整理的這篇文章主要介紹了
rowspan属性怎么使用(autotian的博客)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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">風君子博客</th>
</tr>
<tr>
<td>Tom</td>
<td>24</td>
</tr>
<tr>
<td>Marry</td>
<td>25</td>
</tr>
</table>
</body>
</html>
登錄后復制
效果如下
本篇文章到這里就全部結束了,更多前端精彩內容大家可以關注風君子博客相關欄目教程!!!
以上就是rowspan屬性怎么使用的詳細內容,更多請關注風君子博客其它相關文章!
總結
以上是生活随笔為你收集整理的rowspan属性怎么使用(autotian的博客)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 并查集路径压缩_并查集(UnionFin
- 下一篇: 公司增资需要什么流程呢