Y2K网页制作全攻略（三）：表格布局入门 作者：蓬岸 Dr.Quest 编号：1914861305048855466 创建于：2025-06-21 17:41:51 修改于：2025-06-22 15:52:46 -------------------- 任务三：表格布局 在1990年代中期，WWW逐渐走出学术领域，成为新的大众传播媒介。但作为一个电子出版工具，人们自然会期待WWW网页能够像面向纸张的桌面出版工具，比如PageMaker（InDesign的前身），或者Microsoft Publisher那样自由布局。 在80年代中期到90年代，桌面出版（Desktop Publish） (Link: https://baike.baidu.com/item/%E6%A1%8C%E9%9D%A2%E5%87%BA%E7%89%88/3651660)无疑是当时的显学，图形界面和激光打印机的广泛应用让平面设计师和市场营销人员能够在办公室中制作高质量的印刷材料。而许多桌面出版的布局习惯也自然被继承到网页设计中，如下图中所示的三栏式布局。 (Image: https://pengan1987.github.io/images/picx/v2-1fe524cd85cf834f1a0089b0e7069a34_720w.jpg) 而对于网页制作者来说，这样的布局在当时几乎只能用表格来完成，虽然在1996年层叠样式表（CSS） (Link: https://baike.baidu.com/item/CSS/5457)被发明出来，但直到2000年代其支持情况仍然参差不齐。此外，CSS需要使用选择器（selector）将样式应用到特定的元素上，这导致学习门槛大幅增加。 2010年前后，表格布局仍然是非常常见的布局复杂网页的方式，比如下图所示的新浪科技Windows Vista专区 (Link: https://tech.sina.com.cn/s/focus/vista/)，使用Composer的文件→打开网络地址菜单可以将网页加载到编辑器中，然后在窗口下方的编辑模式工具条中选择“HTML标记符”，即可查看网页中各个元素所使用的标签。 (Image: https://pengan1987.github.io/images/pic1/v2-631d13e8be89766e279db0ff339c7af5_720w.jpg) 我们会发现该网页无论是导航栏还是内容，只要是需要左右分区的部分，大都使用表格元素，如、
等来组织。 直到今天，表格布局仍然是一种有效的布局手段，它是实现像素精度网页排版最易学的方式。而它的缺点对个人主页而言并不重要：使用无表布局 (Link: https://zh.wikipedia.org/zh-cn/%E7%84%A1%E8%A1%A8%E6%A0%BC%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88)的主要目标是语义化 (Link: https://baike.baidu.com/item/%E8%AF%AD%E4%B9%89%E5%8C%96/1811394)，政治正确的理由是改善视障人士使用屏幕阅读器的使用体验，但更重要的理由则是搜索引擎优化（SEO）——语义化的代码更容易被搜索引擎爬虫（以及AI机器人）抓取和解析，搜索引擎厂商则通过提升网站排名鼓励这种实践——鉴于W3C实际上也被搜索引擎、AI巨头如谷歌、微软所把控，现代Web标准实际上充斥着这些科技巨头的利益诉求。 本系列在第一章 (Link: https://zhuanlan.zhihu.com/p/1914849977265550312)即强调不关注网站运营，但网站运营中的高度竞争性是站长们进行搜索引擎优化的主要动力，即大量网站的内容是同质化的，而搜索引擎作为流量入口，网站在搜索结果中出现的顺序和频率即决定了流量的分配。而基于流量计费的广告又通常是网站的主要收入来源。因此在作为流量入口的搜索引擎面前那些以盈利为目的的站长们毫无议价能力，必须接受搜索引擎厂商的一切安排，哪怕这些“改进”仅仅是服务于搜索引擎的爬虫程序而非真实用户。 模仿“秘密花园”布局 旖旎的“秘密花园 (Link: http://www.yini.org/club/garden.html)”网站是中文互联网的“活化石”之一，它建立于1999年，至今其版式、内容仍基本保持不变，除了第二章 (Link: https://zhuanlan.zhihu.com/p/1914854590291083923)所述的对背景音乐的适应性改造之外，其他部分很好的保持了千禧年前后网站的风貌。而“秘密花园”所使用的就是一种简单有效的表格布局方案，很适合新手模仿。 (Image: https://pengan1987.github.io/images/pica/v2-d6633dccf4121235df196c65d97a50b6_720w.jpg) 使用Composer的“HTML标记符”模式分解网页标签，我们发现“秘密花园”的表格布局非常简单，只有一行、三列，左右两列各放置一排栏目链接，而中间一列仅放置插图。 (Image: https://pengan1987.github.io/images/picx/v2-5cf1902a702db0207cbee5225485c643_720w.jpg) 接下来我们来尝试还原这一布局，首先，我们在Composer中创建一个空白网页，添加少量文字和初始的表格，并设置为居中。注意创建表格时应该创建一个固定像素宽度的表格，同时边界设置为0 (Image: https://pengan1987.github.io/images/picx/v2-4a4df6ff0203936768d8fcfe9a9dfa4a_720w.jpg) 创建好的表格如下，红色虚线表示的边框代表表格边框只是为了方便编辑而显示的辅助线，不会出现在最终效果里。 (Image: https://pengan1987.github.io/images/pic1/v2-a6c0687420f6e10120cb240edd66e3f1_720w.jpg) 然后加入最初的内容，设置背景，菜单等。我们看到三栏式的结构已经出现了，但内容并没有对齐。 (Image: https://pengan1987.github.io/images/picx/v2-73c9bf098ec665948e6975a0b0a180f4_720w.jpg) 然后就是布局所需的工作啦！在表格空白处点右键→表格单元属性，打开属性设置对话框，或者在表格空白处双击也可以打开该对话框 (Image: https://pengan1987.github.io/images/pic1/v2-76f5dbf6745de8bc7b4ab64419a51100_720w.jpg) 然后将左右两栏设置为固定宽度，比如100像素，内容对齐设置为垂直→中部，水平→居中。中间的图片框不设置固定宽度。 (Image: https://pengan1987.github.io/images/pica/v2-9871c0113efe76848a2cfc8a23e7273a_720w.jpg) 当所有内容对齐之后，就可以预览一下效果了，是不是还不错？ (Image: https://pengan1987.github.io/images/picx/v2-b3610e4539bf890a614318bfa1bc1784_720w.jpg) 模仿立体相框效果 但如果我们看“秘密花园”网页的话，还会发现它的内容是呈现在一个有立体感的“相框”之内的，“相框”之外是深色的背景图案，而之内则是浅色的纯色背景，如果我们观察前面“HTML标记符”模式下显示的标记，就会发现原来这个“相框”是一个只有一行、一列的表格！ 那我们就也来制作这样一个“相框”吧！ 创建一个空白表格，宽度略宽于之前的内容，行数和列数都设置为1，表格对齐选居中，边界设置为一个“相框”的宽度，比如6像素，然后我们就得到一个扁长的“相框”了。 (Image: https://pengan1987.github.io/images/picx/v2-62a776259ff91d5a0629959177677095_720w.jpg) 之后就把我们之前的内容剪切粘贴进去就好 (Image: https://pengan1987.github.io/images/pica/v2-172e9b1d337fbc122a3d1babfe85471b_720w.jpg) 细心的你可能还会注意到，为什么“秘密花园”的“相框”是浅绿色，而我们的是浅灰色？有没有办法改颜色呢？ 当然可以！这就要请出非常古老的表格属性“borderColor”啦，从1996年的Internet Explorer 3.0 (Link: http://www.citycat.ru/doc/HTML/IExplorer.30/tables.htm)至今，已经快30岁了呢。Y2K的互联网体验怎能少了它呢？ 打开表格单元属性，然后选择左侧的“表格”（macOS会有bug显示不出来，但功能是一致的）→高级编辑 (Image: https://pengan1987.github.io/images/pic1/v2-34e8e288d6dfedf70083e8192a1a44ba_720w.jpg) 然后就可以加入一条borderColor属性了 (Image: https://pengan1987.github.io/images/picx/v2-90046078ff2c345c668d99ec889fd8f0_720w.jpg) 预览一下效果，是不是还不错。 (Image: https://pengan1987.github.io/images/picx/v2-01275b1ccac0e727e9e11ce235200b89_720w.jpg) 到这里你已经掌握了表格布局的基本方法啦！下一节我们将讨论使用表格布局来完成更加复杂、不规则板式的方法。