|
一、创建基本的表格
一个表由＜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”。 代码如下： ＜tableborder="4" width="300" height="80" bordercolor="#FF0000"＞ ＜tr＞ ＜tdwidth="200" height="80"＞ ＜/td＞ ＜tdbordercolor="#0000FF"＞ ＜/td＞ ＜/tr＞ ＜/table＞ 2、表格的水平摆放位置 表格的水平摆放位置是用align="#" 属性说明的，#为left(左对齐), right(右对齐), center(居中)。分别见下例，注意这三个表格与边界的位置关系：
第三个表格的代码如下： ＜table width="80" border="1"align="right"height="30"＞ ＜tr＞ ＜td＞右对齐＜/td＞ ＜/tr＞ ＜/table＞ 3、单元格里内容的位置属性 垂直对齐方式，用valign="#"属性说明，#为top(上对齐), bottom(下对齐), middle(居中)。 水平对齐方式：
代码如下： ＜table width="450" border="1"＞ ＜tr＞ ＜td width="150"＞ ＜divalign="left"＞内容左对齐＜/div＞ ＜/td＞ ＜td width="150"＞ ＜divalign="center"＞内容居中＜/div＞ ＜/td＞ ＜td＞ ＜divalign="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＞ ＜tdbackground="/Back01.gif"＞ ＜/td＞ ＜/tr＞ ＜tr＞ ＜td＞ ＜/td＞ ＜td＞ ＜/td＞ ＜/tr＞ ＜tr＞ ＜tdbgcolor="#FF0000"＞ ＜/td＞ ＜td＞ ＜/td＞ ＜/tr＞ ＜/table＞ 设置表格的背景色后再设置单元格的背景色或背景图片，将优先显示单元格的属性。 5、表格属性cellspacing、cellpadding cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。 我们来看下面的两个表格：
上面第一个表格的单元格之间没有空白距离，而第二个的单元格之间有很大的空白距离，我们来比较一下他们的源代码： 第一个表格的代码： …… cellspacing="0"…… 第二个表格的代码： …… cellspacing="8"…… 比较代码，上边两个表格中只有cellspacing的设置不同，一个为“0”，一个为“8”，显示的结果就是第一个表格的每个单元格之间的距离为0(在本例中由于我们为了显示的方便，将表格边框设为“1”，所以单元格的真实距离是“2”，若将表格边框设为“0”，则单元格 的距离就是0了，第二个单元格同理)，第二个表格的每个单元格之间的距离为8。 cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。此属性的参数值也是数字，表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。我们先来看看这个例子: 我们来看下面两个表格：
第一个表格单元格的内容与单元格边界之间没有空白距离，而第二个表格单元格的内容与单元格边界之间有空白距离，我们来比较一下他们的源代码： 第一个表格的代码： ……cellpadding="０"…… 第二个表格的代码： ……cellpadding="15"…… 两个表格只有红色部分代码不同。第一个表格中"海长长"这几个字离它所在的单元格为0,那是因为设置了cellpadding="0"的原因.第一个表格中的"海长长"这几个字离它所在的单元格比较远，那是因为cellpadding="15",也就是说"海长长"离它所在的单元格的边界的距离为20像素。简单的说,cellpadding的值等于多少,那表格内的单元格从自身边界开始向内保留多少空白,单元格里的元素永远都不会进入那些空白里。 二、网页表格制作进阶 前面我们介绍的是表格最基本也最常用的属性，要用好表格，就必须熟悉和掌握这些最基本的属性。在对这些基本的属性有了一定的了解之后，我们再来看看表格的其他几个似乎并不常用的属性，以便对表格有一个整体的认识。事实上，即使不了解下面所讲的内容，多数情况下也不会影响你对表格的使用，所以我们只是简略的带过。 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＞ 2、表格中的标题列 ＜CAPTION＞ 的作用是为表格标示一个标题列，如同在表格上方加一没有格线的打通列，通常用来存放表格标题，参数有 align、 valign。 align表示表格标题列相对于表格的对齐方式(水平)，可选值为： left, center, right, top, middle, bottom，若 align="bottom" 的话标题列便会出现在表格的下方，不管你的原代码是把 ＜caption＞ 放在 ＜table＞中的头部或尾部。 valign表示表格标题列相对于表格的对齐方式(上下)，可选值为： top,bottom。见下例：
表格代码： ＜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、TFOOT和TBODY元素表示。 通常，文档中它们的次序首先是THEAD，然后是TFOOT，然后是不同数目的TBODY。 ＜thead＞ ... ＜/thead＞ - 表的题头 ＜tbody＞ ... ＜/tbody＞ - 表的正文 ＜tfoot＞ ... ＜/tfoot＞ - 表的脚注 见下例：
表格代码： ＜table border width="300"＞ ＜thead＞ ＜tr＞ ＜td＞Food＜/td＞ ＜td＞Drink＜/td＞ ＜td＞Sweet＜/td＞＜/tr＞ ＜/thead＞ ＜tbody＞ ＜tfoot＞＜tr＞ ＜td＞A＜/td＞ ＜td＞B＜/td＞ ＜td＞C＜/td＞＜/tr＞＜/tfoot＞ ＜tr＞ ＜td＞D＜/td＞ ＜td＞E＜/td＞ ＜td＞F＜/td＞＜tr＞ ＜/tbody＞ ＜/table＞ 4、列组(IE有效) ＜colgroup align=#＞ #=left, right, center 见下例：
表格代码： ＜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 见下例：
表格代码： ＜table border width=160＞ ＜colgroup＞ ＜col align=center span=2＞ ＜colgroup align=left＞＜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＞ 三、活用表格美化网页 考虑到现在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＞ ＜tdbgcolor="#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、圆角表格的制作 做网页常常使用一些技巧，比如在表格的四周加上圆角，这样可以避直接使用表格的直角，而显得过于呆板, 这里选取最有代表性两种方法来再现圆角表格的制作过程。 第一种制作方法：
代码如下： ＜img height=15src="/411-w01.gif" width=125＞＜br＞ ＜table width="124"cellspacing="1" cellpadding="0" bgcolor="#0000FF"＞ ＜tr＞ ＜tdbgcolor="#FFFFFF"＞经过这样的处理后表格是不是漂亮多了呢！＜/td＞ ＜/tr＞ ＜/table＞ ＜img height=13src="/411-w02.gif" width=125＞ 说明：其实就是两个圆角图片与一个细线表格（上面第二个技巧所讲到的细线表格）组合在一起。 第二种制作方法：
代码如下： ＜table width="150"cellpadding="0" cellspacing="0" border="0"＞ ＜trbgcolor="#7090ff"＞ ＜tdvalign="top" align="left"width="10"＞＜img src="/411-w03.gif" width="7" height="7"＞＜/td＞ ＜td width="127"bgcolor="#7090ff"＞ ＜/td＞ ＜tdalign="right" valign="top"width="10"＞＜img src="/411-w04.gif" width="7" height="7"＞＜/td＞ ＜/tr＞ ＜/table＞ ＜table width="150" cellspacing="1" cellpadding="0" border="0" bgcolor="#7090ff"＞ ＜tr＞ ＜td bgcolor="#FFFFFF"＞这种表格是不是很眼熟啊？的确，我们可以在很多的大网站找到它的身影。＜/td＞ ＜/tr＞ ＜/table＞ 说明：它由两个单独的表格组成，其中第一个表格是出现圆角的关键！ 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种技巧的另一个应用。现在，相信不用表格的嵌套，你也可以做出这样的效果吧！ 四、表格使用的常见问题及解决方法 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则表示的是纵向扩展，这个扩展的意思即当前表格单元相邻的横向与竖向的表格单元数，也可这样理解为表格单元的高或宽是相邻几个表格单元的高或宽的相加和。 我们说的这种变形就和这个设置有关，如果改变相邻单元格的高或宽与个数时，图中所指的单元格也会发生相应的变化，相互制约，调整起来很麻烦，这非我们所希望的。如果表格比较复杂，最好采取嵌表格的形式，这样，可以少一些单元格之间相互干扰情况，而使单元格之间相对独立。 出现变形有情况还很多，这里就不一一陈述了，建议你在划分表格时，除了一些必要的高、宽设置外，将其它的高、宽设置全部删掉，一则减少了冗余代码，另则，也免除一些摸不着头脑的错误。 2、图片显示的问题 有时候我们明明在单元格中插入了背景图片，而且在Dreamweaver的视窗里也可以看到，但是一预览背景图片就不显示了。遇到这种请情况，不要着急，检查一下你的代码是否正确，我们来看下面的表格： 表格代码： ＜table width="300" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000"＞ ＜trbackground="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＞ ＜tdheight="19"background="hzz01_050213.gif"＞ ＜/td＞ ＜tdheight="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，所以会让新手感到奇怪。实际上在插入图片时表格的尺寸已经发生了改变，不过由于软件的局限性没显示出来罢了)，如果你确实需要表格不随插入的图片而改变的话，简单的办法就是把图片作为背景，不过，这图片看起来可不怎么样了。 总结 表格的使用中我们还会碰到许多这样那样的问题，这些问题对许多高手看来不算什么、但足以让新手迷惑不解。有问题没关系，大家可以多去一些比较好的设计技术论坛讨论，多看多观察，多思考、动手实践，只要肯学，一样会成为网页制作的高手。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
