1. HTML 基础

  2. 常用的元素

  3. 工具与规范

  4. 实例练习

基本的表格

表格同样是一个很常见的元素。下面的例子中，代码的 <table> 是表格元素， <tr> （table row）是表格行元素，而 <td> （table data）则是一个单元格。

<table>
    <tr>
        <td>香蕉</td>
        <td>苹果</td>
    </tr>
    <tr>
        <td>西瓜</td>
        <td>草莓</td>
    </tr>
</table>

$$demo

<table> <tr> <td>香蕉</td> <td>苹果</td> </tr> <tr> <td>西瓜</td> <td>草莓</td> </tr> </table> $$

$$warning

有些教程中会教你用 table 元素进行页面布局，强烈建议不要这样做。这样会使辅助阅读器、搜索引擎的爬虫等程序产生混淆，table 元素就只应该用来呈现表格数据。

如果要进行页面布局可以选择 Flexbox 或 Grid 布局。

$$

从位置上看出来已经形成了一个表格，但是缺少一些边框样式。将以下的 CSS 样式加在代码的后面，有关 CSS 我们会在之后学习，这里先不用了解。

<style>
    table {
        /* 合并单元格边框 */
        border-collapse: collapse;
    }

    td,
    th {
        /* 边框 */
        border: 1px solid #333;
        /* 内边距 */
        padding: 10px 20px;

        /* 文字居中 */
        text-align: center;
    }
</style>

$$demo

<table>

<tr>

<td>香蕉</td>

<td>苹果</td>

</tr>

<tr>

<td>西瓜</td>

<td>草莓</td>

</tr>

</table>

