1. HTML 基础

  2. 常用的元素

  3. 工具与规范

基本的表格

表格同样是一个很常见的元素。下面的例子中,代码的 <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;
    }
</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 可以表明当前单元格所占的列数。

<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 可以表明当前单元格所占的行数。

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

练习

  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;

border: 1px solid #333;

}

td,

th {

border: 1px solid #333;

padding: 10px 20px;

}

td {

text-align: center;

}

</style>

$$