表格制作网页技巧大放送(专题)

dick_jj · 发表于 2006 年 6 月 9 日 23:12:48

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？注册

×

将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中还是在网页设计中，表格通常都可以使信息更容易理解。HTML 具有很强的表格功能，使用户可以方便地创建出各种规格的表格，并能对表格进行特定的修饰，从而使网页更加生动活泼。HTML 表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列，从而获得特定的表格效果。

目录:

利用表格制作网页详细介绍　　　　　　　

表格(table)制作网页详细介绍

在网页上制作精美的“立体表格”　　　　　

用表格巧妙制作导航条按钮

表格使用的常见问题及解决方法　　　　　

表格的特殊效果，表格的边框不停的闪烁

制作精美圆角表格两种方法　　　　　　　

使用Dreamweaver MX表格排序功能

表格背景颜色可以变化　　　　　　　　　

利用CSS控制表格的交替颜色

HTML初学者教程-表格　　　　　　　　　　

用CSS制作表头固定的表格

善用表格来增强网页功能　　　　　　　　　

设置表格单元及文字的格式和定位

设置表格的属性　　　　　　　　　　　　　

有关表格边框的css语法整理

细品DW MX 2004表格设计　　　　　　　　　

驯服不听话的网页表格

Dreamweaver MX应用表格排序　　　　　　　

Dreamweaver MX 2004 打造细线表格

Dreamweaver MX 2004 新功能试用：表格　　

用Dreamweaver MX巧妙格式化表格

制作1px边框表格的几种方法　　　　　　　　

巧用 Dreamweaver 的表格功能

Dreamweaver 表格经验谈　　　　　　　　　

如何在网页中制作虚线表格

制作阴影效果的表格　　　　　　　　　　　

使用CSS改变表格边框样式

网站设计的思考(10)_网页中表格的运用　　　

解决form撑大表格一法

新增ubb代码对表格的支持　　　　　　　　　

简单实用的网页表格特效

技巧运用无极限 HTML表格使用从入门到精通　　　

制作三维表格效果

巧用表格来设计主页　　　　　　　　　　　　

表格(Table)

用好HTML的表格标记　　　　　　　　　　　　

Web标准建站教程11-不用表格的菜单

CSS比表格更难吗？

dick_jj · 发表于 2006 年 6 月 9 日 23:19:25

将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中，还是在网页设计中，表格通常都可以使信息更容易理解。HTML 具有很强的表格功能，使用户可以方便地创建出各种规格的表格，并能对表格进行特定的修饰，从而使网页更加生动活泼。HTML 表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列，从而获得特定的表格效果。

　　表格在网页设计中的地位非常重要，可以说如果您表格用不好的话，就不可能设计出出色的网页。大多数初学者一开始就接触表格，对表格都有一定的了解，但是要实现真正细致甚至强大的功能，仔细理解table的代码结构至关重要！我们将在这里详细介绍表格各种常用的标记、技巧以及表格使用中的问题，了解和掌握了这些内容，你将发现，table原来是这样的亲切易用!

　　一、创建基本的表格

　　一个表由＜table＞开始，＜/table＞结束，表的内容由＜tr＞,＜th＞和＜td＞定义。＜tr＞说明表的一个行，表有多少行就有多少个＜tr＞；＜th＞说明表的列数和相应栏目的名称，有多少个栏就有多少个＜th＞；＜td＞则填充由＜tr＞和＜th＞组成的表格。

　　表格重要的基本标记不多，但每个标记都有很多的属性，考虑到一下子把这些属性都列出来，可能让初学者感到无从下手，所以我们还是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的属性。

　　在讲解之前，我们先来看看表格的基本构造。下图是一个3行3列的表格。

　　这里面有两个概念要弄明白：表格与单元格。他们的关系是整体与局部的关系，如同砌墙的砖和砌好的墙一样。在上面3行3列的表格中一共有9个单元格。由于我们后面将提到的表格属性和单元格属性有很多是相同的，所以一定要分清楚。前面已经说过表格的最基本标记为＜table＞、＜tr＞、＜td＞，可以先树立这样一个概念：描述整个表格的属性标记放在＜table＞里，描述单元格的属性标记放在＜tr＞、＜td＞里。有这样一个概念后，我们学习起来就可能简单些。

　　1、表格、单元格的大小,表格边框的宽度、颜色,单元格边框的颜色

　　表格以及单元格的大小是用“width=#”和“height=#”属性说明，“width=#”表示宽，“height=#”表示高，，#是以象素或者百分比为单位的数字。表格边框的宽度是用“border=#”属性说明，，#为宽度值，单位是象素，表格边框的颜色是用“bordercolor="#"属性说明，#是16进制的6位数，格式为rrggbb，分别表示红、绿、兰三色的分量。或者是16种已定义好的颜色名称，参见文本颜色，单元格边框的颜色属性与表格的相同，但只适用于IE。下面是一个宽为300,高为80,边框宽为4,边框颜色为“FF0000”的一行两列表格，其中第一个单元格的宽为200,高为80，第二个单元格的边框颜色为“0000FF”。

