加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

表格行的水平对齐方式align

(2013-04-16 09:25:14)
标签:

居中对齐

css

居右对齐

表格行的水平对齐方式

it

分类: Html Css

    表格行的水平对齐方式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  居右对齐

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有