html用表格来做网站布局

本文关键词：html用表格来做网站布局

别跟我扯什么语义化，别跟我提什么响应式，对于咱们这种还在搞老项目维护或者做简单展示页的人来说，div+css有时候真不如table来得实在。我就直说了，这篇文不教你怎么成为前端大神，只教你怎么用最笨的办法，最快把页面排好，特别是那种老板急着要、预算又不够的烂摊子。

记得08年左右，我刚入行那会儿，给一个做五金配件的小厂做官网。那时候老板特抠门，说“能看就行，别整那些花里胡哨的”。我折腾了一周div+css，结果在IE6下全乱了，那个横向导航栏在低分辨率屏幕上直接炸开，客户电话打爆了我的手机，骂得那叫一个难听。最后没办法，我偷偷把核心布局改回了table，两小时搞定，客户看着整齐划一的网格，满意得不得了。这事儿让我明白，技术没有高低，能解决问题才是王道。

现在很多人一听到“table布局”就摇头，觉得土，觉得过时。但你要知道，在某些特定场景下，比如邮件模板、后台数据报表、或者那种结构极其固定的单页宣传品，table依然是王者。它最大的优点就是“稳”。不管浏览器怎么折腾，单元格里的内容就是乖乖待在那儿，不会像浮动元素那样飘来飘去。

如果你非要尝试用html用表格来做网站布局，或者只是想在老代码里修补一下，听我几句劝，按这个路子走，能少掉不少头发。

第一步，别一上来就写复杂的嵌套。先把整个页面当成一个大格子。用

。记住，border一定要设成0，不然你预览的时候满屏黑线，自己看着都心烦。cellpadding和cellspacing也设成0，这是为了消除默认的内边距和外边距，方便你后续控制间距。

第二步，规划你的行和列。比如你要做一个典型的“上中下”结构，上面是头图，中间是左右两栏内容，下面是版权信息。那就先写三行

。第一行放一个td，colspan="2"，这样头图就占满整行。第二行分两个td，左边宽度固定比如200，右边宽度auto或者百分比。这时候你会发现，用table控制宽度比用div的float清爽多了，不用清浮动，不用担心高度塌陷。

第三步，填充内容。在td里面塞你的h1、p、img。这时候你会发现，align="center"或者valign="middle"这些属性在table里简直是神一般的存在。你想让文字垂直居中？在td里加个valign="middle"就行，而在div里你得折腾margin-top或者flex，对于新手来说，table的容错率太高了。

当然，我也不是让你天天这么干。现在主流开发还是推荐div+css，毕竟SEO友好，代码轻量。但是，当你遇到那种必须兼容IE8以下，或者需要极致稳定的后台管理界面布局时，html用表格来做网站布局绝对是一个被低估的备用方案。

我有个做外贸B2B的朋友，去年接手了一个十年前的老站，全是table写的。他想重构，结果发现重构后的页面在部分老旧安卓机上加载极慢，因为JS解析CSS太耗时。最后没办法，还是把关键模块改回了table，加载速度反而提升了30%。你看，数据不会撒谎。

所以，别太傲慢。工具只是工具，table虽然老了，但它依然锋利。当你被flex的兼容性搞得焦头烂额时，回头看看那个简单的

最后啰嗦一句，用table布局的时候，尽量别嵌套太深，超过三层就晕了。保持代码整洁，注释写清楚，哪怕以后别人接手，也能看懂你当年的“良苦用心”。