　　代码如下：
＜table border="4" width="300" height="80" bordercolor="#FF0000"＞
＜tr＞
＜td width="200" height="80"＞＜/td＞
＜td bordercolor="#0000FF"＞＜/td＞
＜/tr＞
＜/table＞

　　2、表格的水平摆放位置
　　表格的水平摆放位置是用align="#" 属性说明的，#为left(左对齐), right(右对齐), center(居中)。分别见下例，注意这三个表格与边界的位置关系：

左对齐
center
右对齐

　　第三个表格的代码如下：
＜table width="80" border="1" align="right" height="30"＞
＜tr＞
＜td＞右对齐＜/td＞
＜/tr＞
＜/table＞

　　3、单元格里内容的位置属性

　　水平对齐方式，用align="#"属性说明，#为left(左对齐), right(右对齐), center(居中)；垂直对齐方式，用valign="#"属性说明，#为top(上对齐), bottom(下对齐), middle(居中)。分别见下例，注意单元格里的内容与边框的的位置关系：

　　水平对齐方式：内容左对齐内容居中内容右对齐

　　代码如下：
＜table width="450" border="1"＞
＜tr＞
＜td width="150"＞
＜div align="left"＞内容左对齐＜/div＞
＜/td＞
＜td width="150"＞
＜div align="center"＞内容居中＜/div＞
＜/td＞
＜td＞
＜div align="right"＞内容右对齐＜/div＞
＜/td＞
＜/tr＞
＜/table＞

　　垂直对齐方式内容上对齐
内容居中
内容下对齐

　　代码如下：
＜table width="150" border="1"＞
＜tr＞
＜td height="40" width="146" valign="top"＞内容上对齐＜/td＞
＜/tr＞
＜tr＞
＜td height="40" width="146" valign="middle"＞内容居中＜/td＞
＜/tr＞
＜tr＞
＜td height="40" width="146" valign="bottom"＞内容下对齐＜/td＞
＜/tr＞
＜/table＞

　　4、表格的背景色、背景图片，单元格的背景色、背景图片

　　背景色属性：bgcolor="#" ，背景图片属性：background="#"。

　　见下例：

　　代码如下：
＜table width="450" border="1" bgcolor="#539996" bordercolor="#FFFFFF" height="90"＞
＜tr＞
＜td＞＜/td＞
＜td background="Back01.gif"＞＜/td＞
＜/tr＞
＜tr＞
＜td＞＜/td＞
＜td＞＜/td＞
＜/tr＞
＜tr＞
＜td bgcolor="#FF0000"＞＜/td＞
＜td＞＜/td＞
＜/tr＞
＜/table＞

　　说明：在上例中，整个表格的背景色是 bgcolor="#539996" ，第一行第二列的单元格背景图片是 background="Back01.gif" ，第三行第二列的单元格背景色是 bgcolor="#FF0000" ,根据显示结果可以看出：设置表格的背景色后再设置单元格的背景色或背景图片，将优先显示单元格的属性。

　　5、表格属性cellspacing、cellpadding

5、表格属性cellspacing、cellpadding

　　cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。

　　我们来看下面的两个表格：



　　　
　　上面第一个表格的单元格之间没有空白距离，而第二个的单元格之间有很大的空白距离，我们来比较一下他们的源代码：
　　第一个表格的代码：
＜table width="200" cellspacing="0" border="1" bordercolor="#000000"＞
＜tr＞
＜td＞＜/td＞
＜td＞＜/td＞
＜td＞＜/td＞
＜/tr＞
＜/table＞

　　第二个表格的代码：
＜table width="200" cellspacing="8" border="1" bordercolor="#000000"＞
＜tr＞
＜td＞＜/td＞
＜td＞＜/td＞
＜td＞＜/td＞
＜/tr＞
＜/table＞

　　比较代码，上边两个表格中只有 cellspacing 的设置不同，一个为“0”，一个为“8”，显示的结果就是第一个表格的每个单元格之间的距离为0(在本例中由于我们为了显示的方便，将表格边框设为“1”，所以单元格的真实距离是“2”，若将表格边框设为“0”，则单元格　的距离就是0了，第二个单元格同理)，第二个表格的每个单元格之间的距离为8。

　　cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。此属性的参数值也是数字，表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。我们先来看看这个例子:

