[05]HTML基础之表格标签

2020-06-01 16:00:59来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

[05]HTML基础之表格标签

1. <table>标签

表格容器,尽量避免用属性书写样式,而是用CSS来表达

border: 数字  //表格边框宽度

2. <caption>标签

表格的标题,一般出现在表格上方,可通过CSS更改方向

3. <tr>标签

表示表格的一行。

4. <th>标签

表头的一个单元,与<tr>相比,一般做一列的标题,不展示内容

5. <tr>标签

表格的一个单元,表格的最小单位

6. <col>标签

表示当前所占的列数,用于应用CSS样式,span属性指定应用样式的列数。span:横跨的列数

7. <colgroup>标签

<col>标签进行分组。

8. <thead>标签

表示表格的头部

9. <tbody>标签

表示表格的主体

10. <tfoot>标签

表示表格的脚部

由于表格标签并不单独使用,这里放在一起做个集合。这些标签有许多属性,但大部分都是关于布局之类的,而这些属性实现的效果,用CSS也可以实现。所以,在html5之后,已经不推荐使用这些属性。

<!-- 表格容器 border:表格边框 -->
<table border>
    <!-- 表格标题 -->
    <caption>用户</caption>
    <!-- 列容器 -->
    <colgroup>
        <!-- 应用CSS样式的列 span:列数 -->
        <col style="background:#f60"></col>
        <col style="color:#f60"></col>
    </colgroup>
    <!-- 表格头部 -->
    <thead>
        <!-- 表格一行 -->
        <tr>
            <!-- 头部单个单元格 -->
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
        <tr>
            <!-- 主体单个单元格 colspan:横跨列数 rowspan:横跨行数 -->
            <td>张三</td>
            <td>18</td>
        </tr>
    </tbody>
    <!-- 表格底部 一般用于统计之类 -->
    <tfoot>
        <tr>
            <th>1个</th>
            <th>2项</th>
        </tr>
    </tfoot>
</table>

原文链接:https://www.cnblogs.com/juetan/p/13027258.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:关于vue的多页面标签功能,对于嵌套router-view缓存的最终无奈解

下一篇:现在前端最主要的都学什么?