论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

{XHTML}HTML中级教程表格

文章类别:div+css布局 | 发表日期:2008-9-26 11:42:21

表格在HTML初级教程中看起来够复杂的了。也是,在一维的代码中表现二维的格确实有些困难。
嗯,它需要技巧。感谢rowspan和colspan属性。这两个臭杂种。

下面的代码跟HTML初级指南中的表格教程类似。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<table border=\"1\">
<tr>
<th>Column 1 heading</th>
<th>Column 2 heading</th>
<th>Column 3 heading</th>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td colspan=\"2\">Row 2, cell 2, also spanning Row 2, cell 3</td>
</tr>
<tr>
<td rowspan=\"2\">Row 3, cell 1, also spanning Row 4, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>

首先,我们在第一行中用td标签取代了th标签。td是标准的数据单元格,th是单元格表头。像td标签一样,这些th标签也要用在tr标签里边。

在一些td标签中,我们用到了colspan和rowspan属性。在浏览器中查看,你会发现,在第二行中两个单元格代替了三个,第二个单元格横跨了两列。colspan属性,意即“列跨越”,将会跨越指定数目的单元格。就是说,在这个例子中不再需要第三个td标签──两个单元格个已经合并成一个。

rowspan属性跟colspan属性类似,显而易见,它将跨越行。又,它跨越的单元格应该被删除。在这个例子中,因为它跨越了四行,这一行只有两个单元格。

与那个简单的3x4,12个单元格的表格,我们也来算一下这些有合并单元格的表格数目。尽管只有10个单元格,但里面包含了2个跨越。
上一篇:{XHTML}HTML中级教程Javascript 人气:4230
下一篇:{XHTML}HTML初级教程综合应用 人气:4319
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058