rowspan属性怎么使用(autotian的博客)
生活随笔
收集整理的這篇文章主要介紹了
rowspan属性怎么使用(autotian的博客)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
HTML中的rowspan屬性指定單元格應(yīng)跨越的行數(shù)。也就是說,如果一行跨越兩行,則意味著它將占用該表中兩行的空間。它允許單個表格單元格跨越多個單元格或行的高度。rowspan屬性與Excel中的電子表格的“合并單元格”有相同的功能。
rowspan屬性可以與HTML表中的<td>和<th>元素一起使用。
rowspan屬性與<td>標(biāo)簽一起使用時,rowspan屬性決定了它應(yīng)跨越的標(biāo)準(zhǔn)單元格數(shù)。
當(dāng)rowspan屬性與<th>標(biāo)簽一起使用時,rowspan屬性確定它應(yīng)該跨越的標(biāo)題單元格的數(shù)量。
下面我們來看具體的示例
與<td>標(biāo)簽一起使用
代碼如下
<!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>
登錄后復(fù)制
效果如下
與<th>標(biāo)簽一起使用時
代碼如下
<!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">風(fēng)君子博客</th>
</tr>
<tr>
<td>Tom</td>
<td>24</td>
</tr>
<tr>
<td>Marry</td>
<td>25</td>
</tr>
</table>
</body>
</html>
登錄后復(fù)制
效果如下
本篇文章到這里就全部結(jié)束了,更多前端精彩內(nèi)容大家可以關(guān)注風(fēng)君子博客相關(guān)欄目教程!!!
以上就是rowspan屬性怎么使用的詳細(xì)內(nèi)容,更多請關(guān)注風(fēng)君子博客其它相關(guān)文章!
總結(jié)
以上是生活随笔為你收集整理的rowspan属性怎么使用(autotian的博客)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 并查集路径压缩_并查集(UnionFin
- 下一篇: 公司增资需要什么流程呢