<style> table { border-collapse: collapse; } td, th { border: 1px solid #333; padding: 10px; } </style>

$$

表格说明

<caption> 元素可以让我们添加一个表格的说明，说明的文本默认会居中。

<table>
    <caption>
        水果的表格
    </caption>
    <tr>
        <td>香蕉</td>
        <td>苹果</td>
        <td>西瓜</td>
        <td>草莓</td>
    </tr>
</table>

$$demo

<table>

<caption>

水果的表格

</caption>

<tr>

<td>香蕉</td>

<td>苹果</td>

<td>西瓜</td>

<td>草莓</td>

</tr>

</table>

<style>

table {

border-collapse: collapse;

}

td,

th {

border: 1px solid #333;

padding: 10px;

}

</style>

$$

表格标题

使用 <th> （table header）元素来表达我们的标题，标题的字体样式默认会粗一些。

<iframe height="300" style="width: 100%" scrolling="no" title="form" src="https://codepen.io/3yya/embed/NWwboLP?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

合并单元格

合并列

colspan （column span）可以表明当前单元格所占的列数。

<iframe height="300" style="width: 100%" scrolling="no" title="form" src="https://codepen.io/3yya/embed/bGYBzQG?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

合并行

rowspan （row span）可以表明当前单元格所占的行数。

<iframe height="300" style="width: 100%" scrolling="no" title="form" src="https://codepen.io/3yya/embed/YzEpBMd?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

$$tip

单元格的合并比较容易混乱，建议按以下的步骤来合并单元格：

  1. 先把所有的单元格写出来。
  2. 针对要合并的单元格写 rowspan 或 colspan 。
  3. 删掉多余的单元格。

$$

练习

  1. 试着完成下面的课程表。

$$demo <table> <caption> 上午课程表 </caption> <tr> <th>时间</th> <th>课程</th> <th>任课老师</th> </tr> <tr> <td>9:00 AM</td> <td rowspan="2">语文</td> <td rowspan="2">李文</td> </tr> <tr> <td>10:00 AM</td> </tr> <tr> <td>11:00 AM</td> <td>数学</td> <td>张三</td> </tr> <tr> <td>12:00 AM</td> <td>英语</td> <td>Susan</td> </tr> </table> <style> table { /* 合并单元格边框 */ border-collapse: collapse; }

td,
th {
    /* 边框 */
    border: 1px solid #333;
    /* 内边距 */
    padding: 10px 20px;

    /* 文字居中 */
    text-align: center;
}

</style> $$

$$answer

<table>
    <caption>
        上午课程表
    </caption>
    <tr>
        <th>时间</th>
        <th>课程</th>
        <th>任课老师</th>
    </tr>
    <tr>
        <td>9:00 AM</td>
        <td rowspan="2">语文</td>
        <td rowspan="2">李文</td>
    </tr>
    <tr>
        <td>10:00 AM</td>
    </tr>
    <tr>
        <td>11:00 AM</td>
        <td>数学</td>
        <td>张三</td>
    </tr>
    <tr>
        <td>12:00 AM</td>
        <td>英语</td>
        <td>Susan</td>
    </tr>
</table>
<style>
    table {
        /* 合并单元格边框 */
        border-collapse: collapse;
    }

    td,
    th {
        /* 边框 */
        border: 1px solid #333;
        /* 内边距 */
        padding: 10px 20px;

        /* 文字居中 */
        text-align: center;
    }
</style>

$$

  1. 英语课需要增加一位助教 David，修改一下课表。 $$demo <table> <caption> 上午课程表 </caption> <tr> <th>时间</th> <th>课程</th> <th colspan="2">任课老师</th> </tr> <tr> <td>9:00 AM</td> <td rowspan="2">语文</td> <td rowspan="2" colspan="2">李文</td> </tr> <tr> <td>10:00 AM</td> </tr> <tr> <td>11:00 AM</td> <td>数学</td> <td colspan="2">张三</td> </tr> <tr> <td>12:00 AM</td> <td>英语</td> <td>Susan</td> <td>David</td> </tr> </table> <style> table { /* 合并单元格边框 */ border-collapse: collapse; }

    td, th { /* 边框 / border: 1px solid #333; / 内边距 */ padding: 10px 20px;

     /* 文字居中 */
 text-align: center;

    } </style>

$$

$$answer

<table>
    <caption>
        上午课程表
    </caption>
    <tr>
        <th>时间</th>
        <th>课程</th>
        <th colspan="2">任课老师</th>
    </tr>
    <tr>
        <td>9:00 AM</td>
        <td rowspan="2">语文</td>
        <td rowspan="2" colspan="2">李文</td>
    </tr>
    <tr>
        <td>10:00 AM</td>
    </tr>
    <tr>
        <td>11:00 AM</td>
        <td>数学</td>
        <td colspan="2">张三</td>
    </tr>
    <tr>
        <td>12:00 AM</td>
        <td>英语</td>
        <td>Susan</td>
        <td>David</td>
    </tr>
</table>
<style>
    table {
        /* 合并单元格边框 */
        border-collapse: collapse;
    }

    td,
    th {
        /* 边框 */
        border: 1px solid #333;
        /* 内边距 */
        padding: 10px 20px;

        /* 文字居中 */
        text-align: center;
    }
</style>

$$

  1. 试着完成下面的一周安排。

$$demo <table> <caption> 一周安排 </caption> <tr> <th></th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> <th>周日</th> </tr> <tr> <th>上午</th> <td colspan="4">工作</td> <td rowspan="2">看书</td> <td rowspan="2" colspan="2">睡觉</td> </tr>

<tr>
    <th>下午</th>
    <td colspan="2">看剧</td>
    <td colspan="2">看电影</td>
</tr>

</table>

<style> table { /* 合并单元格边框 */ border-collapse: collapse; }

td,
th {
    /* 边框 */
    border: 1px solid #333;
    /* 内边距 */
    padding: 10px 20px;

    /* 文字居中 */
    text-align: center;
}

</style> $$

$$answer

<table>
    <caption>
        一周安排
    </caption>
    <tr>
        <th></th>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
        <th>周六</th>
        <th>周日</th>
    </tr>
    <tr>
        <th>上午</th>
        <td colspan="4">工作</td>
        <td rowspan="2">看书</td>
        <td rowspan="2" colspan="2">睡觉</td>
    </tr>

    <tr>
        <th>下午</th>
        <td colspan="2">看剧</td>
        <td colspan="2">看电影</td>
    </tr>
</table>

<style>
    table {
        /* 合并单元格边框 */
        border-collapse: collapse;
    }

    td,
    th {
        /* 边框 */
        border: 1px solid #333;
        /* 内边距 */
        padding: 10px 20px;

        /* 文字居中 */
        text-align: center;
    }
</style>

$$