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

Posted 2023-04-15

一般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

参考技术A 可以在td里面设置padding，padding是对内边框的内容位置的确定，
格式<td style="padding: 上 右 下 左">内容</td> 参考技术B 可以在td里面设置padding，padding是对内边框的内容位置的确定，
格式<td style="padding: 上 右 下 左">内容</td> 参考技术C 用text-align属性控制

html怎么控制两个table间的间距

首先，你需要了解盒子模型，也就是说一个html元素的占位，从内到外，依次是：

content -> padding -> boder -> margin

再回到你的问题上，如果想要控制2个table之间的间距，我们可以设置他们的外边距，也就是margin这个属性（如果这2个table是挨在一起的话），margin用法很简单，你可以设置简单一点：

table
    margin：0 10px; // 控制table元素的上下边距为0，左右边距为10像素

参考技术A 可以设置两个table的外边距来控制两个table的间距