简单标准表格:
Html命令:
<table border="1" style="height: 80px;"><tbody>
<tr valign="top"><td>第1行第1列</td><td>第1行第2列</td></tr>
<tr valign="top"><td>第2行第1列</td><td>第2行第2列</td></tr>
<tr valign="top"><td>31</td><td>32</td></tr>
<tr valign="top"><td>41</td><td>42</td></tr>
</tbody></table>
第1行第1列 | 第1行第2列 |
第2行第1列 | 第2行第2列 |
31 | 32 |
41 | 42 |
上下合并的表格、并可加表格线颜色:
Html命令:
<div>
<table border="2" bordercolor="#288822" cellpadding="3" cellspacing="2" style="width: 100%;"><tbody>
<tr valign="top"><td rowspan="2"><div>11</div></td><td><div>12</div></td></tr>
<tr valign="top"><td><div>21</div></td></tr>
<tr valign="top"><td><div>31</div></td><td><div>32</div></td></tr>
</tbody></table>
</div>
11
|
12
|
21
| |
31
|
32
|
左右合并的表格、并可加表格线颜色:
Html命令:
<div>
<table border="2" bordercolor="#288822" cellpadding="3" cellspacing="2" style="width: 100%;"><tbody>
<tr valign="top"><td colspan="2"><div>11 Merge</div></td></tr>
<tr valign="top"><td Style="width: 50%;"><div>21</div></td><td><div>12</div></td></tr>
<tr valign="top"><td><div>31</div></td><td><div>32</div></td></tr>
</tbody></table>
</div>
11 Merge
| |
21
|
12
|
31
|
32
|
实例1:
合并格
| ||
11
|
12
|
13
|
21
|
22
|
23
|
31
|
32
|
33
|
41
|
42
|
43
|
51
|
52
|
53
|
<div>
<table border="2" bordercolor="#288822" cellpadding="3" cellspacing="2" style="width: 100%;"><tbody>
<tr valign="top"><td colspan="3"><div>合并格</div></td></tr>
<tr valign="top"> <td style="width: 33%;"><div>11</div></td><td style="width: 33%;"><div>12</div></td><td><div>13</div></td></tr>
<tr valign="top"> <td style="width: 33%;"><div>21</div></td><td style="width: 33%;"><div>22</div></td><td><div>23</div></td></tr>
<tr valign="top"> <td style="width: 33%;"><div>31</div></td><td style="width: 33%;"><div>32</div></td><td><div>33</div></td></tr>
<tr valign="top"> <td style="width: 33%;"><div>41</div></td><td style="width: 33%;"><div>42</div></td><td><div>43</div></td></tr>
<tr valign="top"> <td style="width: 33%;"><div>51</div></td><td style="width: 33%;"><div>52</div></td><td><div>53</div></td></tr>
</tbody></table>
</div>
实例2:
合并格
| ||
11
|
12
|
13
|
21
|
22
| |
31
|
32
|
33
|
41
|
42
| |
51
|
52
|
53
|
<div><table border="2" bordercolor="#288822" cellpadding="3" cellspacing="2" style="width: 100%;"><tbody>
<tr valign="top"><td colspan="3"><div>合并格</div></td></tr>
<tr valign="top"> <td rowspan="2" style="width: 33%;"><div>11</div></td><td style="width: 33%;"><div>12</div></td><td><div>13</div></td></tr>
<tr valign="top"> <td style="width: 33%;"><div>21</div></td><td style="width: 33%;"><div>22</div></td></tr>
<tr valign="top"> <td rowspan="2" style="width: 33%;"><div>31</div></td><td style="width: 33%;"><div>32</div></td><td><div>33</div></td></tr>
<tr valign="top"> <td style="width: 33%;"><div>41</div></td><td style="width: 33%;"><div>42</div></td></tr>
<tr valign="top"> <td style="width: 33%;"><div>51</div></td><td style="width: 33%;"><div>52</div></td><td><div>53</div></td></tr>
</tbody></table></div>
实例3:
合并格
| ||
11
|
12
|
13
|
22
| ||
32
|
33
| |
41
|
42
|
43
|
51
|
52
|
<div>
<table border="2" bordercolor="#288822" cellpadding="3" cellspacing="2" style="width: 100%;"><tbody>
<tr valign="top"><td colspan="3"><div>合并格</div></td></tr>
<tr valign="top"> <td rowspan="3" style="width: 33%;"><div>11</div>
</td><td rowspan="2" style="width: 33%;"><div>12</div></td><td><div>
13</div></td></tr>
<tr valign="top"> <td style="width: 33%;"><div>22</div></td></tr>
<tr valign="top"> <td style="width: 33%;"><div>32</div></td><td style="width: 33%;"><div>33</div></td> </tr>
<tr valign="top"> <td rowspan="2" style="width: 33%;"><div>
41</div></td><td style="width: 33%;"><div>42</div></td> <td style="width: 33%;"><div>43</div></td></tr>
<tr valign="top"> <td style="width: 33%;"><div>51</div></td><td style="width: 33%;"><div>52</div></td></tr>
</tbody></table></div>