有位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; " οnmοuseοver="this.style.backgroundColor='green'" οnmοuseοut="this.style.backgroundColor='red'" >距离</div>
</td>