　　我们来看下面两个表格：
网页教学网
网页教学网

　　
　　第一个表格单元格的内容与单元格边界之间没有空白距离，而第二个表格单元格的内容与单元格边界之间有空白距离，我们来比较一下他们的源代码：
　　第一个表格的代码：
＜table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="０"＞
＜tr＞
＜td width="120"＞网页陶吧＜/td＞
＜td＞＜/td＞
＜/tr＞
＜/table＞

　　第二个表格的代码：
＜table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="15"＞
＜tr＞
＜td width="120"＞网页陶吧＜/td＞
＜td＞＜/td＞
＜/tr＞
＜/table＞

　　两个表格只有红色部分代码不同。第一个表格中"网页陶吧"这几个字离它所在的单元格为0,那是因为设置了cellpadding="0"的原因.第一个表格中的"网页陶吧"这几个字离它所在的单元格比较远，那是因为cellpadding="15",也就是说"网页陶吧"离它所在的单元格的边界的距离为20像素。简单的说,cellpadding的值等于多少,那表格内的单元格从自身边界开始向内保留多少空白,单元格里的元素永远都不会进入那些空白里。

　　我们在以后的篇幅中会大量用到这两个属性，所以请大家不要弄混乱了, 为了形象的理解，请参考下图：

dick_jj · 发表于 2006 年 6 月 9 日 23:21:03

表格(table)制作网页详细介绍

表格最基本也最常用的属性，要用好表格，就必须熟悉和掌握这些最基本的属性。在对这些基本的属性有了一定的了解之后，我们再来看看表格的其他几个似乎并不常用的属性，以便对表格有一个整体的认识。事实上，即使不了解下面所讲的内容，多数情况下也不会影响你对表格的使用，所以我们只是简略的带过。

　　1、拆分表格
　　colspan表示该一储存格向右打通的栏数。 rowspan表示该一储存格向下打通的栏数。

　　看下面的表格：
第一行第一栏第一行的第二、三栏
第二行及第三行的第一栏第二行第二栏第二行第三栏
第三行第二栏第三行第三栏

　　表格代码：
＜table width="450" border="1" cellspacing="0" cellpadding="2" bordercolor="#009900"＞
＜tr＞
＜td＞第一行第一栏＜/td＞
＜td colspan="2"＞第一行的第二、三栏＜/td＞
＜/tr＞
＜tr＞
＜td rowspan="2"＞第二行及第三行的第一栏＜/td＞
＜td＞第二行第二栏＜/td＞
＜td＞第二行第三栏＜/td＞
＜/tr＞
＜tr＞
＜td＞第三行第二栏＜/td＞
＜td＞第三行第三栏＜/td＞
＜/tr＞
＜/table＞

　　你可能看的不大明白。如果借助于Dreamweaver来再现表格制作过程，相信你会很快明白其中的奥秘。先制作一个三行三列的表格(这可以说是上面表格的“原形”)，见下图，然后将第一行的第二、三栏合并，第二行的第一栏、第三行第一栏合并，这样就得到了上例中的表格。你可以自己动手检验一下。

第一行第一栏第一行第二栏第一行第三栏
第二行第一栏第二行第二栏第二行第三栏
第三行第一栏第三行第二栏第三行第三栏

　　熟练掌握表格的colspan、 rowspan属性，可以随心所欲的制作出复杂的表格。

　　2、表格中的标题列
　　＜CAPTION＞的作用是为表格标示一个标题列，如同在表格上方加一没有格线的打通列，通常用来存放表格标题，参数有 align、 valign。
　　align表示表格标题列相对于表格的对齐方式(水平)，可选值为： left, center, right, top, middle, bottom，若 align="bottom" 的话标题列便会出现在表格的下方，不管你的原代码是把＜caption＞放在＜table＞中的头部或尾部。
　　valign表示表格标题列相对于表格的对齐方式(上下)，可选值为： top, bottom。见下例：

网页陶吧访问统计 Month % of IE visitor % of NC visitor
August 91% 9%

　　表格代码：
＜table width="400" border="1" cellspacing="0" cellpadding="2"＞
＜caption＞＜font color="#FF0000"＞＜b＞网页陶吧访问统计＜/b＞＜/font＞＜/caption＞
＜tr align="CENTER"＞
＜th＞Month＜/th＞
＜th＞% of IE visitor＜/th＞
＜th＞% of NC visitor＜/th＞
＜/tr＞
＜tr align="CENTER"＞
＜td＞August＜/td＞
＜td＞91%＜/td＞
＜td＞9%＜/td＞
＜/tr＞
＜/table＞

　　3、行组(IE有效)

　　每个表格可以有一个表头、一个表尾和一个或多个表体，分别以 THEAD、TF垃圾站和TBODY元素表示。通常，文档中它们的次序首先是THEAD，然后是TF垃圾站，然后是不同数目的TBODY。
　　＜thead＞ ... ＜/thead＞ - 表的题头
　　＜tbody＞ ... ＜/tbody＞ - 表的正文
　　＜tf垃圾站＞ ... ＜/tf垃圾站＞ - 表的脚注

