rowspan table布局_table中colspan和rowspan的用法详解

在web开发的过程中，我们常常会使用table来布局页面。利用table布局，往往不可避免的需要使用到跨列和跨行。本文通过实例为您介绍table中colspan和rowspan的用法。

我们来看看colspan和rowspan这两个属性。colspan

属性规定单元格可横跨的列数，rowspan属性规定单元格可占据的行数。这两个属性通常在th和td标签上面使用。

首先我们来看一下跨列的用法。下面给出了一段最基本的table表格的代码，没有使用跨行和跨列。

1

2

3

4

5

6

<td>td>

7

tr>

8

<tr>

9

<td>td>

10

<td>td>

11

<td>td>

12

<td>td>

13

tr>

14

<tr>

15

<td>td>

16

<td>td>

17

<td>td>

18

<td>td>

19

tr>

20

table>

我们可以看到，每一对tr中的td标签都是相同的。在没有使用colspan属性的情况下，如果每一组tr(每一行)中的td标签不对等，就会出现如下图所示的情况。

第二行中由于笔者故意少写了两对td表格，因此我们可以看出这行中就出现了两个单元格的空白。这是很低级的错误。

由此可见，每组tr中的单元格数目对等是很重要的。

那么，假如我确实只需要第二行出现两个单元格，怎么办呢？这时候我们就需要使用colspan属性了。

我们看一下正常的一行一共有4对td，即4个单元格。而第二行只写了两对td，因此我们需要使用colspan进行补全。设置对应的td中的colspan=‘3’，我们得到下面的显示效果：

为什么使用colspan=’3′？这里简单解释一下，原理很简单：

因为我们上面已经提出了，需要每一组tr中的td数目是对等的，因此

等同于。

关于colspan的用法只介绍这么多了，别的其实也没什么。再怎么复杂的页面也都是可以使用多个colspan组合来进行排版。

接下来再来解释一下rowspan的用法。

rowspan表示某一组td标签(一个单元格)可以占据多行。这个属性在很多情形下是很有用的。比如在数据表格中，同一个日期可能会对应多条结果，我们可能只需要日期出现一次。如下图所示：

我们来详细分析一下该效果的html代码：

1

<table>

2

<tr>

3

<td

width="200">时间td>

4

<td

width="300">结果td>

5

tr>

6

<tr>

7

<td

rowspan="4"

valign="top">20100518td>

8

<td>1td>

9

tr>

10

<tr>

11

<td>2td>

12

tr>

13

<tr>

14

<td>3td>

15

tr>

16

<tr>

17

<td>4td>

18

tr>

19

table>

我在第二组tr中的第一对td上使用了rowspan=’4′，即表示该单元格将占据4行的位置。这是很好理解的，需要占几行就使用rowspan等于几。

也许难以理解的是接下来的几组tr中的td。为什么每一行只有一对td？

还记得我们前面说过每行中的td数目必须对等吗？观察上面的代码，我们不难发现，一个正常的行(tr)一共包含两个单元格，即两组td。也就是说上述代码中的每组tr标签中的td数目应该是两对。

由于我们在第二组tr中的第一个td使用了rowspan属性，也就是说该单元格占据了多行位置。那么接下来的相应的行数的对应单元格就不需要再通过td表示了。

比如说第三行(代码中的第三组tr)，由于这一行的第一个单元格被第二行的第一个单元格占掉了，那么结果呢？结果就是这一行只剩下一个单元格的位置了。因此我们在接下来的几组tr中只写了一对td标签。

在web项目开发过程中灵活使用colspan和rowspan，不仅可以是页面布局更加整洁，而且可以使得代码更简洁、明朗。