网页编排小技巧
直到最近，HTML已经变成了一个贫乏的网页编排工具，想要将文字和图形精确地放置在网页上，总是很困－－更不幸的是，大的浏览器制造者和HTML的标准本身始终在争论著， HTML未来应该如何处理网页的编排。
在他们有结论之前，有一些标签可以帮助解决这些问题。<BLOCKQUOTE>标签正如它名字所说：可以将文字缩排到看起来在一个区块中，因此它通常被使用在问答句上。另外，<PRE>标签允许你将预设文字插到HTML的文件中。
但最好的网页编排好帮手是<TABLE>标签；您可以用它来分隔网页，并在分隔区中控制元素的放置，若想隐藏一个表格，只要缩小它的边界。但若要发挥表格的真正功用，须从两方面来进行：表格栏位的编排－－在这里可以放置你的内容－－以及在栏位中编排内容的位置。接著看下去吧！我们将提供您更多线索。
区块、列表和预设文字
1、区块中的文字
假如您想两边一起缩排文字，试试看<BLOCKQUOTE>标签。（缩排程度在每个浏览器上不尽相同，Navigator和IE可将文字两边都缩排40个像素。） 只要将您想要缩排的文字放在一对<BLOCKQUOTE>标签中，在blockquote中的文字，可以用标准的<P>或<BR>格式化标签来控制换行，也可以用像<I>和<B>的文字控制标签。这里有一个blockquote区块的例子：
<BLOCKQUOTE>
让我们一起走，只有你和我，<BR>
当夜色渐渐笼罩整个天空<BR>
就像一个病人醉倒在桌上<BR>
<BR>
--T.S.伊里雅德，<I>爱尔法特 普鲁法克的情歌</I>
</BLOCKQUOTE>
2、区块中的影像
别只局限自己只将文字放入区块中。您也可以把影像放入区块中。若想将图形周围各缩排40个像素，您会发现这是一个好方法。例如，试试这个指令：
<BLOCKQUOTE> <IMG SRC="image.gif"> </BLOCKQUOTE>
3、巢状区块文字格式
您也可以把blockquote以巢状方式，一个放在另一个里面，来产生较大的文字缩排效果。一对巢状的blockquote可以产生约80像素的两侧文字缩排，三对巢状的blockquote可以产生120像素的两侧文字缩排，以此类推，请看下例：
<BLOCKQUOTE>
<BLOCKQUOTE>
你可以将我写入历史<BR>
运用你最激烈的扭曲谎言<BR>
你也可以践踏我犹如粪土<BR>
但依然，就像尘土，我将昂扬<BR>
<BR>
--马雅 安杰罗，<I>我依然昂扬</I>
</BLOCKQUOTE>
</BLOCKQUOTE>
4、设计一个新的列表
当您学HTML时，常被教导告诉您有三种清单：项目符号列表（Unordered List），浏览器会在项目之前插入项目符号；顺序列表（Ordered List），浏览器会在项目之前插入数字编号；以及定义式列表（Definition List），浏览器会将项目全靠左对齐，并定义说明在下一行缩排。（如果您需要唤起一些记忆，如何制做这些列表，可以参考CNET功能的「HTML基本入门」）
但假如您想要一个不需项目符号或数字编号的缩排列表，您只要简单的在清单前面加上<UL>标签，但不要加上任何<LI>标签；最后再加上<BR>标签将列表中的项目分开，就像下面这样：
<UL>
项目 1<BR>
项目 2<BR>
项目 3
</UL>
这样您就会得到一个没有项目符号和数字编号的缩排列表：
项目 1
项目 2
项目 3
当然这个技巧不只运用在列表上，您也可以将它用在快速的文字缩排和影像缩排。
5、预设文字格式
一般来说，HTML忽略了非HTML的指令。但<PRE>标签可以让您加入预设格式的文字。当文字本身是以单行间格表示时，<PRE>标签能够辨识换行键和空格键键入的多重空格。对于文字在浏览器下呈现的效果，<PRE>标签可以给您更多的控制权。举例而言，将一段文字以下列方式格式化：
<PRE>
我看到我们这一代的心灵被疯狂所摧毁，
在历史的洪流下赤裸裸的挨饿
黎明时，拖拉著他们的身躯走过黑人区的街道
寻找著下一个发泄怒气修理的对像
向往追求来自天堂天使之音的古代人们哟
连结对照到现代如繁星灯火般的机械城市夜晚
--亚伦 金士保，<I>豪尔</I>
</PRE>
6、预设表单格式
您可以在表单（Form）中用<PRE>标签把小方格排的整齐无误。例如，下面这个以名字和联络地址方格的表单，两个方格看起来并没有垂直对齐，因为名字有两个字而联络地址有四个字；若您尝试在名字和联络地址后面加上方格，联络地址后面的方格就会略为落后名字后面的方格，像这样：
名字
联络地址
然而，您可以用<PRE>标签将它们排整齐：简单将名字和其后的方格之间加入两个空白格就可以。
<PRE>
<FORM>
名字 <INPUT TYPE="text" SIZE="25">
联络地址 <INPUT TYPE="text" SIZE="25">
</FORM>
</PRE>
表 格
1、制作一个基本的表格
在您可以用表格方式做一些很炫的网页编排之前，您必需先知道如何做表格。<TABLE>和</TABLE>标签将表格中所有其它元素都包住。表格中的每一行是用<TR>（table row）标签设定，然后跟著<TD>（table data）标签来设定该行中每个栏位的内容。下面是一个两行与两列表格的程序码：
<TABLE>
<TR>
<TD>栏位内容</TD>
<TD>栏位内容</TD>
</TR>
<TR>
<TD>栏位内容</TD>
<TD>栏位内容</TD>
</TR>
</TABLE>
<TABLE>、<TR>、<TD>标签都有不同的属性，让您控制表格的外观和里面内容的放置。（读读我们其它的表格制作小技巧来熟悉它。）如果您不设定这些属性，表格的预定值会自定栏位内容。因此大多数浏览器，上面的程序码会产生一个没有外框的表格，就像这样：
栏位内容 栏位内容
栏位内容 栏位内容
假如您想更进一步了解表格的奥秘，看看W3C的表格规格明细。
2、加入外框－－然后移除
表格中当然不只是包含文字而已，您在网站上看到的大部份复杂的网页页面编排，都是在不同的表格栏位中加上文字和影像－－只是您看不到栏位间的线条或外框。<TABLE>标签的BORDER属性让您可以设定外框的宽度（用像素作为单位）。
制做一个外框为2像素的表格，只要在<TABLE>标签中加入BORDER="2"。若想得到一个隐形外框， 只要将BORDER属性设为0。（虽然大部份浏览器的表格外框内定值为0，在这特别地设定它，是确保外框在所有浏览器中都是隐形的。）
下面的两个例子说明这一切。左边是程序为2像素外框的表格，另一个是隐形外框的表格。执行结果像这样：
<TABLE BORDER="2">
<TR>
<TD>看看我们的产品</TD>
<TD><IMG SRC="duck.gif"></TD>
</TR>
<TR>
<TD>多了解一下我们</TD>
<TD><IMG SRC="eye.gif"></TD>
</TR>
</TABLE>
看看我们的产品
多了解一下我们
<TABLE BORDER="0">
<TR>
<TD>看看我们的产品</TD>
<TD><IMG SRC="duck.gif"></TD>
</TR>
<TR>
<TD>多了解一下我们</TD>
<TD><IMG SRC="eye.gif"></TD>
</TR>
</TABLE>
看看我们的产品
多了解一下我们
小技巧：先设定一个有外框的表格，展示出每一个元素是如何编排；当您确定所有元素都到定位后，再把外框属性设成 0.
3、制作无缝隙的表格编排
对于表格内容编排，最有用的两个属性是CELLPADDING和CELLSPACING。CELLPADDING属性（以像素为单位）来控制栏位内容到它外框之间的距离；而CELLSPACING属性（以像素为单位）控制了栏位与栏位间的距离。（以上两属性内定值都是2像素。）
看起来似乎这两个属性差异不大，但它们的确不太一样。以下两个表格有相同的程序码，除了第一个将CELLPADDING设成10像素。
<TABLE BORDER="2" CELLPADDING="10">
<TR>
<TD>看看我们的产品</TD>
<TD><IMG SRC="duck.gif"></TD>
</TR>
<TR>
<TD>多了解一下我们</TD>
<TD><IMG SRC="eye.gif"></TD>
</TR>
</TABLE>
cellpadding
看看我们的产品
多了解一下我们
第二个表格将CELLSPACING设成10像素：
<TABLE BORDER="2" CELLSPACING="10">
<TR>
<TD>看看我们的产品</TD>
<TD><IMG SRC="duck.gif"></TD>
</TR>
<TR>
<TD>多了解一下我们</TD>
<TD><IMG SRC="eye.gif"></TD>
</TR>
</TABLE>
cellspacing
看看我们的产品
多了解一下我们
现在如果您想将表格栏位内容一个接著一个，制作一个完美无缝隙的外观，只需简单设定表格的BORDER、CELLPADDING、CELLSPACING属性为0。下面的程序码是用表格将四张影像密合在一起合成一张图：
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD><IMG SRC="hat1.gif"></TD>
<TD><IMG SRC="hat2.gif"></TD>
</TR>
<TR>
<TD><IMG SRC="hat3.gif"></TD>
<TD><IMG SRC="hat4.gif"></TD>
</TR>
</TABLE>
4、 制作您想要表格栏位的形状
HTML并没有限制用一般方正的方格来做表格的编排，用<TD>标签的ROWSPAN和COLSPAN属性，您可以合并若干其它栏位的宽度或高度。如何使用这属性呢？只要简单地指定您需要合并的栏位数。
例如，下面两行三列的表格：
<TABLE BORDER="2">
<TR>
<TD>栏位内容</TD>
<TD>栏位内容</TD>
<TD>栏位内容</TD>
</TR>
<TR>
<TD>栏位内容</TD>
<TD>栏位内容</TD>
<TD>栏位内容</TD>
</TR>
</TABLE>
将第一行的三个栏位合并，只须加上COLSPAN="3"到<TD>标签内，并移除其它的两个<TD>标签。
<TABLE BORDER="2">
<TR>
<TD COLSPAN="3">栏位内容</TD>
</TR>
<TR>
<TD>栏位内容</TD>
<TD>栏位内容</TD>
<TD>栏位内容</TD>
</TR>
</TABLE>
栏位内容
栏位内容 栏位内容 栏位内容
假如您想将第一列的两个栏位合并，只须加上ROWSPAN="2"到<TD>标签内，同时移除第二行的第一个<TD>标签：
<TABLE BORDER="2">
<TR>
<TD ROWSPAN="2">栏位内容</TD>
<TD>栏位内容</TD>
<TD>栏位内容</TD>
</TR>
<TR>
<TD>栏位内容</TD>
<TD>栏位内容</TD>
</TR>
</TABLE>
栏位内容 栏位内容 栏位内容
栏位内容 栏位内容
当然您可以做出比上面范例更复杂的表格。如果你要这样的话，建议您先画好您的表格草稿再制作它们。
5、制作您想要表格栏位的大小
一般来说，表格用内定值来调整栏位的资料。但是如果您想要一个不同大小的栏位时，您只要在<TD>标签中加入WIDTH和HEIGHT属性，只要以像素单位来指定尺寸就可以了。例如，要做一个100像素宽和80像素高的栏位，可以用下面的程序码：
<TABLE BORDER="2">
<TR>
<TD WIDTH="100" HEIGHT="80">栏位内容</TD>
</TR>
</TABLE>
栏位内容
请注意WIDTH和HEIGHT属性只是建议用的属性，它们的设定只有当栏位的宽度和高度，没有和其它同一行或同一列的栏位冲突时才有效。
6、精确安排栏位中内容的位置
一旦您改变了表格栏位的形状和大小，栏位就不再以正确的位置显示资料。因此为了把元素放在表格栏位中的适当位置，您需要<TD>标签的两个属性：ALIGN让物件对齐栏位的左方(LEFT)、右方(RIGHT)、和中间(CENTER)；VALIGN可以用TOP、MIDDLE、BOTTOM 指令，设定资料在栏位中的垂直对齐方式。(内定值是元件水平向左靠齐和垂直置中。)例如预将文字放在一个100乘80像素的栏位内，靠右上方对齐，可以使用下面的程序码：
<TABLE BORDER="2">
<TR>
<TD WIDTH="100" HEIGHT="80" ALIGN="RIGHT" VALIGN="TOP">栏位内容</TD>
</TR>
</TABLE>
栏位内容
注意：当您要在栏位中放置物件，而且希望它们排列整齐，那么就不要留下任何空格在栏位开始<TD>标签之后，和结束</TD>标签之前。栏位内容要紧贴著<TD>标签才能确保正确对齐，在放置影像资料时尤其是如此。
7、为您的表格涂色
讨厌您的表格和网页的颜色相同吗？那么就改变它的背景颜色吧！只要在<TABLE>标签中加上BGCOLOR属性，并且指定一个标准的16位颜色码或一个颜色名字。
举例而言，下面的程序码可以产生淡蓝色背景的表格：
<TABLE BGCOLOR=CCFFFF>
<TR>
<TD>栏位资料内容</TD>
<TD>栏位资料内容</TD>
</TR>
<TR>
<TD>栏位资料内容</TD>
<TD>栏位资料内容</TD>
</TR>
</TABLE>
栏位资料内容 栏位资料内容
栏位资料内容 栏位资料内容
视您的浏览器或电脑平台而定，您可能会看到表格栏位间有空白线。为了确保在任何浏览器之下这些线条都消失，请将表格BORDER和CELLSPACING的属性设为0，如下：
<TABLE BGCOLOR=CCFFFF BORDER=0 CELLSPACING=0>
<TR>
<TD>栏位资料内容</TD>
<TD>栏位资料内容</TD>
</TR>
<TR>
<TD>栏位资料内容</TD>
<TD>栏位资料内容</TD>
</TR>
</TABLE>
栏位资料内容 栏位资料内容
栏位资料内容 栏位资料内容
这样把栏位资料的内容变靠近了－－也许有一点太靠近了。若想把它们分开一点又保持颜色的连续，可以加入CELLPADDING属性，并给它一个适当的像素值，就像这样：
<TABLE BGCOLOR=CCFFFF BORDER=0 CELLSPACING=0 CELLPADDING=7>
<TR>
<TD>栏位资料内容</TD>
<TD>栏位资料内容</TD>
</TR>
<TR>
<TD>栏位资料内容</TD>
<TD>栏位资料内容</TD>
</TR>
</TABLE>
栏位资料内容 栏位资料内容
栏位资料内容 栏位资料内容
8、利用空白的表格栏位编排网页
很多时候，最好控制网页元素位置的方法，是插入一个你须要大小的空白表格栏位。但请小心：虽然大部份的浏览器对空白的表格栏位都没有问题，但Navigator碰到没有资料的表格栏位会出错。但别怕：有几个方法可以修正Navigator的错误。例如您可以插入一个一个像素的GIF档，将其宽度设定跟表格栏位相同；或者可以插入连续空白键；或者您可以使用Navigator的<SPACER>标签。
<SPACER>标签可以被用来制造网页上的任何空白，但因为它是特别针对Navigator，在一般来说应避免使用。但现在这个情况又另当别论，因为其它的浏览器（都不会破坏表格栏位）会忽略它。使用<SPACER>标签时，请将它的TYPE属性设为"block"，并加上以像素作单位的WIDTH和HEIGHT值，就像这样：
<SPACER TYPE="block" WIDTH="30" HEIGHT="45">
表格栏位就不会再出错了！
9、将表格放在网页上
除了将表格内的元件格式化，您也可以控制表格在网页上出现的地方。有两个<TABLE>属性可以帮助您：
ALIGN属性可以设定表格靠左（LEFT）、右（RIGHT）、中（CENTER）对齐。（内定值是靠左对齐）
WIDTH属性可以让您以一个固定像素值，设定表格的宽度（使用一个数字，例如<TABLE WIDTH="65">），或者设定让表格占据浏览器视窗的一个指定百分比（使用一个百分比，例如<TABLE WIDTH="90%">）。
下面的程序码设定一个150像素宽的表格，并且位于页面中央：
<TABLE WIDTH="150" ALIGN="CENTER">
下面的程序码设定一个占据浏览器视窗四分之三宽度的表格，并且位于页面右边对齐：
<TABLE WIDTH="75%" ALIGN="RIGHT">
