排版呢,就是把网页中的内容放在各种你希望它在的地方。就像把一篇篇平白的文章,排布成一张丰富多彩的报纸。

回想一下,我们到目前所学到的各种标签,并没有非常实际的排版功能。对,可以像写文章一样从上到下的按顺序写。但这明显非常的不灵活,和我们日常看到的网页差距极大,所以我们会希望对内容进行排版。

不过前面我一直强调一个概念:HTML 负责说明这个元素是什么,而它长什么样子则由 CSS 去负责解释。所以其实排版这部分是 CSS 的工作。可是在曾经的某一段时间,事情并不是这个样子的,那时候 HTML 还在一个人独挑大梁,每一种工作他都会亲力亲为,而排版这件事情,大部分都是通过表格来进行的。

听到这里,你会发现,原来这是一项已经被淘汰的技术,那我们还学它做什么呢?一项事物,如果曾经存在过,那么必然会留下它的痕迹,更何况,他淘汰的时间也并不太长,事实上还颇有一些余威犹存的意味。比如我们熟悉的淘宝,为了安全,限制了许多东西的使用,所以我们不得不用一些笨办法来变通;还有一个大家可能都没注意过的地方,就是邮件里面,如果需要复杂一些的排版,也只能使用表格。

那么讲一讲它的原理吧,其实也是超级简单的,假如我们把我们的页面整个作为一个表格,在里面分出几行几列,并填上内容,是不是比我们简单的从上往下书写的,要复杂了?

这就好像,我们有时候会遇到一些对 Word 排版用不好的同学,你会发现它们在描述复杂情况的时候,喜欢使用 Excel,因为想把一个东西放在哪里,就在哪里的单元格里书写就可以了。我们用表格排版,也是一样的道理。

如果我们的页面不考虑复杂的变化,单纯的写成某个样子,然后放在那里展示就行了,仿佛用表格也是一个可以接受的选择。但是当你真的看到它的代码之后,你会为这一选择而后悔的。

上一节课我们就说过,当表格加入了拆分和合并单元格之后,再加上一些它特有的属性,代码就变得复杂而混乱起来。你以为这就是全部?想一下,我们在学列表的时候,讲到了列表的嵌套。那么对于表格同样可以进行嵌套,因为我们使用拆分和合并单元格之后,表格十分容易混乱,变得难以调整,在这种情况下,我们就不如在单元格中再放入一个表格,从而进行十分复杂的拆分。效果确实是达到了,但是代码已经惨不忍睹了,每一层表格,就是三到四层的标签嵌套,多层表格嵌套以后,谁还能够凭空读得懂这些代码?如果谁读得懂,我只能说那真的是有时间闲的……

所以这一章我也只是做一下介绍,讲讲它的原理,在真正需要使用的时候,别偏执于用代码写会感觉自己很酷了,为它浪费生命不值得,乖乖用各种可视化编辑器去吧。当然遇到某些特别的地方,切换到代码去修改一些细节,还是可以有的。

有兴趣,或者工作中确实用得到的朋友,可以自己动手尝试一下。等到后面我们学到 CSS 排版,再对比一下两种方法,来加深理解。反正这么麻烦的东西,我是不想动手演示了,因为如果不用极大的篇幅去描述,很容易我说绕口令,大家一起犯迷糊。

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