最新更新 sitemap 设计搜素
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
网上家居 虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442

HTML中级指南--表格

日期:09-02    来源:HTMLDog|    作者:HTMLDog

表格在HTML初级指南中看起来够复杂的了。也是,在一维的代码中表现二维的格确实有些困难。

嗯,它需要技巧。感谢rowspancolspan属性。这两个臭杂种。

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

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

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

与那个简单的3x4,12个单元格的表格,我们也来算一下这些有合并单元格的表格数目。尽管只有10个单元格,但里面包含了2个跨越。