表格行的水平对齐方式align
align属性可以设置表格行的水平对齐,就是使行里面的内容都水平对齐,其中默认为水平居左对齐。align属性共有三个值,分别是:居中对齐、居右对齐、居左对齐。
1.居中对齐
居中对齐可以通过align="center"来进行设置。此属性值放在<tr>标签里面,用来设置行的对齐方式。除了可以写在<tr>标签里面,还可以写在<table>标签和<td>标签里面。写在<table>标签里面,用来控制整个表格的水平居中对齐,写在<td>标签里面,用来控制每个列里面的内容水平居中对齐。用法和写在<tr>标签里面一样。其语法形式如下。
<table><!--表格开始-->
<tr
align="center"><!--表格行开始-->
<td>表格内容</td><!--表格列-->
</tr><!--表格行结束-->
</table><!--表格结束--> |
【示例1】下面是使用align="center"来显示行内容的水平居中对齐的效果。为了效果更明显,创建一个两行三列的表格。其中第一行居中对齐,第二行没有设置居中对齐。代码如下。
<table width="450px" border="1px"
><!--表格开始,设置表格边框为1px,表格宽度为450px-->
<tr
align="center"><!--表格行开始,设置行内容的水平居中对齐-->
<td
>水平居中</td><!--表格列-->
<td
>水平居中</td>
<td
>水平居中</td>
</tr><!--表格行结束-->
<tr
><!--表格行开始,未设置行内容的水平居中对齐-->
<td
>水平居中</td><!--表格列-->
<td
>水平居中</td>
<td
>水平居中</td>
</tr><!--表格行结束-->
</table><!--表格结束--> |
效果如图1所示。
http://s5/mw690/76855271t7c3e6f577e64&690
图1
使用align="center"来设置行内容的水平居中效果图
2.居左对齐
通过align="left"可以设置行里面的内容都居左对齐。此属性值除了可以写在<tr>标签里面,还可以写在<table>标签和<td>标签里面。这和居中的属性值用法是一样的。其语法结构如下。
<table><!--表格开始-->
<tr align="left
"><!--表格行开始-->
<td>表格内容</td><!--表格列-->
</tr><!--表格行结束-->
</table><!--表格结束--> |
【示例2】下面是使用align="left"来显示行内容的水平居左对齐的效果。为了效果更明显,创建一个两行三列的表格。其中第一行居左对齐,第二行设置居中对齐。代码如下。
<table width="450px" border="1px"
><!--表格开始,设置表格边框为1px,表格宽度为450px-->
<tr
align="left"><!--表格行开始,设置行内容的水平居左对齐-->
<td
>水平居左</td><!--表格列-->
<td
>水平居左</td>
<td
>水平居左</td>
</tr><!--表格行结束-->
<tr
align="center"><!--表格行开始,设置行内容的水平居中对齐-->
<td
>水平居中</td><!--表格列-->
<td
>水平居中</td>
<td
>水平居中</td>
</tr><!--表格行结束-->
</table><!--表格结束--> |
效果如图2所示。
http://s3/mw690/76855271tda7059628552&690
图2
使用align="left"来设置行内容的水平居左效果图
技巧:由于默认的align属性是水平居左,所以在使用时,如果不是个别需要,可以不写此属性值。
3.居右对齐
通过align="right"可以设置行里面的内容都居右对齐。此属性值和居中对齐的属性值一样,除了可以写在<tr>标签里面,还可以写在<table>标签和<td>标签里面。其语法结构如下。
<table><!--表格开始-->
<tr
align="rigth"><!--表格行开始-->
<td>表格内容</td><!--表格列-->
</tr><!--表格行结束-->
</table><!--表格结束--> |
【示例3】下面是使用align="right"来显示行内容的水平居右对齐的效果。为了效果更明显,创建一个两行三列的表格。其中第一行居右对齐,第二行设置居中对齐。代码如下。
<table width="450px" border="1px"
><!--表格开始,设置表格边框为1px,表格整体宽度为450px-->
<tr
align="right"><!--表格行开始,设置行内容的水平居右对齐-->
<td
>水平居右</td><!--表格列-->
<td
>水平居右</td>
<td
>水平居右</td>
</tr><!--表格行结束-->
<tr
align="center"><!--表格行开始,设置行内容的水平居中对齐-->
<td
>水平居中</td><!--表格列-->
<td
>水平居中</td>
<td
>水平居中</td>
</tr><!--表格行结束-->
</table><!--表格结束--> |
效果如图3所示。
http://s1/mw690/76855271tda705961b0c0&690
图3
使用align="right"来设置行内容的水平居右效果图
关键字:表格行的水平对齐方式align
居中对齐 CSS
居右对齐
加载中,请稍候......