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

HTML&CSStable表单td左右对齐、居中对齐和两端对齐的设置方法已关闭评论16,7091

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

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

table表单中td的对齐方法分为左对齐、右对齐和两端对齐三种方式,可以通过td标签的align属性来设置,也可以通过html的style属性来设置:文章源自新手站长-https://xinshouzhanzhang.com/td-align.html

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

代码如下:文章源自新手站长-https://xinshouzhanzhang.com/td-align.html

<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表单td左右对齐、居中对齐和两端对齐的设置方法

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

文章源自新手站长-https://xinshouzhanzhang.com/td-align.html

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

例如:td左对齐可以使用html的style属性来实现,即:文章源自新手站长-https://xinshouzhanzhang.com/td-align.html

  • 左对齐:text-align:left;
  • 右对齐:text-align:right;
  • 居中对齐:text-align:center;
  • 两端对齐:text-align: justify;
  • 代码如下:文章源自新手站长-https://xinshouzhanzhang.com/td-align.html

    <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>
    
    文章源自新手站长-https://xinshouzhanzhang.com/td-align.html文章源自新手站长-https://xinshouzhanzhang.com/td-align.html

    【阿里云99元服务器】入口2核2G3M带宽、新老用户同享、99元/年续费到2027年

    【腾讯云特价】:2核2G3M 88元一年、2核2G4M 108元1年 366元3年、2核4G5M 166元/年 566元3年、4核8G12M 446元一年 更多配置8核16G18M和16核32G28M 点我直达 >>

    2023阿里云优惠活动:xinshouzhanzhang.com/go/aliyun

    注意:以上特价轻量服务器限制条件为“产品首单特惠”,如果你的腾讯云账号已经是老用户,建议重新注册一个腾讯云账号,如果你是新用户符合条件,那么无脑入,确实值得。

     
    • Table
    • td
    • justify
    • center
    • left
    • right
    • td对齐
    • td align
    • td左对齐
    • td右对齐
    • td居中对齐
    • td两端对齐
    HTML&CSS

    table td自适应宽度设置(根据内容自动拉伸)

    table td或th如何格局单元格内容自适应宽度?table td th根据表格内容自动拉伸CSS属性,新手站长网分享内联样式style和CSS方法: table td th自适应宽度样式 内联样式...
    HTML&CSS

    实现table表单td内容两端对齐的方法

    如何实现table表单td标签中的内容两端对齐?td的align属性设置为justify不好用,新手站长网分享td文字两端对齐的方法: td两端对齐的方法 td标签有个align属性,将align设置...