肉渣教程

HTML 表格

上一节 下一节

示例 - HTML表格

姓名 特殊技能 对象
郭靖 降龙十八掌、九阴真经、左右互搏术、空明拳 黄蓉
张无忌 九阳神功、乾坤大挪移、太极拳、圣火令武功 赵敏
袁承志 金蛇剑法、混元功、神行百变 夏青青
段正淳 一阳指 太多了……

运行一下

创建一个表格

HTML表格是通过<table>标签创建的。

而表格的每一行则是靠<tr>标签创建的。tr元素的内容则是若干HTML单元格元素。如果是表头,则采用<th>标签定义单元格;而正常单元格则用<td>来定义即可。

<table>
  <tr>
    <th align="left">姓名</th>
    <th align="left">特殊技能</th>
    <th align="left">对象</th>
  </tr>
  <tr>
    <td align="left">郭靖</td>
    <td align="left">降龙十八掌、九阴真经、左右互搏术、空明拳</td>
    <td align="left">黄蓉</td>
  </tr>
  <tr>
    <td align="left">张无忌</td>
    <td align="left">九阳神功、乾坤大挪移、太极拳、圣火令武功</td>
    <td align="left">赵敏</td>
  </tr>
  <tr>
    <td align="left">袁承志</td>
    <td align="left">金蛇剑法、混元功、神行百变</td>
    <td align="left">夏青青</td>
  </tr>
  <tr>
    <td align="left">段正淳</td>
    <td align="left">一阳指</td>
    <td align="left">太多了……</td>
  </tr>
</table>

运行一下

设置HTML表格的边框

默认情况下,如果不设置HTML表格的边框,HTML表格的边框是不会显现出来的。为了显现表格的边框,可以在CSS中设置好border特性。

table, th, td {
    border: 1px solid Tomato;
}

运行一下

将HTML表格的边框合并成单线

针对上述案例中,如果想把表格边框的双线合并成单线,则需要将border-collapse这个特性设置成collapse这个值。

table, th, td {
    border: 1px solid Tomato;
    border-collapse: collapse;
}

运行一下

调整边框之间的距离

如果不如上所述把边框合并成单线,表格的单元格之间是有间距的,一般来说,默认情况下都是有间距的;在存在间距的情况下,可以通过 border-spacing 这个特性来设置边框之间的距离。

table {
    border-spacing: 15px;
}

运行一下

添加表头

可以通过 caption 这个标签给表格添加一个表头。

<table>
  <caption>表头:武侠人物信息表</caption>
  <tr>
    <th align="left">姓名</th>
    <th align="left">特殊技能</th>
    <th align="left">对象</th>
  </tr>
  <tr>
    <td align="left">郭靖</td>
    <td align="left">降龙十八掌、九阴真经、左右互搏术、空明拳</td>
    <td align="left">黄蓉</td>
  </tr>
  <tr>
    <td align="left">张无忌</td>
    <td align="left">九阳神功、乾坤大挪移、太极拳、圣火令武功</td>
    <td align="left">赵敏</td>
  </tr>
</table>

运行一下

跨行的单元格合并

使用 rowspan 这个标签即可使不同行的单元格合并成一个单元格。

姓名: 张无忌 长孙无忌
邮箱: zwj@gmail.com zswj@gmail.com
zwj@zhuanfou.com zswj@zhuanfou.com
<table>
  <tr>
    <th>姓名:</th>
    <td>张无忌</td>
    <td>长孙无忌</td>
  </tr>
  <tr>
    <th rowspan="2">邮箱:</th>
    <td>zwj@gmail.com</td>
    <td>zswj@gmail.com</td>
  </tr>
  <tr>
    <td>zwj@zhuanfou.com</td>
    <td>zswj@zhuanfou.com</td>
  </tr>
</table>

运行一下

跨列的单元格合并

使用 colspan 这个标签可使不同列的单元格合并成一个单元格。

姓名 邮箱
张无忌 zwj@gmail.com zwj@zhuanfou.com
长孙无忌 zswj@gmail.com zswj@zhuanfou.com
<table>
  <tr>
    <th>姓名</th>
    <th colspan="2">邮箱</th>
  </tr>
  <tr>
    <td>张无忌</td>
    <td>zwj@gmail.com</td>
    <td>zwj@zhuanfou.com</td>
  </tr>
  <tr>
    <td>长孙无忌</td>
    <td>zswj@gmail.com</td>
    <td>zswj@zhuanfou.com</td>
  </tr>
</table>

运行一下

CSS中区分奇数行和偶数行

上面已经多次通过CSS的方式对表格样式进行了设置。如下案例,将展示在设置表格样式时,对奇数行和偶数行进行区分。

table tr:nth-child(even) {
    background-color: #eeeeee;
}

table tr:nth-child(odd) {
    background-color: #ffffff;
}

table th {
    color: white;
    background-color: #46acb6;
}

运行一下


HTML 表格

上一节 下一节