html table的高级使用方法,(转载)html中table的使用方法

colspan表示该一储存格向右打通的栏数。 rowspan表示该一储存格向下打通的栏数。

colspan是表示横向合并单元格，colspan=“3”表示水平合并三个td

rowspan是表示竖直合并单元格，rowspan=“2” 表示竖直合并两个td

源代码：

第四个

第五个第八个第六个第七个第九个

看下面的表格：

表格代码：

＜table width=”450″ border=”1″ cellspacing=”0″ cellpadding=”2″ bordercolor=”#009900″＞

＜tr＞

＜td＞第一行第一栏＜/td＞

＜td colspan=”2″＞第一行的第二、三栏＜/td＞

＜/tr＞

＜tr＞

＜td rowspan=”2″＞第二行及第三行 的 第一栏＜/td＞

＜td＞第二行第二栏＜/td＞

＜td＞第二行第三栏＜/td＞

＜/tr＞

＜tr＞

＜td＞第三行第二栏＜/td＞

＜td＞第三行第三栏＜/td＞

＜/tr＞

＜/table＞

你可能看的不大明白。如果借助于Dreamweaver来再现表格制作过程，相信你会很快明白其中的奥秘。先制作一个三行三列的表格(这可以说是上面表格的“原形”)，见下图，然后将第一行的第二、三栏合并，第二行的第一栏、第三行第一栏合并，这样就得到了上例中的表格。你可以自己动手检验一下。

第一行第一栏

第一行第二栏

第一行第三栏

第二行第一栏

第二行第二栏

第二行第三栏

第三行第一栏

第三行第二栏

第三行第三栏

熟练掌握表格的colspan、 rowspan属性，可以随心所欲的制作出复杂的表格。

2、表格中的标题列

＜CAPTION＞ 的作用是为表格标示一个标题列，如同在表格上方加一没有格线的打通列，通常用来存放表格标题，参数有 align、 valign。

align表示表格标题列相对于表格的对齐方式(水平)，可选值为： left, center, right, top, middle, bottom，若 align=”bottom” 的话标题列便会出现在表格的下方，不管你 的原代码是把 ＜caption＞ 放在 ＜table＞ 中的头部或尾部。

valign表示表格标题列相对于表格的对齐方式(上下)，可选值为： top, bottom。