HTML小白入门学习-表格标签

一、前言

话说上文，我们对HTML的表单类标签进行简单的学习和认识， 分别是<form>、<input>、<textarea>、<label>、<select>和<button>这几个标签。

与表单标签有一字之别的表格标签，就是本文的主角。本篇文章将带着大家认识HTML标签中较为常用的表格标签。table标签用来表示一个表格，表格的组成我们有很多角度可以剖析，比如一个表格是由行和列组成的，比如一个表格是由表头和表主体组成的，再比如一个表格是由一个个单元格组成的。

不同角度对表格的剖析，都会对应到table标签里面包裹的子元素，下面我们就详细来介绍一下。

二、table标签

<table>标签用来表示一个表格，它是包裹在最外层的标识标签，告诉浏览器这是一个表格，标签代码示例：

<table></table>

当然，只有这个<table>标签是不够的，一般的，表格的具体内容展示还需要用到下面几个标签，分别是：<tr>、<th>、<td>。

1、<tr></tr>：表示表格中的行，有多少个<tr>标签，就有多少行。

2、<th></th>：表示表格的表头内容。

3、<td></td>：表示表格的单元格。

一般的，表头中<th>有多少个，对应的下面每一行的<td>就有多少个，如果<th>和<td>数量不相等，需要利用colspan或者rowspan属性进行合并配置，这样就可以实现单元格拆分或者合并效果了，话不多说，我们直接上代码：

（1）中规中矩类型：

<table border="3">

  <tr>

   <th>日期</th>

    <th>吃什么</th>

  </tr>

  <tr>

    <td>星期一</td>

    <td>炭烤牛蛙</td>

  </tr>

  <tr>

    <td>星期二</td>

    <td>酸菜鱼</td>

  </tr>

</table>

看看运行效果：

（2）小试牛刀类型:

<table border="3">

  <tr>

    <th>人员</th>

    <th colspan="2">称呼</th>

  </tr>

  <tr>

    <td>张楚岚</td>

    <td>不摇碧莲</td>

    <td>阳雷传人</td>

  </tr>

</table>

看看运行效果：

三、table标签属性

<table>标签的属性有挺多的，常用的几个整理如下：

属性	作用
border	设置表格框线的宽度（px）
rowspan	设置单元格要合并的行数
colspan	设置单元格要合并的列数
cellpadding	设置单元格边框与单元格内容之间的距离（px）
cellspacing	设置单元格与单元格之间的距离（px）
width	设置整个表格的总体宽度
summary	设置表格的摘要，不显示

四、其他元素

<table>标签里面可以放的元素除了<tr>、<th>、<td>这三个外，其实还有一些常用的元素，分别是：<caption>、<colgroup>、<thead>、<tfoot>、<tbody>。

1、<caption>标签：该标签是用来定义表格标题的，而且每个表格只能有一个标题，比如人员请假情况统计表，用来说明表格的主题。

代码示例：

<table border="3">

  <caption>炁体源流值班表</caption>

  <tr>

    <th>月份</th>

    <th>值班人员</th>

  </tr>

  <tr>

    <td>6月</td>

   <td>冯宝宝</td>

  </tr>

  <tr>

    <td>7月</td>

    <td>张楚岚</td>

  </tr>

</table>

看看运行效果：

2、<thead>标签、<tbody>标签、<tfoot>标签：这三个标签一般都是组队出现的，分别用来表示表格的页眉、正文和页脚。作用就是当你的表格内容很多的时候，有时候甚至跨页，如果你设置了这几个标签，那么在滚动表格正文时，页眉和页脚可以独立显示。而且要打印跨页表格时，设置了的页眉和页脚也会在每页的顶部和底部打印出来，保证表格的完整性。

看看代码：

<table border="3">

  <thead>

    <tr>

      <th>人员</th>

      <th>年纪（岁）</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>冯宝宝</td>

      <td>500</td>

    </tr>

    <tr>

      <td>张楚岚</td>

      <td>19</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <td>合计</td>

      <td>519</td>

    </tr>

  </tfoot>

</table>

3、<colgroup>标签：这个标签可以给表格的列进行分组，然后按照不同的分组进行不用的样式配置。它里面会放<col>标签，一般的一个表格有多少列，里面就可以放多少个<col>标签，每个<col>标签对应一列。

不过，有同学会问，那如果有很多列，不就要写好多个<col>标签，那不是很麻烦？其实<col>标签有个属性叫“span”,这个属性可以帮助我们简化写法，你可以设置span的值，这个值就是代表对应的列数。比如一个表格有三列，我想把前面两列分为一组，把这两列背景颜色设置为紫色，然后把最后一列背景颜色设置为粉红色，则对应的代码示例如下：

<table border="3">

  <colgroup>

    <col span="2" style="background-color:purple">

    <col style="background-color:pink">

  </colgroup>

  <tr>

    <th>人员</th>

    <th>身高(cm)</th>

    <th>体重（kg）</th>

  </tr>

  <tr>

    <td>冯宝宝</td>

    <td>170</td>

    <td>45</td>

  </tr>

  <tr>

    <td>张楚岚</td>

    <td>176</td>

    <td>65</td>

  </tr>

</table>

看看效果：

五、小结

本篇为大家简单介绍了HTML标签中的table标签，喜欢本文的话，可以给博主点个小心心哦。博主在此，提前祝大家，新年快乐！

• 欢迎关注我的公众号，不仅为你推荐最新的博文，还有更多惊喜和资源在等着你!一起学习共同进步！