第十六章 表格

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

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

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

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

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

原文链接:https://www.ek58.com/archives/3545,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?