关注联楷|返回首页 | 网站案例 | 帮助中心

合作共赢、快速高效、优质的网站建设提供商

上海网站建设 

服务热线:021-61394118

上海联楷科技

网站html表格单行占多列和单列占多行方法

作者:佚名   时间:2014-04-17   分享到:

网站表格单行占多列和单列占多行方法!
cospan属性

用一个表格表头来描述表格下有几列,这是通常情况下的处理方法,我们在表10-1就用了表格表头。在表格表头或数据标签中使用colspan属性,可以将一行中的一个表格单元格扩展为两列或更多列。将colspan属性的值设为你希望扩展到的表头或数据单元格的个数。例如:<td colspan=”3”>会告诉浏览器让单元格占据它前面或后面3个单元格大小的水平宽度。浏览器会让单元格内容充满整个空间。
<p>如果在右面没有足够的单元格,那怎么办呢?浏览器会将单元格扩展到它能扩展到的最多列数,它不会在每行后增加多的空白单元格来容纳多余的colspan设置。可以在一行上增加所需但是无内容的单元格来解决这个问题。(如果你希望Netscape 为它们设置镶嵌边框的话,在它们的内容中加上一个<br>标签就行了。)
rowspan属性
<p>如同cospan属性将一个表格单元格扩展为几列一样,rowspan属性将一个单元格扩展到表格中的上下几行.在你希望单元格开始的地方,在<th>或<td>标签的最上行中包括rowspan属性,并将其值设为你希望它扩展的行数。然后单元格会占据当前行和其后的几行。浏览器会将单元格的内容填满整个扩展空间。例如:<td rowspan="3“>会创建一个单元格,它占据当前行和其下面的两行。
<p>和colspan属性类似,浏览器会忽略那些扩展过度的rowspan属性,并且只将当前单元格扩展到该行后明确用<tr>标签定义的行。浏览器不会在一个表格内添加空白行,以填补表格内最后定义的一行后的空间。
将colspan和rowspan结合起来
<p>通过在表格表头或数据标签中既包括colspan属性又包括}owspan属性,可以将一个单元格扩展几行和几列。例如:<th colspan="3" rowspan="4">会如你希望的那样,创建一个单元格,跨越三列四行,包括当前单元格,再向右扩展两列,向下扩展三行。浏览器会将单元格的内容扩展到整个空间,根据当前列的对齐方式或那些在同一标签中包括的属性来对齐,如我们前面说过的那样。



如没特殊注明,文章均为上海联楷网络原创,转载请注明来自:http://www.linksj.com/contact/20151229/n7289.html

上海联楷网络新闻