活用表格美化网页
表格的作用不仅仅局限于页面的元素定位、排版布局，在实际的应用我们还可以利用它来美化整个页面。接下来我们就将接触到表格的灵活应用，你会发现：原来表格的世界还可以这么精彩！
考虑到现在DreamWeaver、Frontpage等软件的广泛使用，完全用手写代码来编制网页的人越来越少，所以，在制作以下实例的过程中，我们多是利用DreamWeaver来完成前期工作，然后再手工修改代码，最终实现我们所期望的效果。
1、一个象素宽的分隔线
有时候在网页排版时，我们需要一条细线，用图片似乎有点劳师动众了，其实，这个小问题用表格就能搞定。请看下面的例子：
代码：
＜table width="100%" cellspacing="0" border="0" bgcolor="#000000" height="1" cellpadding="0"＞
＜tr＞
＜td＞＜/td＞
＜/tr＞
＜/table＞ 在DreamWeaver中的快速通道 在Dreamweaver中插入一个一行一列的表格，表格的属性面板设置如下：
切换到原代码视窗，将＜td＞ ＜/td＞中的“ ”去掉就ok了。如下图：
说明：其实就是一个高为“1pix”的表格，需要注意的是表格内不要有其他任何内容。如果你还需要其他颜色的分隔线，只需要改变表格的背景色 bgcolor 就可以了。利用这种方法我们还可以制作出细竖线，将表格的宽该为“1”就可以了。
2、利用“cellspacing”属性制作细线表格有时候我们需要用表格边框来区分各部分内容，若将表格边框宽度设置为“1”，又显得过于突出，影响整个页面的美观，怎么办呢？我们来看看下面两个表格以及它们的代码（注意红色部分代码）：
表格A代码：
＜table width="160" border="1" cellspacing="0" height="40"＞
＜tr＞
＜td＞
＜div align="center"＞表格A＜/div＞
＜/td＞
＜/tr＞
＜/table＞
表格B代码：
＜table width="160" cellspacing="1" border="0" bgcolor="#000000" height="40"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞
＜div align="center"＞表格B＜/div＞
＜/td＞
＜/tr＞
＜/table＞
表格A直接设置边框宽度为1，显示的结果并不令人满意，表格B则利用了“cellspacing”属性，边框明显细多了，显的更加精致。
在DreamWeaver中的快速通道 在Dreamweaver中插入一个一行一列的表格，表格的属性面板设置如下：
选择单元格，把单元格的背景色设置为白色就ok了！
说明：前面已经知道，cellspacing属性用来指定表格各单元格之间的空隙。我们设置整个表格的背景色时也包含了这个空隙，而设置单元格的背景色时却不包含这个空隙，所以，浏览器中显示的表格“边框线”并不是真正意义上的表格边框，而是单元格与单元格的空隙（此处的空隙我们设置的是“1pix”）。
练习：试制作出如下的效果(提示：原理同上，不同的是需要将每个单元格的背景都设置为白色。)
3、利用“cellpadding”属性制作等间距细线表格我们可能经常在大网站中看到这种效果的表格：
这又是怎么做出来的呢，似乎让人有点摸不着头脑。我们来先来看看他的代码（注意红色部分的代码）
表格代码：
＜table width="420" border="0" cellspacing="2" cellpadding="1" height="10"＞
＜tr＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜/tr＞
＜/table＞ 代码好象很多，但理清它的结构后会发现其实并不复杂，它主要利用了表格的嵌套以及表格的“cellpadding”属性。在一个一行六列表格的每个单元格里又插入了一个这样一个表格：
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞ 在DreamWeaver中的快速通道 首先制作一个一行六列的表格，表格的属性面板设置如下：
将该表格每个单元格的背景色设置为黑色（注意：是单元格而不是整个表格），设置完后表格显示如下：
然后在每个单元格中插入一个表格，将插入表格的属性面板按如下设置就ok了。
需要注意的就是上面代码中加了红色的属性一个也不能少！
说明：cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。明白了这个属性后，上面的例子就不难理解。红色代码中width="100%"的意思是插入的表格的宽是被插入表格宽度的100%,也就是在宽度上把底下表格占满 ，但被插入的表格有这样一个属性cellpadding="1",所以就算是100%,被插入的表格也要在4边留下1px的空白距离.同理，height="100%"也就是在高度上也要顶满下面的表格,但由于被插入的表格的cellpadding="1"的原因,在上与下方都留了1px的空白距离。这样，在浏览器中显示的“表格边框”并不是真实的边框，而是被背景色填充的这“1px”的空白距离。
4、圆角表格的制作
我们可能经常在大网站中看到这种效果的表格：
这又是怎么做出来的呢，似乎让人有点摸不着头脑。我们来先来看看他的代码（注意红色部分的代码）
表格代码：
＜table width="420" border="0" cellspacing="2" cellpadding="1" height="10"＞
＜tr＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜/tr＞
＜/table＞
代码好象很多，但理清它的结构后会发现其实并不复杂，它主要利用了表格的嵌套以及表格的“cellpadding”属性。在一个一行六列表格的每个单元格里又插入了一个这样一个表格：
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
在DreamWeaver中的快速通道
首先制作一个一行六列的表格，表格的属性面板设置如下：
将该表格每个单元格的背景色设置为黑色（注意：是单元格而不是整个表格），设置完后表格显示如下：
然后在每个单元格中插入一个表格，将插入表格的属性面板按如下设置就ok了。
需要注意的就是上面代码中加了红色的属性一个也不能少！
说明：cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。明白了这个属性后，上面的例子就不难理解。红色代码中width="100%"的意思是插入的表格的宽是被插入表格宽度的100%,也就是在宽度上把底下表格占满 ，但被插入的表格有这样一个属性cellpadding="1",所以就算是100%,被插入的表格也要在4边留下1px的空白距离.同理，height="100%"也就是在高度上也要顶满下面的表格,但由于被插入的表格的cellpadding="1"的原因,在上与下方都留了1px的空白距离。这样，在浏览器中显示的“表格边框”并不是真实的边框，而是被背景色填充的这“1px”的空白距离。
4、圆角表格的制作
我们可能经常在大网站中看到这种效果的表格：
这又是怎么做出来的呢，似乎让人有点摸不着头脑。我们来先来看看他的代码（注意红色部分的代码）
表格代码：
＜table width="420" border="0" cellspacing="2" cellpadding="1" height="10"＞
＜tr＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td bgcolor="#000000"＞
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜/tr＞
＜/table＞ 代码好象很多，但理清它的结构后会发现其实并不复杂，它主要利用了表格的嵌套以及表格的“cellpadding”属性。在一个一行六列表格的每个单元格里又插入了一个这样一个表格：
＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞ 在DreamWeaver中的快速通道 首先制作一个一行六列的表格，表格的属性面板设置如下：
将该表格每个单元格的背景色设置为黑色（注意：是单元格而不是整个表格），设置完后表格显示如下：
然后在每个单元格中插入一个表格，将插入表格的属性面板按如下设置就ok了。
需要注意的就是上面代码中加了红色的属性一个也不能少！
说明：cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。明白了这个属性后，上面的例子就不难理解。红色代码中width="100%"的意思是插入的表格的宽是被插入表格宽度的100%,也就是在宽度上把底下表格占满 ，但被插入的表格有这样一个属性cellpadding="1",所以就算是100%,被插入的表格也要在4边留下1px的空白距离.同理，height="100%"也就是在高度上也要顶满下面的表格,但由于被插入的表格的cellpadding="1"的原因,在上与下方都留了1px的空白距离。这样，在浏览器中显示的“表格边框”并不是真实的边框，而是被背景色填充的这“1px”的空白距离。
4、圆角表格的制作
5、两个并排的表格
有时候我们需要把两个单独的表格并排排列，但是当我们连续插入两个表格的时候，表格会自动分成上下排列，如何解决这个问题呢？
利用表格的嵌套：我们可以先做一个一行两列的表格，然后在这个表格的每个单元格里在插入一个表格就行了,效果如下：
代码如下：
＜table width="440" cellpadding="0" cellspacing="0" border="0"＞
＜tr＞
＜td＞
＜table width="200" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜td＞
＜table width="200" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜/tr＞
＜/table＞
利用表格自身属性：连续插入两个表格后，将第一个表格（注意，是表格而不是单元格）的align设置为“left"”就ok了！
代码如下：
＜table width="200" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1" align="left"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
＜table width="200" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
6、利用表格做空格
在排版的过程中，空格对我们来说是在熟悉不过的了。为了版面的整齐和规范 ，我们会多次用到空格，对于文字和图片来说，非常简单，但是如果有一个表格内容，为了整个版面的协调，也要象文字那样在开头空两格，这时候单纯的输入空格解决不了问题，利用嵌套表格好象有点麻烦，怎么办呢？其实有一个非常简单但很实用的技巧。我们先来看看效果：
代码如下：
＜table width="30" align="left"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
＜table width="200" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1"＞
＜tr＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
分析一下代码，可以看出来这其实就是第5种技巧的另一个应用。现在，相信不用表格的嵌套，你也可以做出这样的效果吧！
