html5 如何控制table中文字的位置

一般table如:

<table id="tb1"> 

     <tr>

       <td>文字1</td>

       <td><div>文字2</div></td>

     </tr> 

</table>

HTML中td标签有两个常用的属性可以控制内容位置

valign

控制垂直位置, align 属性规定单元格中内容的水平对齐方式。

值               描述

top        对内容进行上对齐。    

 middle  对内容进行居中对齐（默认值）。    

 bottom 对内容进行下对齐。    

 baseline   与基线对齐。   

align

属性规定单元格中内容的水平对齐方式。

值         描述

left       左对齐内容（默认值）。    

right    右对齐内容。    

center  居中对齐内容。

justify  对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。  

char    将内容对准指定字符。  

例如要让"文字1"居中代码如下:

<table id="tb1"> 

     <tr>

       <td valign="middle" align="center" >文字1</td>

       <td><div>文字2</div></td>

     </tr> 

</table>

如果用CSS可以这样:

<style type="text/css">

#tb1 td.txt1{   /** 文字1居中 */

    vertical-align: middle  /**垂直居中*/

    text-align:center  /**水平居中 */

}

#tb1 td.txt2 div{  /**文字2*/

   text-align:right  /**水平右对齐 */

}

</style>

<table id="tb1"> 

     <tr>

       <td class="txt1">文字1</td>

       <td class="txt2"><div>文字2</div></td>

     </tr> 

</table>

另外实际应用中还有更多方法,例如position或者float等CSS方法.

参考网址:

http://www.w3school.com.cn/tags/att_td_align.asp

http://www.w3school.com.cn/tags/att_td_valign.asp

通过css控制

text-indent:20px          表示缩进20像素

padding：20px            表示内距20像素，可以拆分成padding-left,padding-right,padding-top,padding-bottom,分别对四个方向控制，基于他的parent元素

margin:20px                表示外距20像素。跟padding类似，不过跟padding不同的padding会导致块被撑大，而margin会导致块偏移

position:absoluteleft:10pxtop:10px        采用决定定位，基于父级以上（使用了定位方有效）绝对定位，left和top为偏移，同样还有right，bottom做四个方向的偏移控制

float:right           块浮动，可选left，right。这个属性会将元素从同级元素的占位中浮起来，不占位，并基于父元素做漂浮到左边或右边，不占位，跟普通元素会重叠，但是跟同样带float的可以有体积碰撞行成排列对齐的作用。

color:red          表示字体是红色。属性可以以常见的颜色单词，常用的采用RGB色值表示，比如#FFFFFF表示白色

1、打开Hbuilder编辑器，新建一个html空白文档，输入基本的结构，这里设置一个外围的div盒子，给外围的div高度宽度和背景颜色，文字包裹到span标签里，文字也设置一下颜色，按下Crtl+S保存一下：

2、此时可以在软件右侧的窗口可以看到效果：

3、把外围盒子的position属性设置为relative，span标签里的position属性设置为absolute，设置top、left、right、bottom的数值，此时在右侧的窗口就会发现文字的位置已经改变了：

---