见下例：
Food Drink Sweet
A B C
D E F

　　表格代码：
＜table border width="300"＞
＜thead＞
＜tr＞
＜td＞Food＜/td＞
＜td＞Drink＜/td＞
＜td＞Sweet＜/td＞＜/tr＞
＜/thead＞
＜tbody＞
＜tf垃圾站＞＜tr＞
＜td＞A＜/td＞
＜td＞B＜/td＞
＜td＞C＜/td＞＜/tr＞＜/tf垃圾站＞
＜tr＞
＜td＞D＜/td＞
＜td＞E＜/td＞
＜td＞F＜/td＞＜tr＞
＜/tbody＞
＜/table＞
4、列组(IE有效)

　　＜colgroup align=#＞ #=left, right, center

　　见下例：
Food Drink Sweet
A B C
D E F

　　表格代码：
＜table border width=160＞
＜colgroup align=left＞＜colgroup align=center＞＜colgroup align=right＞＜thead＞
＜tr＞
＜th＞Food＜/th＞
＜th＞Drink＜/th＞
＜th＞Sweet＜/th＞
＜/thead＞＜tbody＞
＜tr＞
＜td＞A＜/td＞
＜td＞B＜/td＞
＜td＞C＜/td＞
＜tr＞
＜td＞D＜/td＞
＜td＞E＜/td＞
＜td＞F＜/td＞
＜/tbody＞
＜/table＞　　

　　5、列的属性控制

　　＜COL＞定义一个列组中的列，以便对它们能够同时设置有关属性
　　＜col span=#＞ #=从左数起，具有指定属性的列的列数
　　＜col align=#＞ #=left, right, center

　　见下例：
Food Drink Sweet
A B C
D E F

　　表格代码：
＜table border width=160＞
＜colgroup＞＜col align=center span=2＞＜colgroup align=right＞＜thead＞
＜tr＞
＜th＞Food＜/th＞
＜th＞Drink＜/th＞
＜th＞Sweet＜/th＞
＜/thead＞＜tbody＞
＜tr＞
＜td＞A＜/td＞
＜td＞B＜/td＞
＜td＞C＜/td＞
＜tr＞
＜td＞D＜/td＞
＜td＞E＜/td＞
＜td＞F＜/td＞
＜/tbody＞
＜/table＞

　　以上内容考虑到实用性，没有展开讨论。

dick_jj · 发表于 2006 年 6 月 9 日 23:22:40

在网页上制作精美的“立体表格”

　　表格是网页内应用较多的东东，但一般我们只是用它来定位网页中的模块和排版文字。其实表格用好了还可以做出很多漂亮的效果，如图一，承载文字的表格有一种看似立体的感觉。下面就来介绍一下这种立体表格的制作方法。

登录/注册后可看大图

图一

　　表格有立体的感觉的全是因为在表格的右边和下边有浅黑色的阴影。所以我们只要实现了阴影就可以实现这种效果。现在我们就开始具体讲述制作过程。在Frontpage2000中新建一个表格，选择菜单“表格”-“属性”-“表格”，在窗口内将表格的宽度设置为150象素；高度设置为200象素；边框粗细设置为0；将单元格边距设置为0，而单元格间距为1，如图二所示。

登录/注册后可看大图

图二

　　完成以上设置后将表格的背景色设置为黑色，但表格内的单元格的背景色设置为白色，完成以后就回出现如图三所示的单象素黑色边框效果。

登录/注册后可看大图

图三

　　接下来的工作就是要为右边和下边的黑色边框制作阴影，我们使用CSS样式的功能来实现。在图二所示的选项窗口内点击“样式”按钮继续选择“格式”-“边框”。在边框与阴影选项框内，分别将样式选择为“实线”；颜色选择为“灰色”；并在预览选项内将下边和右边的边框应用按钮选中，如图四所示。

登录/注册后可看大图

图四

　　点击“预览”，你要的立体表格效果就出来了。(注明：我们在制作出来的最终效果可能和图一所示略有出入，这是因为我们首先制作出了如图三的单象素黑色边框，这样做的效果会更明显，更有立体感。)

　　在这里我们还给出在Dreamweaver内定义的样式代码，因为Frontpage和Dreamweaver的代码机制有差别，相对之下Dreamweaver对样式代码写得更规范更合理。表格代码如下：

<TABLE width="150" height="200" cellpadding="0" cellspacing="1" bgcolor="#000000" style="border-right-width：2px;border-bottom-width ：2px;border-right-style : solid;border-bottom-style : solid;border-right-color : #a7a7a7;border-bottom-color : #a7a7a7;">

