网页设计table表格知识.docx
《网页设计table表格知识.docx》由会员分享，可在线阅读，更多相关《网页设计table表格知识.docx（76页珍藏版）》请在冰豆网上搜索。
网页设计table表格知识
利用表格制作网页详细介绍
更新日期：
2005-03-0909:
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=#”表示宽，“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（居中）。
分别见下例，注意这三个表格与边界的位置关系：
左对齐
center
右对齐
第三个表格的代码如下：
＜tablewidth="80"border="1"align="right"height="30"＞
＜tr＞
＜td＞右对齐＜/td＞
＜/tr＞
＜/table＞
3、单元格里内容的位置属性
水平对齐方式，用align="#"属性说明，#为left（左对齐）,right（右对齐）,center（居中）；垂直对齐方式，用valign="#"属性说明，#为top（上对齐）,bottom（下对齐）,middle（居中）。
分别见下例，注意单元格里的内容与边框的的位置关系：
水平对齐方式：
内容左对齐
内容居中
内容右对齐
代码如下：
＜tablewidth="450"border="1"＞
＜tr＞
＜tdwidth="150"＞
＜divalign="left"＞内容左对齐＜/div＞
＜/td＞
＜tdwidth="150"＞
＜divalign="center"＞内容居中＜/div＞
＜/td＞
＜td＞
＜divalign="right"＞内容右对齐＜/div＞
＜/td＞
＜/tr＞
＜/table＞
垂直对齐方式
内容上对齐
内容居中
内容下对齐
代码如下：
＜tablewidth="150"border="1"＞
＜tr＞
＜tdheight="40"width="146"valign="top"＞内容上对齐＜/td＞
＜/tr＞
＜tr＞
＜tdheight="40"width="146"valign="middle"＞内容居中＜/td＞
＜/tr＞
＜tr＞
＜tdheight="40"width="146"valign="bottom"＞内容下对齐＜/td＞
＜/tr＞
＜/table＞
4、表格的背景色、背景图片，单元格的背景色、背景图片
背景色属性：
bgcolor="#"，背景图片属性：
background="#"。
见下例：
代码如下：
＜tablewidth="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＞
说明：
在上例中，整个表格的背景色是bgcolor="#539996"，第一行第二列的单元格背景图片是background="Back01.gif"，第三行第二列的单元格背景色是bgcolor="#FF0000",根据显示结果可以看出：
设置表格的背景色后再设置单元格的背景色或背景图片，将优先显示单元格的属性。
5、表格属性cellspacing、cellpadding
5、表格属性cellspacing、cellpadding
cellspacing属性用来指定表格各单元格之间的空隙。
此属性的参数值是数字，表示单元格间隙所占的像素点数。
我们来看下面的两个表格：
上面第一个表格的单元格之间没有空白距离，而第二个的单元格之间有很大的空白距离，我们来比较一下他们的源代码：
第一个表格的代码：
＜tablewidth="200"cellspacing="0"border="1"bordercolor="#000000"＞
＜tr＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
第二个表格的代码：
＜tablewidth="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属性用来指定单元格内容与单元格边界之间的空白距离的大小。
此属性的参数值也是数字，表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。
我们先来看看这个例子:
我们来看下面两个表格：
网页教学网
网页教学网
第一个表格单元格的内容与单元格边界之间没有空白距离，而第二个表格单元格的内容与单元格边界之间有空白距离，我们来比较一下他们的源代码：
第一个表格的代码：
＜tablewidth="240"cellspacing="0"border="1"bordercolor="#000000"cellpadding="０"＞
＜tr＞
＜tdwidth="120"＞网页陶吧＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
第二个表格的代码：
＜tablewidth="240"cellspacing="0"border="1"bordercolor="#000000"cellpadding="15"＞
＜tr＞
＜tdwidth="120"＞网页陶吧＜/td＞
＜td＞ ＜/td＞
＜/tr＞
＜/table＞
两个表格只有红色部分代码不同。
第一个表格中"网页陶吧"这几个字离它所在的单元格为0,那是因为设置了cellpadding="0"的原因.第一个表格中的"网页陶吧"这几个字离它所在的单元格比较远，那是因为cellpadding="15",也就是说"网页陶吧"离它所在的单元格的边界的距离为20像素。
简单的说,cellpadding的值等于多少,那表格内的单元格从自身边界开始向内保留多少空白,单元格里的元素永远都不会进入那些空白里。
我们在以后的篇幅中会大量用到这两个属性，所以请大家不要弄混乱了,为了形象的理解，请参考下图：
表格（table）制作网页详细介绍
更新日期：
2005-03-0908:
51 出处：
网页教学网 作者：
表格最基本也最常用的属性，要用好表格，就必须熟悉和掌握这些最基本的属性。
在对这些基本的属性有了一定的了解之后，我们再来看看表格的其他几个似乎并不常用的属性，以便对表格有一个整体的认识。
事实上，即使不了解下面所讲的内容，多数情况下也不会影响你对表格的使用，所以我们只是简略的带过。
1、拆分表格
colspan表示该一储存格向右打通的栏数。
rowspan表示该一储存格向下打通的栏数。
看下面的表格：
第一行第一栏
第一行的第二、三栏
第二行及第三行的第一栏
第二行第二栏
第二行第三栏
第三行第二栏
第三行第三栏
表格代码：
＜tablewidth="450"border="1"cellspacing="0"cellpadding="2"bordercolor="#009900"＞
＜tr＞
＜td＞第一行第一栏＜/td＞
＜tdcolspan="2"＞第一行的第二、三栏＜/td＞
＜/tr＞
＜tr＞
＜tdrowspan="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
%ofIEvisitor
%ofNCvisitor
August
91%
9%
表格代码：
＜tablewidth="400"border="1"cellspacing="0"cellpadding="2"＞
＜caption＞＜fontcolor="#FF0000"＞＜b＞网页陶吧访问统计＜/b＞＜/font＞＜/caption＞
＜tralign="CENTER"＞
＜th＞Month＜/th＞
＜th＞%ofIEvisitor＜/th＞
＜th＞%ofNCvisitor＜/th＞
＜/tr＞
＜tralign="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＞-表的脚注
见下例：
Food
Drink
Sweet
A
B
C
D
E
F
表格代码：
＜tableborderwidth="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有效）
＜colgroupalign=#＞#=left,right,center
见下例：
Food
Drink
Sweet
A
B
C
D
E
F
表格代码：
＜tableborderwidth=160＞
＜colgroupalign=left＞＜colgroupalign=center＞＜colgroupalign=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＞定义一个列组中的列，以便对它们能够同时设置有关属性
＜colspan=#＞#=从左数起，具有指定属性的列的列数
＜colalign=#＞#=left,right,center
见下例：
Food
Drink
Sweet
A
B
C
D
E
F
表格代码：
＜tableborderwidth=160＞
＜colgroup＞＜colalign=centerspan=2＞＜colgroupalign=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＞
以上内容考虑到实用性，没有展开讨论。
在网页上制作精美的“立体表格”
更新日期：
2005-03-1409:
48 出处：
网页教学网 作者：
表格是网页内应用较多的东东，但一般我们只是用它来定位网页中的模块和排版文字。
其实表格用好了还可以做出很多漂亮的效果，如图一，承载文字的表格有一种看似立体的感觉。
下面就来介绍一下这种立体表格的制作方法。
图一
表格有立体的感觉的全是因为在表格的右边和下边有浅黑色的阴影。
所以我们只要实现了阴影就可以实现这种效果。
现在我们就开始具体讲述制作过程。
在Frontpage2000中新建一个表格，选择菜单“表格”-“属性”-“表格”，在窗口内将表格的宽度设置为150象素；高度设置为200象素；边框粗细设置为0；将单元格边距设置为0，而单元格间距为1，如图二所示。
图二
完成以上设置后将表格的背景色设置为黑色，但表格内的单元格的背景色设置为白色，完成以后就回出现如图三所示的单象素黑色边框效果。
图三
接下来的工作就是要为右边和下边的黑色边框制作阴影，我们使用CSS样式的功能来实现。
在图二所示的选项窗口内点击“样式”按钮继续选择“格式”-“边框”。
在边框与阴影选项框内，分别将样式选择为“实线”；颜色选择为“灰色”；并在预览选项内将下边和右边的边框应用按钮选中，如图四所示。
图四
点击“预览”，你要的立体表格效果就出来了。
（注明：
我们在制作出来的最终效果可能和图一所示略有出入，这是因为我们首先制作出了如图三的单象素黑色边框，这样做的效果会更明显，更有立体感。
）
在这里我们还给出在Dreamweaver内定义的样式代码，因为Frontpage和Dreamweaver的代码机制有差别，相对之下Dreamweaver对样式代码写得更规范更合理。
表格代码如下：
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颜色表）。
试着自己改变一下，根据你的需要制作效果。
用表格巧妙制作导航条按钮
更新日期：
2005-03-0909:
49 出处：
天极设计在线 作者：
看到上面的导航条了吗？
你可以点击一下看看它的效果，请注意，这可是用表格做出来的，你相信吗？
其实代码很简单，现在让我们来看看该怎么做。
1.首先创建一个1x6的表格，参数为：
border=0cellspacing=3cellpadding=0；
2.在这个表格的每个单元格内分别插入一个表格，宽度和高度设为100%；
3.建立一个css样式.up和.down；代码如下：
4.对插入的表格调用样式和行为，代码如下：
class=uponMouseDown="className='down'"onMouseUp="className='up'"onMouseOut="className='up'"onclick=window.open（"button.htm","_blank"）
注意：
链接请用onclick，不要用href，因为后者访问后有虚线框，不美观。
现在存盘看看效果吧！
表格使用的常见问题及解决方法
更新日期：
2005-03-0907:
37 出处：
网页教学网 作者：
初学者在使用表格时，可能会遇到各种问题，由于对标记还不是很熟悉，所以往往对这些问题感到莫名其妙，一筹莫展。
有时侯甚至因为在这些问题上纠缠不清而最终心烦意乱丧失了继续学习的兴趣。
所以在这里，我们列出了表格使用过程中最常见的问题来加以分析，希望能给大家带来帮助
1.表格的变形问题
网页在不同的屏幕分辨率、或改变窗口时常出现一些页面变形情况，这也是最另人恼火的事，怎么办呢?
秋实曾在天极网页陶吧撰文详细的阐述过这个问题，我们来看看他是怎么解决的。
A、因为表格排列设置而在不同分辨率下所出现的错位
这种变形情况是：
1、在800*600的分辨率下时，一切正常，而到了1024*800时，则多个表格或者有的居中，有的
升级会员 