|
<td>标记的常用语法格式为:
<td width = 宽度 height = 高度 align = 水平对齐方式 valign = 垂直对齐方式 height = 行高 background = 背景图案 bgcolor = 背景色 bordercolor = 边界颜色 bordercolordark = 边界背光部分的颜色 bordercolorlight =边界向光部分的颜色 colspan = 跨列数 rowspan = 跨行数 nowrap>
……
</td>
可以看出,<td>的很多属性和<table>、<tr>的相应属性是一样的。所不同的是,<table>、<tr>的各个属性,设置的是整个表格或某一行的显示情况,而<td>属性只用于设置相应单元格的显示情况。当<td>属性值的设置和<table>、<tr>的同名属性值不同时,一般以<td>属性值为准。但也有例外,例如,在<tr>中已经设置了行的高度height属性值,则在行的<td>中设置的行高height值如果和<tr>中设置的不同,以<tr>中设置的行高为准,除非该行的所有单元格都设置了同一个height属性值。 <td>标记的一些和<table>或<tr>不同的属性的意义如下: ● colspan:该单元格在水平方向上跨的列数,默认为1。 ● rowspan:该单元格在垂直方向上跨的行数,默认为1。colspan和rowspan是为制作复杂表格准备的,具体使用见例子。 ● nowrap:如果单元格格中的内容超过了单元格的宽度,则用此属性禁止内容折行显示。 【例5】<td>标记的进一步使用。
<html>
<head>
<title>itsway -- 表格</title>
</head>
<body bgcolor = "#eeffee">
<p></p>
<!--第一个表格开始-->
<table width = "400" border="5" bordercolor = "maroon">
<tr>
<td rowspan = "2" background = "background1.jpg" align = "center">
学生成绩表
</td>
<td colspan = "3" align = "center">科目</td>
</tr>
<tr height = "50" valign = "middle">
<td valign = "bottom" height = "30">数学</td>
<td valign = "top">物理</td>
<td>化学</td>
</tr>
<tr >
<td width="50%">
打遍天下无敌手----金面佛 苗人凤
</td>
<td align = "center">75</td>
<td align = "center">85</td>
<td align = "center">77</td>
</tr>
<tr height = "50">
<td height = "30">单元格设置的行高被屏蔽</td>
<td>62</td><td>60</td><td>55</td>
</tr>
</table><!--第一个表格结束-->
<p></p>
<!--第二个表格开始-->
<table width = "400" border="5" bordercolor = "maroon">
<tr >
<td width="50%" nowrap>
打遍天下无敌手----金面佛 苗人凤
</td>
<td>75</td><td>85</td><td>77</td>
</tr>
</table><!--第二个表格结束-->
</body>
</html>
在Firefox中的显示效果如下图所示。
在本例中的第一个表格的第一行的两个单元格是这样定义的:
<td rowspan = "2" background = "background1.jpg" align = "center">
学生成绩表
</td>
<td colspan = "3" align = "center">科目</td>
第一个单元格跨两行,即它和下面一行的相应单元格合并为一个单元格;第二个单元格跨三行,即本来和下面三列对应的三个单元格合并为一个单元格。这在图中显示得很清楚,请读者仔细体会它们的用法,这是制作复杂表格必须用到的关键属性。 在本例中的第二个表格中只有一行,它的第一个单元格是这样定义的:
<td width="50%" nowrap>
打遍天下无敌手----金面佛 苗人凤
</td>
在这里,因为单元格内容不是50%表格宽度所能容纳得下的,并且不能折行显示(使用了nowrap属性),所以该单元格只能适当延伸。请对比第一个表格的相应行,读者可以更清楚地看到nowrap的作用。
上一篇:5.3 <tr>标记 下一篇:5.5 colspan、rowspan属性的进一步使用。
|