　　其中style以后的为样式代码“border-right-width”和“border-bottom-width”以后的2px代表阴影边框的宽度为2象素，border-right-color和border-bottom-color以后的#a7a7a7代表阴影线框的颜色代码，你也可以使用其他的颜色代码替换(具体请参照HTML颜色表)。试着自己改变一下，根据你的需要制作效果。

dick_jj · 发表于 2006 年 6 月 9 日 23:23:05

用表格巧妙制作导航条按钮

　　看到上面的导航条了吗？你可以点击一下看看它的效果，请注意，这可是用表格做出来的，你相信吗？其实代码很简单，现在让我们来看看该怎么做。

　　1.首先创建一个1x6的表格，参数为：border=0 cellspacing=3 cellpadding=0；

　　2.在这个表格的每个单元格内分别插入一个表格，宽度和高度设为100%；

　　3.建立一个css样式.up和.down；代码如下：

<style>
.up{
border:4 outset royalblue;color:yellow;background:blue;cursor:hand
}
.down{
border:4 inset royalblue;color:#33ff33;background:blue;cursor:hand
}
</style>

　　4.对插入的表格调用样式和行为，代码如下：

class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" onclick=window.open("button.htm","_blank")

　　注意：链接请用onclick，不要用href，因为后者访问后有虚线框，不美观。现在存盘看看效果吧！

dick_jj · 发表于 2006 年 6 月 9 日 23:24:00

表格使用的常见问题及解决方法

　　初学者在使用表格时，可能会遇到各种问题，由于对标记还不是很熟悉，所以往往对这些问题感到莫名其妙，一筹莫展。有时侯甚至因为在这些问题上纠缠不清而最终心烦意乱丧失了继续学习的兴趣。所以在这里，我们列出了表格使用过程中最常见的问题来加以分析，希望能给大家带来帮助

　　1.表格的变形问题

　　网页在不同的屏幕分辨率、或改变窗口时常出现一些页面变形情况，这也是最另人恼火的事，怎么办呢?秋实曾在天极网页陶吧撰文详细的阐述过这个问题，我们来看看他是怎么解决的。

　　A、因为表格排列设置而在不同分辨率下所出现的错位

　　这种变形情况是：

　　1、在800*600的分辨率下时，一切正常，而到了1024*800时，则多个表格或者有的居中，有的却左排列或右排列，很难看，这是什么原因呢？

　　在解决这个问题之前，我们讲一下表格的排列。表格有左、中、右三种排列方式，如果没特别进行设置，则默认为居左排列，不用说了，这就是问题之所在。在800*600的分辨率下，表格恰好就有编辑区域那么宽，不容易察觉，而到了1024*800的时候，就出现的，解决的办法比较简单，即都设置为居中，或左或右。

　　2、同样是这种分辨率切换，表格的上下排列不一致。

　　上边的所说的是水平错位，而这种则是纵向错位，多发生在一个表格单元里嵌入另一个表格的情况。其原因在于，嵌入的表格默认为竖向居中排列，在800*600分辨率时，这种错位看不出来，而到1024*800就出现了，解决办法如前，根据情况对排列进行设置，而不是采用其默认设置。

　　B、采用百分比而出现的变形

　　这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比，如在一个表格单元的宽度是600，在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，依此类推，如果在一个表格不是嵌于另一个表格单元中，则其百分比是相对于当时窗口的宽度的，常出现在IE浏览器中，随便改动主页窗口的大小时，表格的内容也随之错位、变形，这是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。

　　当然了，解决办法是不要设置成百分比，我提倡的是，如果表格没有外围嵌套标记，则将宽等设置成固定宽度，如有外围嵌套标记，则将外转嵌套标记的宽度设置为固定值，而表格的宽或高可设置为百分比，这样就不会出现变形了。

　　

C、表格单元格之间互相干扰引起的变形

　　这种变形情况通常是在工具里制作主页时没有空隙，而在浏览时却发现莫名其妙地多出一些空隙，而又不知原因在哪，很是令人讨厌。

　　本人也经常遇到类似的情况，解决办法一是先看表格设置有没有上面所谈的两种情况，如没有，可能就是在划分表格时，同一行的单元格之间相互牵制所出现的问题。

　　我们知道，同一行的表格单元在诸如DreamWeaver 或FrontPage中经常频繁地被拆分，所以，同一行的单元格与另一个单元格的宽与高不一致，这时，你就要注意两个单元格属性：colspan、rowspan。colspan表示的是横向扩展，而rowspan则表示的是纵向扩展，这个扩展的意思即当前表格单元相邻的横向与竖向的表格单元数，也可这样理解为表格单元的高或宽是相邻几个表格单元的高或宽的相加和，如下图。

　　　　

