2-13. 表格的结构

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

1、完整结构

<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>每一列的标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>数据</td>
        </tr>
    </tfoot>
</table>

3、注意点

• 如果我们没有编写tbody, 系统会系统给我们添加tbody
• 如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化

<!--
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