1-1-7【HTML基础】HTML表格

表格在HTML中是一个比较重要的概念，大家一定要动手自己试试~

---

1.表格基础

• 概述：在HTML文件中，创建一个最简单的表格需要3个标签，分别是table、tr和td。
• table标签：用于定义一个表格的基础结构，是简单表格的外部框架。
• tr标签：table rows，定义表格的行，有多少tr就代表这个表格有多少行。
• td标签：table data，定义表格的数据，每个td标签代表一个单元格。
• 嵌套关系：table嵌套tr嵌套td。

你会发现，像是个表格，但好像缺了点什么。没错，就是表格的边界线。

• border属性：

 <!-- 表格边界线的粗细被设置为1像素 -->
<table border="1">...</table>

你又会发现，表格虽然出来了，但是边界线的样式有点奇怪。需要加个属性来解决。

• 解决单元格空隙：

 <!-- 表格边界线的粗细被设置为1像素 -->
<table border="1" style="border-collapse: collapse;">...</table>

如此一来，一个简单的表格就完成了~

2.表头标签

• 概述：一般来说，每个表格都是有表头存在的，需要和普通单元格区分开，此时th标签应运而生。
• th标签：th标签的层级和td标签的层级是相同的，只需要在第一行中将td全部替换为th即可。

3.合并单元格

• 概述：实际工作中的表格不可能是规规整整的，一定存在若干单元格的合并。在th或td标签中，添加两个属性即可满足需求。
• rowspan属性：跨行合并，即上下单元格合并。

• colspan属性：跨列合并，即左右单元格合并。

属性值为几，则跨行or跨列合并多少个单元格。

4.表格分区

• 概述：一个完整的表格其实分4个区域：标题、头部、主题、页脚。
• caption标签：用于标识表格的标题。
• thead标签：table head，用于标识表格的表头。
• tbody标签：用于标识表格的主体部分。
• tfoot标签：用于标识表格的页脚。
• 注意：无论这几个标签书写时顺序如何颠倒，浏览器加载时会自动按照正确顺序解析。

拓展：复杂表格的构建

以上图为例，一步一步来。

• 第一步：以表格中最小单元格为基础，有几行就列出几个tr标签。

图中表格可以得出，共4行，故书写4个tr

<table border="1" style="border-collapse: collapse;">
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
</table>

• 第二步：从第一行开始，书写每行的单元格。其中，顶边对齐的单元格为同一行。

<table border="1" style="border-collapse: collapse;">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
        </tr>
    </table>

• 第三步：注意查看哪个单元格存在跨行or跨列，对该单元格对应属性进行赋值。

---

结束语：一花一世界，一木一浮生，诸君共勉！