网页设计table表格知识

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

https://www.360docs.net/doc/996561790.html, 更新日期：2005-03-09 09:46 出处：网页教学网作者：

将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中，还是在网页设计中，表格通常都可以使信息更容易理解。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=#”表示宽，“h eight=#”表示高，，#是以象素或者百分比为单位的数字。表格边框的宽度是用“border=#”属性说明，，#为宽度值，单位是象素，表格边框的颜色是用“bordercolor="#"属性说明，#是16进制的6位数，格式为rrggbb，分别表示红、绿、兰三色的分量。或者是16种已定义好的颜色名称，参见文本颜色，单元格边框的颜色属性与表格的相同，但只适用于IE。下面是一个宽为300,高为80,边框宽为4,边框颜色为“FF0000”的一行两列表格，其中第一个单元格的宽为200,高为80，第二个单元格的边框颜色为“0000FF”。

代码如下：

＜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="#FF000 0",根据显示结果可以看出：设置表格的背景色后再设置单元格的背景色或背景图片，将优先显示单元格的属性。

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的值等于多少,那表格内的单元格从自身边界开始

＜tr＞

＜td rowspan="2"＞第二行及第三行的第一栏＜/td＞

＜td＞第二行第二栏＜/td＞

＜td＞第二行第三栏＜/td＞

＜/tr＞

＜tr＞

＜td＞第三行第二栏＜/td＞

＜td＞第三行第三栏＜/td＞

＜/tr＞

＜/table＞

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

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

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

https://www.360docs.net/doc/996561790.html, 更新日期：2005-03-14 09:48 出处：网页教学网作者：

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

图一

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

图二

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

图三

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

图四

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

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

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

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

https://www.360docs.net/doc/996561790.html, 更新日期：2005-03-09 09:49 出处：天极设计在线作者：

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

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

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

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

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

class=up onMouseDown="className='down'"

onMouseUp="className='up'" onMouseOut="className='up'"

onclick=window.open("button.htm","_blank")

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

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

https://www.360docs.net/doc/996561790.html, 更新日期：2005-03-09 07:37 出处：网页教学网作者：

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

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 Prope rties,在弹出的对话框里设置Left、Top为0就ok了！

4、任意大小的表格

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

5、被撑大的表格

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

样了。

总结

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

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

https://www.360docs.net/doc/996561790.html, 更新日期：2005-03-06 21:34 出处：网页教学网作者：

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

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

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

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

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

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

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

⑤再已插入的两个表格中间再插入一个一行三列同宽的的表格，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"＞