13.7　常用页面布局标签

通常，在页面布局设计中，使用最多的就是表格标签与div标签。本节就来讨论如何使用和选择table+css与div+css的方式进行页面布局设计。

13.7.1　表格标签

表格在Web页面中应用非常广泛，它可以方便灵活地排版，很多动态大型网站也都是借助表格排版，表格可以把相互关联的信息元素集中定位，使浏览页面的人一目了然。

表格标签如表13-18所示。简单地讲，一个简单的表格由＜table＞元素以及一个或多个＜tr＞、＜th＞或＜td＞标签组成。其中，表格由＜table＞标签来定义。每个表格均有若干行（行由＜tr＞标签定义），每行被分隔为若干个表头（表头由＜th＞标签定义）或者单元格（单元格由＜td＞标签定义）。表头＜th＞或者单元格＜td＞可以包含文本、图片、列表、段落、表单、水平线、表格等。

下面的示例定义了一个简单的无边框的两行三列的表格：

＜table＞

＜tr＞

＜td＞第1行中的第1列＜/td＞

＜td＞第1行中的第2列＜/td＞

＜td＞第1行中的第3列＜/td＞

＜/tr＞

＜tr＞

＜td＞第2行中的第1列＜/td＞

＜td＞第2行中的第2列＜/td＞

＜td＞第2行中的第3列＜/td＞

＜/tr＞

＜/table＞

运行上面的表格，结果如图13-26所示。

图　13-26　无边框的两行三列的表格

1.表格的边框

从上面我们已经知道，默认情况下，表格将不显示边框。但在大多数情况下，为了网页布局的美观性都需要为表格设置边框。

（1）＜table＞标签边框设置

在＜table＞标签里面，可以通过CSS的border与border-width属性来为它设置边框。其中，border属性用来设置＜table＞标签边框的属性，border-width属性用来设置＜table＞标签边框的粗细。如下面的示例将为＜table＞标签设置一条细线边框：

table