　　这个单元格横向所占用的宽度是3个表格单元的宽度(这里取最大值)，即colspan=3；而竖向的高度是三个表格单元高度的总和，即rowspan=3。

　　那么我们说的这种变形就和这个设置有关，如果改变相邻单元格的高或宽与个数时，图中所指的单元格也会发生相应的变化，相互制约，调整起来很麻烦，这非我们所希望的，我本人提倡，如果表格比较复杂，最好采取嵌表格的形式，这样，可以少一些单元格之间相互干扰情况，而使单元格之间相对独立。

　　出现变形有情况还很多，我们就不一一陈述，我建议你在划分表格时，除了一些必要的高、宽设置外，将其它的高、宽设置全部删掉，一则减少了冗余代码，另则，也免除一些摸不着头脑的错误。

　　2、图片显示的问题

　　有时候我们明明在单元格中插入了背景图片，而且在Dreamweaver的视窗里也可以看到，但是一预览背景图片就不显示了。遇到这种请情况，不要着急，检查一下你的代码是否正确，我们来看下面的表格：



表格代码：
＜table width="300" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000"＞
＜tr background="hzz01_050213.gif"＞
＜td height="19"＞＜/td＞
＜td height="19"＞＜/td＞
＜/tr＞
＜/table＞

　　不错，上面的背景图确实有(background="hzz01_050213.gif")，但由于放错了地方，所以就显示不出来了，请把背景属性放在＜td＞标记里面，然后再预览一次，怎么样，这次出来了吧！



表格代码：
＜table width="300" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000"＞
＜tr＞
＜td height="19" background="hzz01_050213.gif"＞＜/td＞
＜td height="19" background="hzz01_050213.gif"＞＜/td＞
＜/tr＞
＜/table＞

3、表格布满页面的问题

　　我们在很多地方看到为了使页面适应不同的分辨率，通常将表格的大小按百分比设置。刚开始学做网页的时候，我已经把表格的宽度设置为100%，但在浏览器上还是不能满屏显示，四周总有一圈空白，我曾对此感到迷惑不解，后来在论坛请教才知道这不是表格的错。如果你用Dreamweaver制作网页，这个问题很好解决，选择菜单Modify --＞ Page Properties,在弹出的对话框里设置Left、Top为0就ok了！

　　4、任意大小的表格

　　用拖动鼠标的方法改变表格的大小时，你会发现当表格的高度为10时就不能拖动了，或者你在属性面板里将表格的高度定义为5个象素,但是在浏览器中显示的并不是高为5个象素的表格，是不是不能制作这样的表格呢？当然不是，这个问题我们在细线表格的制作方法中已经涉及到了，设置完表格的高度后，还需要把单元格中的“ ”去掉，见下例：




　　5、被撑大的表格

　　有的网友在问已经定义了表格的大小，但为什么会在输入内容后，表格变大了呢？这个问题应该不算是问题，表格的大小不仅与自身的属性有关，还要受表格里的内容的影响。譬如设置了表格的尺寸为120*80,然后在表格里插入一个150*100的图象，很明显按表格的尺寸根本“装”不下这个图片，所以当在浏览器中查看时会发现表格变大了(此时，在属性面板里表格的大小依然显示的是120*80，所以会让新手感到奇怪。实际上在插入图片时表格的尺寸已经发生了改变，不过由于软件的局限性没显示出来罢了)，如果你确实需要表格不随插入的图片而改变的话，简单的办法就是把图片作为背景，不过，这图片看起来可不怎么样了。

　　总结

　　表格的使用中我们还会碰到许多这样那样的问题，这些问题对许多高手看来不算什么、但足以让新手迷惑不解。有问题没关系，大家可以多去一些比较好的设计技术论坛讨论，多看多观察，多思考、动手实践，只要肯学，一样会成为网页制作的高手

dick_jj · 发表于 2006 年 6 月 9 日 23:25:06

表格的特殊效果，表格的边框不停的闪烁

