用 CSS 替代 HTML 的 table tag 设计网页版面

全栈程序员-用户IM • 2021年7月27日下午3:00 • 未分类

版工之前就耳闻 CSS 功能强大，可完全取代 HTML 的 table、tr、td 等 tag，做网页「外观 (user interface)」的编排。CSS 除了可避免陷在 HTML 多层的巢状 table 里，亦可明显减少网页档案大小，让页面日后可统一维护，而非逐一修改。日前版工找了一些书上的 CSS 范例，经简单修改并测试后，开放七个 CSS + div tag 网页排版的「样板」让大家下载 (.html 格式，可直接用浏览器开启)，内容如下：

(1) 两栏式版面，画面上的字段宽度可随浏览器自动调整
(2) 两栏式版面，画面上的字段宽度固定，不可随浏览器自动调整
(3) 三栏式版面，画面上的字段宽度可随浏览器自动调整
(4) 三栏式版面，画面上的字段宽度固定，不可随浏览器自动调整
(5) 多栏式版面，画面上的字段宽度可随浏览器自动调整
(6) 多栏式版面，画面上的字段宽度固定，不可随浏览器自动调整
(7) 非对称、字段坐标不固定，画面上的字段位置可随浏览器自动调整

本帖的示例代码下载点：
http://files.cnblogs.com/WizardWu/070915.zip

七个范例中，主要可区分为两大类：
• 页面中的字段，会随使用者的屏幕分辨率、鼠标拖曳浏览器边框，自动延展和调整
• 页面中的字段，宽和高固定，不会随使用者的屏幕分辨率、鼠标拖曳浏览器边框，自动延展和调整

透过 CSS 对整个 div 区块的统一设定，可让页面外观的编辑和维护工作变得轻松许多。不过有少数 CSS 的属性设定，需要额外考虑到浏览器的厂牌和新旧版本问题。此外本帖提供下载的多栏式版面范例中，亦要考虑到，当页面其中一栏的图文内容特别多时，是否会照字段的预设宽度往下延伸，抑或图文内容会围绕别的字段；此种情况可能会发生在「非固定栏宽」的页面中，此时就得再引用其它 CSS 的排版技巧加以调整。

CSS 除了版面设计功能强大外，还有许多其它的优点。像是要让使用者透过浏览器「打印」网页，传统的做法，开发人员可能会特地替需要打印的页面，重新排版、重写一个适合 A4 纸张打印的页面；但透过 CSS，我们可以在使用者要打印时，让其自动套用新的 CSS 样式表，而非 redirect 到另一个专供打印的网页，如此便可省下重新撰写打印页面的时间，及 Web server 的硬件系统资源。