{

/设置边框属性：样式(（slid=实线）、颜色（#006699=蓝）/

border:solid#006699；

/设置边框的粗细：上右下左/

border-width：1px 1px 1px 1px；

}

在上面的样式中，因为“border-width：1px 1px 1px 1px”的上、右、下、左都是1px，所以它可以简写成“border-width：1px”。运行上面的代码，结果如图13-27所示。

图　13-27　为＜table＞标签添加边框

（2）＜th＞或者＜td＞标签边框设置

上面为＜table＞标签设置了一条蓝色的细线边框，如图13-27所示，它将显示在表格周围。接下来，为表格的＜th＞或者＜td＞标签设置一条蓝色的细线边框，其设置方法与＜table＞标签的设置一样。如下面的代码所示：

table

{

border:solid#006699；

border-width：1px 1px 1px 1px；

}

th, td

{

border:solid#006699；

border-width：1px 1px 1px 1px；

padding：2px；

}

运行上面的代码，结果如图13-28所示。

图　13-28　为＜td＞标签添加边框

（3）合并表格内外边框border-collapse

在图13-28中，因为＜table＞与＜td＞标签都设置了一条粗细为1px的边框，即这时候的表格边框有2px：外面1px，里面还有1px。所以看到的是如图13-28所示的双边结果。这时就可以使用border-collapse属性来合并表格内外边框，使其合并为一条边框。如下面的代码所示：

table

{

border-collapse:collapse；

border:solid#006699；

border-width：1px 1px 1px 1px；

}

运行上面的代码，结果如图13-29所示。

图　13-29　合并表格内外边框

（4）设置分隔线的显示状态rules

除了使用上面的样式属性来控制表格边框的显示之外，还可以使用表格的rules属性来控制表格分隔线的显示，如可以任意要求表格只显示行与行或者列与列的分隔线等。rules属性的取值如表13-19所示。

下面的示例展示了如何使用rules属性来显示行与行的分隔线：

＜html xmlns="http：//www.w3.org/1999/xhtml"＞

＜head id="Head1"runat="server"＞

＜title＞测试页面＜/title＞

＜style type="text/css"＞

table

{

border:solid#006699；

border-width：1px 1px 1px 1px；

}

td

{

border-color:Green；

}

＜/style＞

＜/head＞

＜body＞

＜form id="form1"runat="server"＞

＜table rules="rows"＞

＜tr＞

＜td＞第1行中的第1列＜/td＞

＜td＞第1行中的第2列＜/td＞

＜/tr＞

＜tr＞

＜td＞第2行中的第1列＜/td＞

＜td＞第2行中的第2列＜/td＞

＜/tr＞

＜/table＞

＜/form＞

＜/body＞

＜/html＞

在上面的代码中，因为将rules属性设置成了值rows，即只显示行与行的分隔线，所以运行结果如图13-30所示。

图　13-30　使用rules属性来显示行与行的分隔线

2.合并表格行或者列

要合并表格的行或者列，只需在表格的＜th＞标签或者＜td＞标签中设置rowspan或colspan属性的属性值就可以了，它们的默认值为1。其中，colspan属性表示要合并的列数，如colspan=“2”表示这一单元格需要将两列合并为一列显示；rowspan属性表示要合并的行数，如rowspan=“2”则表示这一单元格需要将两行合并为一行显示。

下面的示例演示了这种合并技术，如下面的代码所示：

＜html xmlns="http：//www.w3.org/1999/xhtml"＞

＜head id="Head1"runat="server"＞

＜title＞测试页面＜/title＞

＜style type="text/css"＞

table

{

border-collapse:collapse；

border:solid#006699；

border-width：1px 1px 1px 1px；

}

th, td

{

border:solid#006699；

border-width：1px 1px 1px 1px；

padding：2px；

}

＜/style＞

＜/head＞

＜body＞

＜form id="form1"runat="server"＞

＜table＞

＜tr align="center"＞

＜th colspan="3"＞学生基本信息＜/th＞

＜th colspan="2"＞成绩＜/th＞

＜/tr＞

＜tr align="center"＞

＜th＞姓名＜/th＞

＜th＞性别＜/th＞

＜th＞专业＜/th＞

＜th＞课程＜/th＞

＜th＞分数＜/th＞

＜/tr＞

＜tr align="center"＞

＜td＞张三＜/td＞

＜td＞男＜/td＞

＜td rowspan="2"＞计算机应用＜/td＞

＜td rowspan="2"＞C语言＜/td＞

＜td＞68＜/td＞

＜/tr＞

＜tr align="center"＞

＜td＞王晓＜/td＞

＜td＞女＜/td＞

＜td＞89＜/td＞

＜/tr＞

＜/table＞

＜/form＞

＜/body＞

＜/html＞

运行上面的代码，结果如图13-31所示。

图　13-31　合并表格行列的示例

13.7.2　div标签

相信到现在为止，大家对div标签并不陌生，因为在前面已经多次接触过div标签的页面布局。如13.5.3节的示例就是一个典型的div布局例子。与上面的table相比，div+css的页面布局似乎显得更加专业，因为XHTML网站设计标准中，将不再使用表格定位技术，而是采用div+css的方式实现各种定位。同时，div+css的页面布局方式也具有如下优势：

1）表现和内容相分离。将设计部分剥离出来，放在一个独立样式文件中，HTML文件中只存放文本信息。

2）提高搜索引擎对网页的索引效率。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。

3）代码简洁，提高页面浏览速度。对于同一个页面视觉效果，采用div+css布局的页面容量要比table布局的页面文件容量小得多，代码更加简洁，前者一般只有后者的1/2大小。对于一个大型网站来说，可以节省大量带宽，并且支持浏览器的向后兼容，使你的网站都能很好地兼容。

4）易于维护和改版。样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。你只要简单地修改几个CSS文件就可以重新设计整个网站的页面。

因为div+css的页面布局的内容很多，我们不可能在这里一一阐述。下面就几个常用的应用进行讲解。

1.左栏固定，右栏宽度自适应

在实际应用中，有时候需要左栏固定宽度，右栏根据浏览器窗口大小自动适应。通常，使用div+css来布局这样的页面方法很简单，只需要将左栏宽度设定为固定值，右栏不设置任何宽度值，并且右栏不浮动就可以达到这样的效果。代码如下所示：

＜！DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

＜html xmlns="http：//www.w3.org/1999/xhtml"＞

＜head runat="server"＞

＜title＞＜/title＞

＜style type="text/css"＞

left

{

background-color：#E8F5FE；

border：1px solid#A9C9E2；

float:left；

height：100px；

width：100px；

}

right

{

background-color：#F2FDDB；

border：1px solid#A5CF3D；

height：100px；

}

＜/style＞

＜/head＞

＜body＞

＜form id="form1"runat="server"＞

＜div id="left"＞左栏—固定＜/div＞

＜div id="right"＞右栏—宽度自适应＜/div＞

＜/form＞

＜/body＞

＜/html＞

在上面的代码中，在样式#left中设置了左栏div的宽度(（wdth)为100px，并设置了浮动属性(（foat)的值为left，从而保证左栏宽度固定。而右栏没有设置宽度值，默认情况下它会随着浏览器窗口自适应伸展。运行上面的代码，结果如图13-32所示。

图　13-32　左栏固定，右栏宽度自适应

2.div水平居中

在div+css的页面布局中，最常用到的就是使整个页面水平居中的效果，这也是页面布局中最基本的问题。简单地讲，它有如下三种方法：

（1）margin：0 auto

“margin：0 auto”表明div到左右两侧的距离自动设置，上下为0（可以为任意）。使用示例如下面样式所示：

div

{

width：760px；

margin：0 auto；

border：1px solid#006699；

background-color：#CCCCCC；

}

值得注意的是，使用这种方式进行div水平居中时，必须在网页里面添加DTD声明。如下面的代码所示：

＜！DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

当然，还可以使用下面的样式来代替样式“margin：0 auto”，因为它们之间是等价的。

margin-left:auto；

margin-right:auto；

（2）相对定位与负的边距

上面已经说过，如果使用样式“margin：0 auto”进行div水平居中，就必须在网页里面添加DTD声明。但往往许多设计者都经常忘记添加DTD声明，这时便出现了第二种方法—相对定位与负的边距。

相对定位与负的边距方法就是对div进行相对定位，然后使用负的边距抵消偏移量。这种方法比较容易实现，如下面的代码所示：

div

{

position:relative；

width：760px；

left：50%；

margin-left：-380px；

border：1px solid#006699；

background-color：#CCCCCC；

}

在上面的代码中，设置div的定位是相对于其父元素body标签的，然后将其左边框移动到页面的正中间（也就是left：50%含义）；最后再从中间位置向左偏移回一半的距离来，这样就实现了水平居中。

（3）text-aligh:center

有时候你会发现，上面两种居中的方法还是不行，它们不能兼容一些浏览器。于是便出现了第三种方法来解决居中问题。这种方法主要是考虑IE，它建立在第一种方法的基础之上，需要设置body元素。示例如下面的代码所示：

body

{

text-align:center；

}

上面的样式虽然简单地解决了居中问题，但是它又带来一个新的问题：页面中所有文字都是居中的，这样很不好看。这时只需要在div定义中加上“text-align:left”之类调整的设置就行了。

3.经典的三行两列布局

除了上面所讲的页面三栏动态布局之外，三行两列布局也是页面中非常经典的布局方案之一，它在很多的企业网站或者其他小型的展示类网站使用较多。它们都有一些共同的特点，即顶部放一个大的导航或广告，右侧是链接或图片，左侧放置内容，页面底部放置版权信息等。它的布局结构如图13-33所示。

图　13-33　三行两列布局示例

在这里值得注意的是，由于中间的sidebar、containe是两列并行的，因此需要设置浮动，让它们各就各位。但整个页面是需要居中于浏览器窗口的，在这里就需要为它们设置一个容器main，让sidebar、containe在这一容器中浮动，而不必考虑居中问题。main在这里就发挥了居中或者设置背景的功能。因此，可以把页面布局如下：

＜div id="header"＞顶栏(（hader)＜/div＞

＜div id="main"＞

＜div id="sidebar"＞左栏(（sdebar)＜/div＞

＜div id="containe"＞右栏(（cntaine)＜/div＞

＜div id="clearfloat"＞＜/div＞

＜/div＞

＜div id="footer"＞底部(（foter)＜/div＞

在上面的布局中，＜div id="clearfloat"＞＜/div＞在这里起到了在sidebar、containe结束的地方清除浮动的效果，从而可以让浏览器知道如何处理footer层，而不是直接放到上面，在视觉上消失。整个布局如代码清单13-6所示。

代码清单13-6三行两列布局示例代码

＜！DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

＜html xmlns="http：//www.w3.org/1999/xhtml"＞

＜head id="Head1"runat="server"＞

＜title＞测试页面＜/title＞

＜style type="text/css"＞

*

{

margin：0；

padding：0；

}

header

{

width：776px；

height：50px；

margin：0 auto；

background：#06f；

}

main

{

width：776px；

margin：0 auto；

}

main#sidebar

{

width：200px；

float:left；

background：#f93；

}

main#containe

{

width：576px；

float:right；

background：#dceafc；

}

footer

{

width：776px；

height：40px；

margin：0 auto；

background：#666；

}

clearfloat

{

clear:both；

height：1px；

overflow:hidden；

margin-top：-1px；

}

＜/style＞

＜/head＞

＜body＞

＜form id="form1"runat="server"＞

＜div id="header"＞顶栏(（hader)＜/div＞

＜div id="main"＞

＜div id="sidebar"＞左栏(（sdebar)＜/div＞

＜div id="containe"＞右栏(（cntaine)＜/div＞

＜div id="clearfloat"＞＜/div＞

＜/div＞

＜div id="footer"＞底部(（foter)＜/div＞

＜/form＞

＜/body＞

＜/html＞