有什么问题请到<a href='/bbs/forums.php?fid=21'>论坛</a>中发表<br>
<script language="javascript">
var line=new Array();
var w=35; // 一条边框的小格的个数（所以是个正方形啦）
var left=280; // 这个是边框在页面中的位置的左上角的X坐标
var top=10; // 自然就是纵坐啦
var width=4; // 边框中一小格的象素宽
var height=3; // 边框的高度，设为1的话就是一条细线了
line[0]="ff"+Number(25).toString(16)+Number(25).toString(16);
line[1]="ff"+Number(50).toString(16)+Number(50).toString(16);
line[2]="ff"+Number(75).toString(16)+Number(75).toString(16);
line[3]="ff"+Number(100).toString(16)+Number(100).toString(16);
line[4]="ff"+Number(125).toString(16)+Number(125).toString(16);
line[5]="ff"+Number(150).toString(16)+Number(150).toString(16);
line[6]="ff"+Number(175).toString(16)+Number(175).toString(16);
line[7]="ff"+Number(200).toString(16)+Number(200).toString(16);
line[8]="ff"+Number(225).toString(16)+Number(225).toString(16);
line[9]="ff"+Number(225).toString(16)+Number(225).toString(16);
line[10]="ff"+Number(225).toString(16)+Number(225).toString(16);
line[11]="ff"+Number(225).toString(16)+Number(225).toString(16);
line[12]="ff"+Number(200).toString(16)+Number(200).toString(16);
line[13]="ff"+Number(175).toString(16)+Number(175).toString(16);
line[14]="ff"+Number(150).toString(16)+Number(150).toString(16);
line[15]="ff"+Number(125).toString(16)+Number(125).toString(16);
line[16]="ff"+Number(100).toString(16)+Number(100).toString(16);
line[17]="ff"+Number(75).toString(16)+Number(75).toString(16);
line[18]="ff"+Number(50).toString(16)+Number(50).toString(16);
line[19]="ff"+Number(25).toString(16)+Number(25).toString(16);
function writes(num)
{
var temp;
var s;
var tl,tt;
var tw,th;
temp=num+1;
if(num==0)
{
tl = left;
tt = top;
tw = w*width;
th = height;
s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0'><tr>";
for(r=0;r<w;r++)
{
temp=r+w*num;
s+="<td id=tab"+temp+" bgcolor=red></td>";
}
s+="</tr></table>";
}
if(num==1)
{
tl = left+w*width;
tt = top;
tw = height;
th = w*width;
s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0'>";
for(r=0;r<w;r++)
{
temp=r+w*num;
s+="<tr><td id=tab"+temp+" bgcolor=red></td></tr>";
}
s+="</table>";
}
if(num==2)
{
tl = left+height;
tt = top+w*width;
tw = w*width;
th = height;
s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0'><tr>";
for(r=w;r>0;r--)
{
temp=r-1+w*num;
s+="<td id=tab"+temp+" bgcolor=red></td>";
}
s+="</tr></table>";
}
if(num==3)
{
tl = left;
tt = top+height;
tw = height;
th = w*width;
s="<table style='position: absolute; left: "+tl+"px; top: "+tt+"px; width: "+tw+"px; height: "+th+"px;' cellspacing='0' cellpadding='0'>";
for(r=w;r>0;r--)
{
temp=r-1+w*num;
s+="<tr><td id=tab"+temp+" bgcolor=red></td></tr>";
}
s+="</table>";
}
return s;
}
function count()
{
var i;
var temp;
var total;
total = w*4;
for(i=0; i<line.length; i++)
{
temp=pos+i-line.length/2;
temp=temp<0?(total+temp):temp;
temp=temp>(total-1)?(temp-total):temp;
document.all["tab"+temp].style.backgroundColor=line[line.length-i];
}
pos=(pos+1)>total?0:(pos+1);
}
for(i=0;i<=3;i++)
{
document.write(writes(i));
}
var pos=0;
setInterval("count()", 1);
</script>

复制代码

dick_jj · 发表于 2006 年 6 月 9 日 23:26:25

制作精美圆角表格两种方法

做网页时候为了美化网页，常常把表格边框的拐角处做成圆角，这样可以避免直接使用表格直角的生硬，使得网页整体更加美观。下面就给大家介绍两种制作圆角表格的常用的办法。

　　方法一：用图片制作圆角表格

　　这是最常用也是最通用的方法，它能很好地适应各种浏览器和不同分辨率，大部分网页都使用这种方法。

　　①先用Photoshop等作图软件绘制一个圆角矩形，再用“矩形选框工具”选取左上交的圆角部分(如图1)，复制它。　　

登录/注册后可看大图

　　②不要取消选取，直接新建一副图像，Photoshop会根据选取部分的高度、宽度自动设置新建图像的大小。张贴后，保存为WEB所用格式即可。

　　③重复步骤②，分别用“水平翻转”工具和“垂直翻转”工具，保存另外三个方向的圆角。(如图2)

登录/注册后可看大图

　　④打开网页制作软件，这里以Dreamweaver为例。插入一个一行三列的表格，设置其CellPad、CellSpace和Border属性值都为0。在第一列插入图片1.gif，第三列插入图片3.gif，并设置单元格的高度和宽度与图片一致。设置第二列的背景颜色为与圆角图片一致的颜色，设置宽度为整个表格的宽度减去两个图片的宽度，并打开源代码察看器，删除这列中的字符” ”(Dreamweaver会自动在每个单元格中插入此字符，若不删除会撑大表格)。依葫芦画瓢，做好下半部分的圆角。

