单元格中的文字位置及式样

有位e友时常问我，关于文字在单元格中位置的问题。有时间就总结一下:

 

      在单元格<TD>中,对于文字位置。我们时常都会想到用align="left"、align="right"、align="center"。这些语句只能模糊的设置文字在单元格中的方位位置。

但无法精确的设置。比如文字距左（右，上，下）边距10PX。

      对于这种情况，可以使用div层的。

      在<TD>中插入层<div> ，你就可以设置层的属性，来控制div层中的文字，距单元格边框的距离。

 

比如：让文字“距离”在<td>中距左边框50PX、距上边框0px:

 

      <td width="200"><div style="position:relative;left:50px;top:0px; "  >距离</div></td>

 

对于距右、距下，方法一样right、bottom。

应该注意的是这里position:relative，它是设置该div层的相对位置,不可以省略。

 

position:absolute是绝对位置，顾名思义即是该div层在网页中的绝地位置（不受单元格的约束）。只需测试以下的代码，你就明白二者的区别：

 <td width="200"><div style="position:relative;left:50px;top:0px; "  >距离</div></td>

 

<td width="200"><div style="position:absolute;left:50px;top:0px; "  >距离</div></td>

 

对于文字的颜色和式样，都可以在div层中的Style中自己设置比如：

 <td width="200"><div style="position:relative;left:50px;top:0px; color:red; "  >距离</div></td>

设置Div层的背景颜色可以在style里面加background:blue。

<td width="200"><div style="position:relative;left:50px;top:0px; color:red;background:blue; "  >距离</div></td>

 

当然你也可以用onmouseover和onmouseout事件来控制鼠标移动到层上时的颜色。

<td width="200">

<div style="position:relative;left:50px;top:0px; color:red; " onmouseover="this.style.backgroundColor='green'" onmouseout="this.style.backgroundColor='red'" >距离</div>

</td>