美文网首页H5/Web前端开发教程
2-12. 表格标签中的其他标签

2-12. 表格标签中的其他标签

作者: 一Left一 | 来源:发表于2017-11-09 20:59 被阅读1次

| <table> | 定义表格 |
| <caption> | 定义表格标题。 |
| <th> | 定义表格的表头。 |
| <tr> | 定义表格的行。 |
| <td> | 定义表格单元。 |
| <thead> | 定义表格的页眉。 |
| <tbody> | 定义表格的主体。 |
| <tfoot> | 定义表格的页脚。 |
| <col> | 定义用于表格列的属性。 |
| <colgroup> | 定义表格列的组。 |

1、表格标题caption
在表格标签中提供了一个标签专门用来设置表格的标题, 这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中

2、caption注意点
caption一定要写在table标签中, 否则无效
caption一定要紧跟在table标签后面

3、标题单元格标签 th
在表格标签中提供了一个标签专门用来存储每一列的标题, 这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字
其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的, th是专门用来存储当前列的标题的

<!--
table标题
caption: 只能写在table标签内部,要紧接着table的头标签
th:用来定义表格列或者行的标题,自动加粗,自动变大

table里面的标签
tr:

td和th 都可以写在tr中
td 普通的表格数据
th:表格中行或者列的标题

caption:表格的标题,不管表格如何移动,都可以相对表格居中

-->
<!--table[bgcolor=black]>tr[bgcolor=white]*7>td*6-->

<table bgcolor="black" align= left width=800 height=300 cellspacing=1>
    <caption>今日小说排行榜</caption>
    <tr bgcolor="white" align= center>
        <th>标题</th>
        <th>标题</th>
        <th>标题</th>
        <th>标题</th>
        <th>标题</th>
        <th>标题</th>
    </tr>
    <tr bgcolor="white" align= center>
        <td>1</td>
        <td>暴走大事件</td>
        <td><img src="" alt="↑"></td>
        <td>56565</td>
        <td>566664</td>
        <td>
            <a href="">贴吧</a>
            <a href="">图片</a>
            <a href="">百科</a>
        </td>
    </tr><tr bgcolor="white" align= center>
        <td>1</td>
        <td>暴走大事件</td>
        <td><img src="" alt="↑"></td>
        <td>56565</td>
        <td>566664</td>
        <td>
            <a href="">贴吧</a>
            <a href="">图片</a>
            <a href="">百科</a>
        </td>
    </tr><tr bgcolor="white" align= center>
        <td>1</td>
        <td>暴走大事件</td>
        <td><img src="" alt="↑"></td>
        <td>56565</td>
        <td>566664</td>
        <td>
            <a href="">贴吧</a>
            <a href="">图片</a>
            <a href="">百科</a>
        </td>
    </tr><tr bgcolor="white" align= center>
        <td>1</td>
        <td>暴走大事件</td>
        <td><img src="" alt="↑"></td>
        <td>56565</td>
        <td>566664</td>
        <td>
            <a href="">贴吧</a>
            <a href="">图片</a>
            <a href="">百科</a>
        </td>
    </tr><tr bgcolor="white" align= center>
        <td>1</td>
        <td>暴走大事件</td>
        <td><img src="" alt="↑"></td>
        <td>56565</td>
        <td>566664</td>
        <td>
            <a href="">贴吧</a>
            <a href="">图片</a>
            <a href="">百科</a>
        </td>
    </tr><tr bgcolor="white" align= center>
        <td>1</td>
        <td>暴走大事件</td>
        <td><img src="" alt="↑"></td>
        <td>56565</td>
        <td>566664</td>
        <td>
            <a href="">贴吧</a>
            <a href="">图片</a>
            <a href="">百科</a>
        </td>
    </tr><tr bgcolor="white" align= center>
        <td>1</td>
        <td>暴走大事件</td>
        <td><img src="" alt="↑"></td>
        <td>56565</td>
        <td>566664</td>
        <td>
            <a href="">贴吧</a>
            <a href="">图片</a>
            <a href="">百科</a>
        </td>
    </tr>
</table>
</body>
图片.png

http://www.w3school.com.cn/html/html_tables.asp

相关文章

  • 2-12. 表格标签中的其他标签

    | | 定义表格 || | 定义表格标题。 || | 定义表格的表头。 || | 定义表格的行。 ...

  • 表格相关总结

    表格标签 :定义表格,表格的边界标签,必定包裹表格的其他元素标签; :定义表格的行; :定义表格的表头,需要被 包...

  • html实现一个简单表格

    目标效果 html标签 标签定义表格中的一行 标签定义表格中的表头 标签定义表格中的一列 标签定义表格的页头 标签...

  • HTML实现一个table

    标签 :用来定义HTML文档中的表格其中包含:标签 定义表格的页头标签 定义表格的主体标签 定义表格的页脚标签 ...

  • 表格标签(table)

    其实表格标签中的table代表整个表格, 也就是一堆table标签就是一个表格其实表格标签中的tr标签代表整个表格...

  • html标签之表格标签

    HTML表格组成: 由 标签以及一个或多个 、 或 标签: 标签:用来定义表格,整个表格包含在 标签中; 标签:...

  • 零基础Web前端开发(5)

    HTML表格概述 表格的基本结构 表格的基本标签有标签 (表格), 标签(表格行), 标签(表格单元格)。 标签和...

  • 前端开发学习第十一天

    表格 表格的基本标签有:table标签(表格)、tr标签(行)、td标签(单元格)。 标签和 标签都要在表格的开始...

  • 【前端】-009-页面制作-HTML-表格标签

    表格的基本标签 表格标签:table, ... 表格的标题标签:caption titleName 表格头部:th...

  • 2018-08-26html表格和简历实战

    html表格 table常用标签 1、table标签:声明一个表格 2、tr标签:定义表格中的一行 3、td和th...

网友评论

    本文标题:2-12. 表格标签中的其他标签

    本文链接:https://www.haomeiwen.com/subject/hzhmmxtx.html