表格是一个比较复杂的东西,但其实如果你听懂了上一章的内容,这部分也非常的好理解。

表格和列表有什么区别呢?列表的每一行,就是一个内容,而表格每行可有多个内容。这么推理下去的话……那么我们首先要选一个标签,那表示这部分内容是一个表格:

<table>
  <-- 这里是一个表格 -->
</table>

可能有的同学说,咦,table 不是桌子的意思吗?是啊,不过他也有表格的意思,所以喽~

有了表格,我们要再进行细分,当然可以有很多种划分的方法,不过在这里我们就武断一点,其实就是不得不按照规则制定者所选择的方法去写。那么我们先来把表格拆分成行,

<table>
  <tr><!-- 这里是表格中的一行 --></tr>
  <tr><!-- 这里是表格中的一行 --></tr>
</table>

这和我们写列表其实差不多的,可以解释一下,tr 就是 table row 的缩写,意思当然就是“表格里的行”了。

我们刚才说过,每一行里边可以不止一个项目,就是不止一个单元格。所以我们还要再往下划分:

<table>
  <tr>
    <td>内容 1</td>
    <td>内容 2</td>
    <td>内容 3</td>
  </tr>
  <tr>
    <td>内容 4</td>
    <td>内容 5</td>
    <td>内容 6</td>
  </tr>
</table>

现在我们在每一行之中又放入了三个单元格,每一个单元格中写了一些内容,单元格的标签是 td,就是 table data 的缩写,意思是表格中的数据,因为每一个单元格就要写表格中实际要显示的数据了(当然并不一定要是数据,也可以是其他的各种内容)。那么我们来看看效果吧:

内容 1 内容 2 内容 3
内容 4 内容 5 内容 6

所以表格就是比列表多出来一层,使得每一行可以显示更多的项目。当然,表格可以实现更复杂的形式,比如我们知道一个操作叫做合并单元格,可以把相邻的几个单元格合并成为一个,这时候显示出来的表格就比较复杂了。这样的代码如何去写呢……其实现在,我并不建议大家使用这么复杂的表格,因为我们后面会学到的各种布局方式要比这灵活的多,而且通用性也很强,学一个方式就可以应付大多数种情况,何乐而不为呢?所以涉及到的各种奇葩属性,我就不一一进行介绍了。如果有需要,大家可以自行查阅文档,不过如果使用量并不大,我觉得其实用可视化编辑器(比如大家熟知的 DreamWeaver)来设计表格,也是一个非常不错的选择。

表格还有很多复杂的标签,下面代码来举一下例子:

<table>
  <caption>这里是整个表格的标题</caption>
  <!-- thead 表示表格的头部,就是我们日常说的表头 -->
  <thead>
    <!-- th 表示这些内容是表格中的标题,而不是数据 -->
    <th>内容</th>
    <th>内容</th>
    <th>内容</th>
  </thead>
  <!-- tbody 表格的身体,里面是表格的主要内容 -->
  <tbody>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
  </tbody>
  <!-- tfoot 是表格的脚,可能应该叫做表尾,反正就是最后的总结部分,或者用来注释一些的内容, -->
  <tfoot>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
  </tfoot>
</table>

以上算是一个结构相对完整一些的表格吧,但是仅作为了解,遇到时知道是个什么就可以了。我觉得除非需要输出格式化数据的情况,其他都不太需要使用表格,因为它的灵活性比较差。

不过嘛,当然也有特殊情况啦。曾经,表格被作为重要的布局排版工具,虽然现在可以说已经被取代掉了,但是在许多特殊情况中,还是非得用表格不可。所以下一章我们来简单的谈一谈,如何用表格进行排版。

【本章助记卡片:卡片 for 第十六章