　　⑤再已插入的两个表格中间再插入一个一行三列同宽的的表格，CellPad、CellSpace和Border属性值都为0，宽度为100%。设置第一列和第三列背景颜色为与圆角图片一致的颜色，宽度为1像素，并打开源代码察看器，删除这两列中的字符” ”。到这，一个圆角表格就做好了，您可以在第二列中添加您想要的内容。(如图3)

　　

登录/注册后可看大图

　　方法二：利用VML技术

　　用VML技术可以更容易地制作一个圆角表格，而且还有投影哦！

　　①修改＜html＞表识为＜html xmlns:v＞

　　②在＜head＞区域添加如下代码：
　　＜style＞〈br>v\:* {behavior: url(#default#VML);}〈br〉＜/style＞

　　③在您要添加圆角表格的地方加入以下代码：＜v:RoundRect style="position:relative;width:200;height:100px"＞
＜v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/＞
＜v:textbox style="font-size:12px"＞

这里输入表格中的内容
＜/v:textbox＞
＜/v:RoundRect＞

您可以在上面的代码中设置圆角表格的宽度、高度、投影颜色等。

　　这样，一个有投影的圆角表格就制作好了(如图4)。　　

登录/注册后可看大图

　　这种添加圆角表格的方法虽然很方便，但是它不能很好的适应每个浏览器版本，且在设计时是以层的方式现实，不利于版面设计，所以尽量使用第一种方法。

dick_jj · 发表于 2006 年 6 月 9 日 23:28:23

使用Dreamweaver MX表格排序功能

教育信息化时代，考试成绩也要求上网公布。一次我将考试成绩制作成一个HTML文件，如图1所示，领导审查的意见是“将成绩按名次排列”，可是所有的成绩已经用Dreamweaver MX制作好了，若先用Execl按要求排序，再导入到Dreamweaver MX制作，呵呵！太麻烦了，早就知道Dreamweaver具有排序功能，一直没有实战，何不利用Dreamweaver MX演练一番？

　　在Dreamweaver MX中，您可以对一列的内容进行简单排序，也可以对两列的内容进行更为复杂的排序。您不能对包含有Colspan或Rowspan属性的表格进行排序的，也就是说，不能对那些包含有合并单元格的表格进行排序。

登录/注册后可看大图

　　下面就看一下具体的排序过程吧！

　　1.将光标移动到表格内任一单元格内，或选定表格，单击“Command/Sort Table…”，打开Sort Table对话框，如图所示。

登录/注册后可看大图

　　

　　2.在对话框中进行如下的选择：

　　在Sort By选项中选择要排序的Column(列)。

　　在Order选项中选择是根据alphabetically(字母)还是根据Numberically(数字)进行排序。

　　当列的内容是数字的时候这个选项是非常重要的。数字的排序是对列表按照一位和二位这样进行的(如 1, 10, 2, 20, 3, 30)，而不是一个整齐的数字序列(如 1, 2, 3,10, 20, 30)。

　　选取排列顺序是上升-Ascending(A to Z)，还是下降-Descending(Z to A)。

　　在对成绩表按总分或名次排序时，设置为：

　　Sort By：Column5或Column6

　　Order：Numberically及Descending

　　3.要在不同的列进行次一级的排序，在Then By弹出菜单中指定排序选项。

　　4.选取Sort Includes First Row 选项可以将第一行在排序时包括进去。如果第一行是不能移动的标题行，则不要选这个选项，如对成绩表排序时就不能选中此项。

　　5.对于Sort THEAD Rows(If Any)、Sort TF垃圾站 Rows(If Any)两选项，是Dreamweaver MX中新增加的。

　　Sort THEAD Rows(If Any)：排序时是否包含THEAD行。

　　Sort TF垃圾站 Rows(If Any)：排序时是否包含TF垃圾站行。

　　6.Keep TR Attributes With Sorted Row：保持TR属性同排序行的一致。若选中此项，TR属性(例如颜色)将同排序行中单元格中的属性一同变化，否则将不变化。

　　例如，对图1所示成绩表的排序中，选中Keep TR Attributes With Sorted Row后，排序结果如下图所示，第三行中灰色背景排序时随同整行数据一同变化。

登录/注册后可看大图

　　不选中后排序结果如下图所示，第三行中的数据移动了，而背景色灰色没有变化。

登录/注册后可看大图

　　7.最后点击Apply或OK按钮，完成了表格排序操作，好了，现在可以交差了！

dick_jj · 发表于 2006 年 6 月 9 日 23:29:32

如果您看完以上全部了,那说明您有心学习,此内容原创地址
http://www.webjx.com/htmldata/2005-03-17/1111030365.html

账号		自动登录	找回密码
密码			注册