table表单td左右对齐、居中对齐和两端对齐的设置方法

table表单中td标签如何实现左对齐、右对齐、居中对齐和两端对齐?新手站长网分享:

td标签左右对齐、居中对齐和两端对齐的方法

table表单中td的对齐方法分为左对齐、右对齐和两端对齐三种方式,可以通过td标签的align属性来设置,也可以通过html的style属性来设置:

方法一:通过td标签的align属性来设置

代码如下:

<table> <tr> <th>左对齐</th> <th>右对齐</th> <th>居中对齐</th> <th>两端对齐</th> </tr> <tr> <td align=”left”>我是左对齐</td> <td align=”right”>我是右对齐</td> <td align=”center”>我是居中齐</td> <td align=”justify”>我是两端对齐</td> </tr> </table>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 < table >    < tr >      < th >左对齐 < / th >      < th >右对齐 < / th >      < th >居中对齐 < / th >      < th >两端对齐 < / th >    < / tr >    < tr >      < td align = “left” >我是左对齐 < / td >      < td align = “right” >我是右对齐 < / td >      < td align = “center” >我是居中齐 < / td >      < td align = “justify” >我是两端对齐 < / td >    < / tr > < / table >

效果如下:

table左右、居中、两端对齐效果图

方法二:通过html的style属性来设置

例如:td左对齐可以使用html的style属性来实现,即:

  • 左对齐:text-align:left;
  • 右对齐:text-align:right;
  • 居中对齐:text-align:center;
  • 两端对齐:text-align: justify;
  • 代码如下:

    <table> <tr> <th>左对齐</th> <th>右对齐</th> <th>居中对齐</th> <th>两端对齐</th> </tr> <tr> <td style=”text-align:left;”>我是左对齐</td> <td style=”text-align:right;”>我是右对齐</td> <td style=”text-align:center;”>我是居中齐</td> <td style=”text-align:justify;text-justify:distribute-all-lines;text-align-last:justify”>我是两端对齐</td> </tr> </table>

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 < table >    < tr >      < th >左对齐 < / th >      < th >右对齐 < / th >      < th >居中对齐 < / th >      < th >两端对齐 < / th >    < / tr >    < tr >      < td style = “text-align:left;” >我是左对齐 < / td >      < td style = “text-align:right;” >我是右对齐 < / td >      < td style = “text-align:center;” >我是居中齐 < / td >      < td style = “text-align:justify;text-justify:distribute-all-lines;text-align-last:justify” >我是两端对齐 < / td >    < / tr > < / table >

    2021云服务器价格出炉,便宜有好货!
    ① 阿里云:阿里云2核2G服务器5M带宽60元一年起(有高配)
    ② 代金券:阿里云代金券限量发放中…(有账号就能领)
    ③ 腾讯云:腾讯云2核4G服务器8M带宽74元一年(更多配置报价查看)
    ④ 免费提供技术支持:在线客服