关于table中rowspan及colspan的用法

 

rowspan：合并一列中两个或多个单元格；rowspan属性意为“跨越行”，它跨越的单元格应该被删除。

rowspan="2"表示这个单元格占据多少行(这里占了两行)

colspan：合并一行的两个或多个单元格;colspan属性意为“列跨越”，将会跨越指定数目的单元格。

colspan="3"表示这个单元格占据多少列(这里表示占了三列)

在Dreamweaver中，可以通过属性面板对表格进行合并与拆分。

 

1.普通的三行三列的表格

a	b	c
d	e	f
g	h	i

Code:
<table width="200" border="1" cellspacing="2">
  <tbody><tr>
    <td>&nbsp;a</td>
    <td>&nbsp;b</td>
    <td>&nbsp;c</td>
  </tr>
  <tr>
    <td>&nbsp;d</td>
    <td>&nbsp;e</td>
    <td>&nbsp;f</td>
  </tr>
  <tr>
    <td>&nbsp;g</td>
    <td>&nbsp;h</td>
    <td>&nbsp;i</td>
  </tr>
</tbody></table>

---

2.有跨行(rowspan)及跨列(colspan)的表格

abc	a	b
	c	d
e	def

Code:
<table width="200" border="1" cellspacing="2">
  <tbody><tr>
    <td rowspan="2" bgcolor="#d8d8d8">abc</td>
    <td>&nbsp;a</td>
    <td>&nbsp;b</td>
  </tr>
  <tr>
    <td>&nbsp;c</td>
    <td>&nbsp;d</td>
  </tr>
  <tr>
    <td>&nbsp;e</td>
    <td colspan="2" bgcolor="#d8d8d8">def</td>
  </tr>
</tbody></table>
值为abc的cell跨了两行，用rowspan=2来表示，第一个<tr>对之间有三个<td>对;而第二个<tr>对之间只有两个<td>对，因为abc所在的cell已经算在第一行了;而第三个tr对因为只有两个cell，因此只有两个td对，def所在的cell跨了两列，用colspan=2来表示。

如果把这个表格的写法完全弄懂了，则以后其它的跨行及跨列的表格就不算很难了，这里说的是手写代码，而不是用类似于Dreamweaver所见即所得之类的编辑器来编辑。