从零开始学习HTML-03.表格

表格

1 表格的主要作用

表格主要用于显示、展示数据。因为它可以让数据显示得非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理（合理的使用表格也能够有效提高 SEO）。

注意：表格不是用来布局页面的，而是用来展示数据的。表格常用于表单数据的 “布局”。

特别强调，表格是用于表单数据的 “布局”，而不是页面的布局！

2 表格的基本语法

<table>
    <tr>
        <td>单元格</td>
        ...
    </tr>
    ...
</table>

<table> </table> 是用于定义表格的标签
<tr> </tr> 用于定义表格中的行，必须嵌套在 <table> </table> 标签中
<td> </td> 用于定义表格中的单元格，必须嵌套在 <tr> </tr> 标签中
字母 td 指表格数据（table data），即：数据单元格的内容
单元格 td 里面可以放任何的元素

3 表头单元格标签

一般表头单元格位于表格的第一行或第一列，作用是：突出重要性，表头单元格里面的文本内容默认加粗居中显示。

<th> 标签表示 HTML 表格的表头部分（table head 的缩写）。

<table>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        ...
    </tr>
    ...
</table>

4 表格属性

注意：表格标签的属性在实际开发中并不常用，而是通过后面的 CSS 来设置，这里了解即可。

以下属性都写在 table 开始标签内，多个属性之间用空格隔开。

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="240">
    ...
</table>

属性名	属性值	描述
`align`	`left`、`center`、`right`	规定表格相对周围元素的对齐方式（默认 left），注意指的是整个表格的对齐方式（表格是在父盒子中默认往左靠，还是居中或是往右靠），而不是指单元格内容的对齐方式（单元格内容对齐可以通过：`style="text-align: center;"` 设置）（了解）
`border`	`1` 或 `""`	规定表格单元是否拥有边框，默认为 ""，表示没有边框（了解）
`cellpadding`	像素值	规定单元边沿与其内容之间的空白，默认 1 像素（了解）
`cellspacing`	像素值	规定单元格之间的空白，默认 2 像素（了解）
`width`	像素值或百分比	规定表格的宽度（了解）
`height`	像素值或百分比	规定表格的高度（了解）

5 表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成：表格头部 和 表格主体 两大部分。

在表格标签中，分别用：<thead> 标签表示表格的头部区域，<tbody> 标签表示表格的主体区域，这样可以更好的分清表格结构。

<thead> </thead>：用于定义表格的头部，<thead> 内部必须拥有 <tr> 标签，一般是位于第一行，且一般 <tr> 标签中推荐放置 <th> 标签
<tbody> </tbody>：用于定义表格的主体，主要用于放数据本体
以上标签都是放在 <table> </table> 标签中

<table>
    <!-- 头部区域 -->
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            ...
        </tr>
    </thead>
    <!-- 主体区域 -->
    <tbody>
        <tr>
            <td>周吉瑞</td>
            <td>男</td>
            <td>18</td>
            ...
        </tr>
        ...
    </tbody>
</table>

6 合并单元格

特殊情况下，可以把多个单元格合并为一个单元格，这里会最简单的合并单元格即可。

合并单元格的方式：

跨行合并（上下合并）：rowspan="合并单元格的个数"
跨列合并（左右合并）：colspan="合并单元格的个数"

目标单元格：（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三步曲：

先确定是跨行还是跨列合并
找到目标单元格，写上 合并方式=合并的单元格数量，比如：<td colspan="2"> </td>
删除多余单元格

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

</html>

合并单元格

【综合案例】

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table width="400px" height="200px" align="center" border="1" cellpadding="10" cellspacing="5">
        <thead>
            <tr>
                <th>one</th>
                <th>two</th>
                <th>three</th>
                <th>four</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td rowspan="3">1</td>
                <td colspan="3">234</td>
                <!-- <td>3</td> -->
                <!-- <td>4</td> -->
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

合并单元格案例