html里的table怎樣實現跨行和跨列
今天我們來做個小demo例子,實現下面兩個功能:
實現自定義跨n行
實現自定義跨n列
先畫好一個div,居中,然未來明顯,給div一個邊框,給定寬高。然後在div里畫一個table,設置border=1,這樣就很會有明顯的條紋了。
跨行:rowspan="3"
跨列:colspan="3"
代碼如下:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
#content{width:1000px;height:900px;border:1px solid red;margin:0 auto;}
Advertisements
</style>
</head>
<body>
<div id="content">
<table border=1 width=98%>
<tr>
<td><input type="checkbox" value="全選" /></td>
<td colspan="2">我跨2列啦</td>
</tr>
<tr>
<td><input type="checkbox" value="全選" /></td>
<td>11111111111</td>
Advertisements
<td>11111111111</td>
</tr>
<tr>
<td><input type="checkbox" value="全選" /></td>
<td>22222222222</td>
<td>22222222222</td>
</tr>
<tr>
<td><input type="checkbox" value="全選" /></td>
<td>33333333333</td>
<td>33333333333</td>
</tr>
<tr>
<td><input type="checkbox" value="全選" /></td>
<td>44444444444</td>
<td>44444444444</td>
</tr>
<tr>
<td><input type="checkbox" value="全選" /></td>
<td align="center" rowspan="3">我跨3行啦</td>
<td>55555555555</td>
</tr>
<tr>
<td><input type="checkbox" value="全選" /></td>
<td>66666666666</td>
</tr>
<tr>
<td><input type="checkbox" value="全選" /></td>
<td>7777777777</td>
</tr>
</table>
</div>
</body>
</html>