美文网首页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. 表格标签中的其他标签

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