高校门户网站的表格布局技术研究

蓝鹰+刘松

摘 要： 网页布局的优良是决定高校门户网站是否美观的一个重要因素，合理的布局不仅能够将网页中的文本、图片等内容完美并直观地呈现给高校门户网站浏览者，而且能够合理地安排网页空间，优化网页的显示效果和提高网页的下载速度，从而给用户良好的浏览体验。

关键词： 高校门户网站； 表格布局

中图分类号：TP302.1

文献标志码：A

文章编号：2095-2163（2017）02-0110-03

Abstract：Excellent web page layout is an important factor to the appearance of the university portal website. The reasonable layout can not only show the web text， pictures and other content to the user of the university website， but also can arrange space reasonably， optimize the page display and improve the web page download speed， which could give users a good browsing experience.

Keywords：university website； table layout

1 表格布局方法概述

表格布局是一种经典的页面布局设计模式，在HTML技术流行的早期，由于浏览器的功能并未发展完善，要想让网页内的各类HTML元素均能形成一个良好格局则也不是一件易事。研究可知，表格技术不仅可以控制每个单元格的具体宽度和高度，而且可以构建表格之间的互相嵌套，从而做出效果精美的表格。正是由于表格的这些特点，就使得表格操作即已开发成为网页布局高频通用的一种处理方式。总地来说，使用表格将使得各个网页元素均能准确排布于网页设计者先期指定的页面位置。

传统表格布局方式利用了HTML中表格元素具有的无边框特性。由于标记可以在显示时使得单元格的边框和间距为0，即不显示边框，因此可以将网页中的各个元素按照版式划分添加入表格的各个单元格中，从而实现复杂的排版组合。

HTML表格由边框、行、列、单元格组成。整张表格的边缘称为边框，水平方向的一组单元格称为行，垂直方向的一组单元格称为列，行列交叉部分称为单元格，单元格中的内容和边框之间的距离称为边距，单元格和单元格之间的距离称为间距，表格参考示意则如图1所示。具体的表格实现代码如下：

<！--TABLE表格标记，BORDER边框宽度属性-->

<！--CELLSPACING单元格间距，CELLPADDING单元格边距-->

[WB] <！- -TR行标记-->

[DW] <！- -TD单元格标记-->

[DW]

[DW]

[DW]

[DW]

[DW]

[DW]

[DW]

[DW]

在此，可给出表格布局的实用解析步骤如下：

1）在使用表格设计页面时，首先应通盘规划页面中各元素的具体位置，并通过表格将这些区域划分出来。

2）在表格单元格中插入相应的页面元素。

3）通过表格属性精细调整各单元格的大小、位置，使网页中各个元素的所在位置与实际需要相符。

4）灵活利用表格的背景属性、框线属性设置准确定位页面各个元素，从而创建布局合理、樣式美观的网页效果。

2 表格布局之单元格跨行、跨列技术

一般情况下，常规的二维表格很难满足网页开发者制作精美表格布局的需要，而单元格的跨行合并和单元格跨列技术则有效解决了这个问题。设置单元格跨行合并的步骤如下：

1）首先，在需要跨行合并单元格集合中，找到最顶端的单元格，并使用ROWSPAN属性指定需要合并的单元格数量。

2） 在需要跨行合并单元格集合中，找到除最顶端单元格以外的其它所有单元格，并对这些单元格附属关联的标记执行删除操作指令。

3）将需要配置在合并单元格中的HTML元素代码，直接调入最顶端单元格对应的标记中即可。利用单元格跨行、跨列技术最终获得的表格布局效果如图2所示，并可进一步得到其设计开发代码展示如下。

 ：

 ：

导航栏

 ：

 ：

版权信息

3 表格布局之表格嵌套技术

除了单元格跨行、跨列技术之外，表格嵌套是另一类公认实用的表格布局技术。利用该技术不仅可以制作出具有精美效果的网页，而且能够根据页面布局的描述要求设计得到精确编排。表格嵌套技术是指基于插入页面元素的设计需要而在另一个表格的某个单元格里另行插入一个独立的若干行和列的二维表格。对于这个独立的表格，使用时即可如同对待任何其它普通表格一样进行格式设置，但是其宽度却要受到所在嵌套单元格大小的限制。该部分的主要技术代码如下。运行后的页面效果则如图3所示。

4 表格布局技術的优缺点

表格布局最大的优点是浏览器兼容性好。正是由于表格布局效果在不同的浏览器中更易保持一致的特点，因此很多设计人员已日趋青睐于选择使用表格开展页面布局设计。但需要指出的是，如果采用表格嵌套技术进行表格页面布局，会出现表格嵌套层次越多，网页的载入速度越慢的情况。为此，网页设计者要适度控制表格嵌套的层次，兼顾页面布局效果和网页载入速度。

5 结束语

实际应用效果表明，表格布局是一种功能完备、且前景可期的Web页面布局方式，不仅能够被开发者所轻松掌握，而且更在各种类型的浏览器显示过程中表现出优质高效的兼容性，这也将为高校门户网站日后升级和维护带来极大的方便。

参考文献：

[1]郑娅峰，张永强. 网页设计与开发[M]. 北京：清华大学出版社，2016 .

[2] 于淑云. 高校可配置网站集群前端框架设计[J]. 长春工业大学学报（自然科学版）， 2015，36（5）：519-523.