Chinaunix首页 | 论坛 | 博客
  • 博客访问: 646804
  • 博文数量: 329
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 693
  • 用 户 组: 普通用户
  • 注册时间: 2015-01-05 23:37
个人简介

Do not panic!

文章存档

2021年(1)

2018年(3)

2017年(7)

2016年(98)

2015年(220)

我的朋友

分类: Html/Css

2015-10-21 17:51:59

原文地址:html中table的使用方法 作者:chenmeng11

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。

阅读(532) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~