活用表格美化网页
表格的作用不仅仅局限于页面的元素定位、排版布局，在实际的应用我们还可以利用它来美化整个页面。接下来我们就将接触到表格的灵活应用，你会发现：原来表格的世界还可以这么精彩！
考虑到现在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种技巧的另一个应用。现在，相信不用表格的嵌套，你也可以做出这样的效果吧！
