属性caption_HTML 笔记（五）：表格标签

HTML笔记（五）：表格标签的基本使用

用于给数据添加表语义

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

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

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

属性宽度和高度

表格/td

默认情况下，表格会根据内容的大小进行调整。您也可以通过给 table 标签设置 width / 属性来设置表格的宽度和高度。

如果给td标签设置了width/属性，那么它会改变当前单元格所在行和列的宽度和高度，但是不会影响整个表格的宽度和高度。

水平和垂直对齐

对齐（左//右）

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

水平对齐：tr/td

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

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

垂直对齐：tr/td

（顶部 / / ）

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

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

边距和填充

桌子

单元格边框之间的距离称为边距。默认情况下，边距为 2 像素。您可以通过设置表格标签的属性来控制表格的边距。

单元格边框与内容之间的距离称为填充。默认情况下，填充为 1 像素。您可以设置 table 标签的属性来控制表格的填充。

细线表

通过在 table 标签中指定 0 边距来实现细线表是不可靠的。

设置table标签属性为黑色 设置table标签单元格为1px 设置tr标签属性为白色 其他标签

用于设置表格的标题

日

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

结构

由于表中存储的数据相对复杂，为了方便管理和读取，提高语义，我们可以对表中存储的数据进行分类：

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

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

水平合并单元格

设置单元格的属性，即设置单元格水平方向加宽一定的宽度（单元格）

垂直的

设置单元格的属性，即在垂直方向上将单元格加宽一定的宽度（单元格）