HTML入门9_常用标签_表格table

最新推荐文章于 2022-09-19 22:12:41 发布

橘九。

最新推荐文章于 2022-09-19 22:12:41 发布

阅读量198

点赞数

本文链接：https://blog.csdn.net/qq_34400745/article/details/102558648

版权

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table>
    <tr>
        <td>苹果</td>
        <td>橘子</td>
    </tr>
    <tr>
        <td>黄瓜</td>
        <td>西红柿</td>
    </tr>
</table>

运行结果：
在这里插入图片描述

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用border定义边框属性
使用边框属性来显示一个带有边框的表格：

<table border="1px">
    <tr>
        <td>苹果</td>
        <td>橘子</td>
    </tr>
    <tr>
        <td>黄瓜</td>
        <td>西红柿</td>
    </tr>
</table>

运行结果：
在这里插入图片描述

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1px">
    <tr>
        <th>水果</th>
        <th>蔬菜</th>
    </tr>
    <tr>
        <td>苹果</td>
        <td>西红柿</td>
    </tr>
    <tr>
        <td>橘子</td>
        <td>黄瓜</td>
    </tr>
</table>

运行结果：
在这里插入图片描述

表格标题：

使用caption定义标题：

<table border="1px">
    <caption>水果和蔬菜</caption>
    <tr>
        <th>水果</th>
        <th>蔬菜</th>

    </tr>
    <tr>
        <td>苹果</td>
        <td>西红柿</td>

    </tr>
    <tr>
        <td>橘子</td>
        <td>黄瓜</td>
</tr>
</table>