1.单元格内的滚动条
.![]()
代码演示:
<table width="260" border="0" >
<tr><td bgcolor="#999999"><font color="#ffffff"><b>标题</b></font></tr>
<tr><td bgcolor=#cccccc">
<div style="overflow:auto;height:160;">
这里输入文本内容
</div>
</td></tr>
</table>
2.单元格水平对齐
![]()
析:
水平对齐方式,用align="#"属性说明,#为left(左对齐), right(右对齐), center(居中);垂直对齐方式,用valign="#"属性说明,#为top(上对齐), bottom(下对齐), middle(居中)。分别见下例,注意单元格里的内容与边框的的位置关系:
代码演示:
<table width="450" border="1">
<tr>
<td width="150">
<div align="left">内容左对齐</div>
</td>
<td width="150">
<div align="center">内容居中</div>
</td>
<td>
<div align="right">内容右对齐</div>
</td>
</tr>
</table>
3.单元格垂直对齐
![]()
代码如下:
<table width="150" border="1">
<tr>
<td height="40" width="146" valign="top">内容上对齐</td>
</tr>
<tr>
<td height="40" width="146" valign="middle">内容居中</td>
</tr>
<tr>
<td height="40" width="146" valign="bottom">内容下对齐</td>
</tr>
</table>
4.表格水平对齐
![]()
表格的水平摆放位置是用align="#" 属性说明的,#为left(左对齐), right(右对齐), center(居中)。分别见下例,注意这三个表格与边界的位置关系:
第三个表格的代码如下:
<table width="80" border="1" align="right" height="30">
<tr>
<td>右对齐</td>
</tr>
</table>
5.拆分表格
![]()
析:
colspan表示该一储存格向右打通的栏数。 rowspan表示该一储存格向下打通的栏数。
表格代码:
<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>
小结:
①如果表格比较复杂,最好采取嵌表格的形式,这样,可以少一些单元格之间相互干扰情况,而使单元格之间相对独立。
②在划分表格时,除了一些必要的高、宽设置外,将其它的高、宽设置全部删掉,一则减少了冗余代码,另则,也免除一些摸不着头脑的错误
③
1.整个表格不要都套在一个表格里,尽量拆分成多个表格。
2.表格的嵌套层次尽量要少,最好嵌套表格不超过3层。
3.单一表格的结构尽量整齐。
.

代码演示:
<table width="260" border="0" >
<tr><td bgcolor="#999999"><font color="#ffffff"><b>标题</b></font></tr>
<tr><td bgcolor=#cccccc">
<div style="overflow:auto;height:160;">
这里输入文本内容
</div>
</td></tr>
</table>
2.单元格水平对齐
析:
水平对齐方式,用align="#"属性说明,#为left(左对齐), right(右对齐), center(居中);垂直对齐方式,用valign="#"属性说明,#为top(上对齐), bottom(下对齐), middle(居中)。分别见下例,注意单元格里的内容与边框的的位置关系:
代码演示:
<table width="450" border="1">
<tr>
<td width="150">
<div align="left">内容左对齐</div>
</td>
<td width="150">
<div align="center">内容居中</div>
</td>
<td>
<div align="right">内容右对齐</div>
</td>
</tr>
</table>
3.单元格垂直对齐

代码如下:
<table width="150" border="1">
<tr>
<td height="40" width="146" valign="top">内容上对齐</td>
</tr>
<tr>
<td height="40" width="146" valign="middle">内容居中</td>
</tr>
<tr>
<td height="40" width="146" valign="bottom">内容下对齐</td>
</tr>
</table>
4.表格水平对齐
表格的水平摆放位置是用align="#" 属性说明的,#为left(左对齐), right(右对齐), center(居中)。分别见下例,注意这三个表格与边界的位置关系:
第三个表格的代码如下:
<table width="80" border="1" align="right" height="30">
<tr>
<td>右对齐</td>
</tr>
</table>
5.拆分表格
析:
colspan表示该一储存格向右打通的栏数。 rowspan表示该一储存格向下打通的栏数。
表格代码:
<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>
小结:
①如果表格比较复杂,最好采取嵌表格的形式,这样,可以少一些单元格之间相互干扰情况,而使单元格之间相对独立。
②在划分表格时,除了一些必要的高、宽设置外,将其它的高、宽设置全部删掉,一则减少了冗余代码,另则,也免除一些摸不着头脑的错误
③
1.整个表格不要都套在一个表格里,尽量拆分成多个表格。
2.表格的嵌套层次尽量要少,最好嵌套表格不超过3层。
3.单一表格的结构尽量整齐。
浙公网安备 33010602011771号