html里的table怎樣實現跨行和跨列

今天我們來做個小demo例子,實現下面兩個功能:

  1. 實現自定義跨n行

  2. 實現自定義跨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>

Advertisements

你可能會喜歡