对table元素相关的标签和属性一点总结

   table元素主要是用来显示数据,之前用来页面布局不过已经过时了。
   跟table元素相关的标签有很多,比如:tr, td, th, thead, tbody, tfoot, caption,还有常用的属性:border, cellspacing, cellpadding等。总结一下。

   不如把他们写在一个table元素里来看看效果:
   html:
   

<table border="1">
    <caption>人员信息</caption>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ellen</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Alice</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>2 person</td>
            <td>2 info</td>
        </tr>
    </tfoot>
</table>

   效果:
   这里写图片描述
 
   
   总结一下:

   table元素定义一个表格;
   caption元素定义表格标题;
   thead, tbody, tfoot分别定义了表格的表头、主体、表注,这样表格看起来更容易理解,本身不是内容标签而是相当于定义标签包含内容的意义,详见:
   http://www.w3school.com.cn/tags/tag_thead.asp
   tr定义一行,行内可包含多个th和td标签;
   td定义标准单元格,与th不同的是,th用于定义表头单元,包含头部信息(默认粗体);

   再看看table相关属性:
   这里列举的都是table标签的属性而非CSS样式。
   html:
   

<table border="5" cellspacing="3" cellpadding="10">
        <caption>人员信息</caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Ellen</td>
                <td>23</td>
            </tr>
            <tr>
                <td>Alice</td>
                <td>22</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>2 person</td>
                <td>2 info</td>
            </tr>
        </tfoot>
    </table>

   效果:
   这里写图片描述
   border定义了表格边框宽度,为“0”时,则表格主体和单元格都没有边框,设置非0值时,则定义了表格主体边框的宽度、而单元格宽度显示而且不会改变(1px的宽度?);
   cellspacing定义了单元格与单元格之间的宽度,设置为“0”时,边框“变为”一条线。
   cellpadding定义了单元格边框与其内部内容的间距,意义参考CSS属性中的padding;

   关于将表格边框设置为一条线,使用CSS的方法为:
   

table{
    border-collapse: collapse;
}

   
   这个与上文提到的将cellspacing设置为0效果不完全一样,效果图:
   这里写图片描述
   
   cellspacing方法效果会显得粗一些,个人理解其实是2条边框线上下“挨着“而非”重合“;而border-collapse显得更美观些。
   
   相关属性还有在这里不一一列举,参考链接:
   http://www.w3school.com.cn/tags/tag_table.asp
   

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值