日期:2014-04-12  浏览次数:20511 次

  2、表格的水平摆放位置

  表格的水平摆放位置是用align="#" 属性说明的,#为left(左对齐), right(右对齐), center(居中)。分别见下例,注意这三个表格与边界的位置关系:


左对齐
center
右对齐

第三个表格的代码如下:
<table width="80" border="1" align="right" height="30">
<tr>
<td>右对齐</td>
</tr>
</table>

  3、单元格里内容的位置属性

  水平对齐方式,用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>

垂直对齐方式
内容上对齐
内容居中
内容下对齐

代码如下:
<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、表格的背景色、背景图片,单元格的背景色、背景图片

  背景色属性:bgcolor="#" ,背景图片属性:background="#"。

见下例:
   
   
   

代码如下:
<table width="450" border="1" bgcolor="#539996" bordercolor="#FFFFFF" height="90">
<tr>
<td> </td>
<td background="Back01.gif"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#FF0000"> </td>
<td> </td>
</tr>
</table>

  说明:在上例中,整个表格的背景色是 bgcolor="#539996" ,第一行第二列的单元格背景图片是 background="Back01.gif" ,第三行第二列的单元格背景色是 bgcolor="#FF0000" ,根据显示结果可以看出:设置表格的背景色后再设置单元格的背景色或背景图片,将优先显示单元格的属性。

  5、表格属性cellspacing、cellpadding