文章目錄
- colspan和rowspan
- colspan
- rowspan
- 代碼案例
colspan和rowspan
colspan和rowspan這兩個屬性用于創建特殊的表格，
colspan
colspan用來指定單元格橫向跨越的列數：colspan就是合并列的，colspan=2的話就是合并兩列，
rowspan
rowspan用來指定單元格縱向跨越的行數:rowspan就是用來合并行的，比如rowspan=2就是合并兩行，
- rowspan通常使用在td和th標簽中
- row:行,span:跨度,跨距,范圍
- col:列,span:跨度,跨距,范圍
代碼案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="300">
<caption>標準</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
<br><br>
<table border="10">
<caption>合并</caption>
<tr>
<td>小組成員</td>
<td colspan="2" align="center">性別</td>
<td>年齡</td>
</tr>
<tr>
<td align="center">楊小菜</td>
<td>男√</td>
<td>女 </td>
<td>20</td>
</tr>
<tr>
<td align="center">楊大菜</td>
<td>男 </td>
<td>女√</td>
<td>20</td>
</tr>
<tr>
<td align="center">張大仙</td>
<td>男 </td>
<td>女√</td>
<td>20</td>
</tr>
<table border="1" width="300">
<caption>合并第一行的三列</caption>
<tr>
<td colspan=3>合并第一行的三列</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</br>
<table border="1" width="300">
<caption>合并第一行的兩列</caption>
<tr>
<td rowspan="2">合并第一列的兩行</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
</table>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/243855.html
標籤：其他