HTML 笔记（五）：表格标签

Reyn Morales

已于 2022-09-06 15:34:49 修改

阅读量768

点赞数 1

分类专栏： HTML 笔记文章标签： html 前端

于 2022-07-21 09:12:30 首次发布

本文链接：https://blog.csdn.net/Raymiles/article/details/125885117

版权

HTML 笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML 笔记（五）：表格标签

基本使用

用于为数据添加表格语义

表格是一种数据的表现形式，当数据量非常大的时候，此形式被认为是最为清晰的一种展现形式

<table>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    ...
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

table 表示表格，tr 表示表格内的一行，td 表示表格内一行中的一个单元格

表格标签存在边框属性，此属性决定了边框的宽度，默认情况下为零，因此看不到边框
table / tr / td 标签是一个组合，因此一般情况下 table / tr / td 标签是一起出现的

属性

宽度和高度

table / td

默认按照内容的大小来调整，也可以通过给 table 标签设置 width / height 属性来指定表格的宽度和高度

如果为 td 标签设置 width / height 属性，会更改当前单元格所在行列的宽度和高度，但是不会影响整个表格的宽度和高度

水平对齐和垂直对齐

align（left / center / right）

为 table 标签设置 align 属性，可以控制表格在水平方向的对齐方式

水平对齐：tr / td

为 tr 标签设置 align 属性，可以控制当前行中所有单元格内容在水平方向的对齐方式

为 td 标签设置 align 属性，可以控制当前单元格内容在水平方向的对齐方式

如果在 tr 和 td 标签中均设置了 align 属性，那么 td 标签中的属性会覆盖 tr 标签中的属性

垂直对齐：tr / td

valign（top / center / bottom）

为 tr 标签设置 valign 属性，可以控制当前行中所有单元格内容在垂直方向的对齐方式

为 td 标签设置 valign 属性，可以控制当前单元格内容在垂直方向的对齐方式

如果在 tr 和 td 标签中均设置了 valign 属性，那么 td 标签中的属性会覆盖 tr 标签中的属性

外边距和内边距

table

单元格边框之间的距离称之为外边距，默认情况下外边距为 2 px，为 table 标签设置 cellspacing 属性，可以控制表格的外边距

单元格边框与内容之间的距离称之为内边距，默认情况下内边距为 1 px，为 table 标签设置 cellpadding 属性，可以控制表格的内边距

细线表格

在 table 标签中通过指定外边距为 0 来实现细线表格是不靠谱的

为 table 标签设置 bgcolor 属性为黑色
为 table 标签设置 cell spacing 为 1 px
为 tr 标签设置 bgcolor 属性为白色

table / tr / td 标签均支持 bgcolor 属性

其它标签

caption

用于为表格设置标题

caption 标签必须在 table 标签中，否则无效
caption 标签必须紧跟在 table 的开始标签之后

th

用于标记每一列的标题（居中、加粗）

结构

由于表格中存储的数据比较复杂，为了便于管理和阅读以及提升语义，我们可以为表格中存储的数据分类：

表格的标题信息
表格的表头信息
表格的主体信息
表格的页尾信息

<table>
    <caption>...</caption>
    <thead>
        <tr>
            <th>...</th>
            <th>...</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        ...
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tfoot>
</table>