HTML _ HTML 表格

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

推广