利用表格制作网页的详细步骤

利用表格制作网页的详细步骤————————————————————————————————作者: ————————————————————————————————日期:ﻩ利用表格制作网页的详细步骤将一定的内容按特定的行、列规则进行排列就构成了表格。

无论在日常生活和工作中，还是在网页设计中,表格通常都可以使信息更容易理解。

ＨＴMＬ具有很强的表格功能，使用户可以方便地创建出各种规格的表格,并能对表格进行特定的修饰，从而使网页更加生动活泼。

HTMＬ表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列，从而获得特定的表格效果。

表格在网页设计中的地位非常重要，可以说如果您表格用不好的话,就不可能设计出出色的网页。

大多数初学者一开始就接触表格，对表格都有一定的了解,但是要实现真正细致甚至强大的功能,仔细理解taｂlｅ的代码结构至关重要!我们将在这里详细介绍表格各种常用的标记、技巧以及表格使用中的问题，了解和掌握了这些内容,你将发现，ｔablｅ原来是这样的亲切易用！一、创建基本的表格一个表由＜ｔable>开始, </taｂle＞结束，表的内容由 <tr＞，<ｔh>和＜tｄ＞定义。

＜ｔr>说明表的一个行，表有多少行就有多少个<tｒ＞；<th ＞说明表的列数和相应栏目的名称,有多少个栏就有多少个＜tｈ＞;<ｔd>则填充由<tr>和＜th＞组成的表格。

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

在讲解之前，我们先来看看表格的基本构造。

下图是一个3行3列的表格。

这里面有两个概念要弄明白：表格与单元格。

他们的关系是整体与局部的关系，如同砌墙的砖和砌好的墙一样。

在上面3行3列的表格中一共有9个单元格。

由于我们后面将提到的表格属性和单元格属性有很多是相同的,所以一定要分清楚。

前面已经说过表格的最基本标记为＜taｂｌe>、＜ｔｒ>、<td>,可以先树立这样一个概念：描述整个表格的属性标记放在<tａble＞里，描述单元格的属性标记放在<tr>、＜tｄ>里。

有这样一个概念后，我们学习起来就可能简单些。

１、表格、单元格的大小，表格边框的宽度、颜色,单元格边框的颜色表格以及单元格的大小是用“ｗiｄth=＃”和“height＝＃”属性说明,“wiｄｔh=#”表示宽，“heｉｇhｔ=＃”表示高，,#是以象素或者百分比为单位的数字。

表格边框的宽度是用“boｒder＝＃”属性说明,，＃为宽度值,单位是象素，表格边框的颜色是用“borderｃolor="#"属性说明，#是１6进制的６位数,格式为ｒrｇｇｂb，分别表示红、绿、兰三色的分量。

或者是16种已定义好的颜色名称,参见文本颜色,单元格边框的颜色属性与表格的相同，但只适用于IE。

下面是一个宽为３00,高为80,边框宽为4，边框颜色为“FF0000”的一行两列表格,其中第一个单元格的宽为200，高为８0,第二个单元格的边框颜色为“０000ＦＦ”。

代码如下:<tａbｌｅ bordeｒ="4" ｗiｄth＝"300" height=＂８０" bordercｏｌor="#FＦ００0０＂＞<tｒ><ｔｄ widtｈ＝"200" heｉｇht=＂8０＂＞<／tｄ＞＜td boｒｄeｒcolor="#0000ＦＦ"＞<／ｔd><／tｒ></table>2、表格的水平摆放位置表格的水平摆放位置是用alｉgn=＂#" 属性说明的,#为ｌeft(左对齐)，riｇht(右对齐), cｅnｔer(居中)。

分别见下例,注意这三个表格与边界的位置关系:左对齐center右对齐第三个表格的代码如下:<table wｉｄth="80" bordeｒ＝"1" alｉgn="right" heｉgｈt="30"＞<ｔr>＜td>右对齐<／ｔｄ＞<／tr＞＜/tａble＞３、单元格里内容的位置属性水平对齐方式，用alｉgn="#"属性说明，＃为leｆｔ(左对齐), ｒight(右对齐）, ｃentｅr(居中）;垂直对齐方式，用valign="#"属性说明,#为tｏp(上对齐）, boｔtom(下对齐)， mｉdｄｌe(居中)。

分别见下例，注意单元格里的内容与边框的的位置关系:水平对齐方式：内容左对齐内容居中内容右对齐代码如下：＜taｂle ｗidｔh="4５０＂ bordeｒ="１"><tr＞＜td widtｈ＝"150"＞<diｖ aｌigｎ="left"＞内容左对齐＜/ｄiv＞＜/ｔd＞<td wｉdth="150"＞＜ｄiv aｌiｇn="cenｔｅr＂＞内容居中＜/div＞</ｔd><ｔｄ＞<dｉv aｌigｎ＝"rigｈｔ">内容右对齐</div>＜/td>＜/ｔr>＜/ｔabｌｅ>垂直对齐方式内容上对齐内容居中内容下对齐代码如下:＜tablｅ width="１50" boｒder＝"1">＜tｒ><td ｈeight="40" widｔｈ="14６" ｖalign="tｏｐ"＞内容上对齐</ｔd></tr><ｔr>＜ｔｄheiｇｈt＝"40＂ wｉdtｈ="１4６" vａｌign=＂ｍiddle"＞内容居中</ｔd>＜/tr>＜tｒ＞＜td height="40" ｗidth＝"146" vａlign="ｂoｔtom"＞内容下对齐</td＞</tr>＜/tabｌe＞4、表格的背景色、背景图片，单元格的背景色、背景图片背景色属性：bgcｏlor="#＂ ,背景图片属性：baｃｋground＝"#"。

见下例：代码如下:<tabｌe wｉdｔｈ＝＂4５0" ｂorder=＂1" ｂｇcolor="#５３999６" ｂordercｏlor="＃FFFFFF" height="90"><tr＞<tｄ＞＜/ｔd>＜td bａckground=＂Bａck01.giｆ"> </td＞＜／tr><ｔr><tｄ> ＜/td＞＜tｄ> ＜/td＞</ｔr＞＜tr＞<td ｂgcolor="#FF00００"＞<／ｔd＞<td> ＜／td>＜/ｔｒ>＜/tabｌｅ>说明:在上例中，整个表格的背景色是bｇcolor＝"#５39９９６" ，第一行第二列的单元格背景图片是 bａｃkｇｒｏund=＂Ｂack０１.gｉf" ，第三行第二列的单元格背景色是 bgcｏloｒ="#FF０000" ,根据显示结果可以看出：设置表格的背景色后再设置单元格的背景色或背景图片，将优先显示单元格的属性。

5、表格属性ｃｅlｌspacing、celｌpadding5、表格属性ｃｅlｌｓｐａcing、ceｌｌpaddingceｌlspaｃing属性用来指定表格各单元格之间的空隙。

此属性的参数值是数字，表示单元格间隙所占的像素点数。

我们来看下面的两个表格:上面第一个表格的单元格之间没有空白距离，而第二个的单元格之间有很大的空白距离,我们来比较一下他们的源代码:第一个表格的代码:<taｂlｅｗidtｈ="200" ｃellsｐａcing="０" boｒdeｒ＝"1" bordｅr ｃolor="#000０0０"＞<tr＞<td> </td＞<tｄ> ＜/td＞<td> ＜/td＞＜/ｔr＞＜/tablｅ>第二个表格的代码:＜taｂle wｉdth="200" cellspacinｇ="8＂ boｒdeｒ="1" bordｅｒｃolor＝"#0０000０">＜tr><td> </ｔd>＜ｔd＞＜/td＞＜td> </tｄ＞</tｒ><／taｂle＞比较代码，上边两个表格中只有 ceｌlsｐacing 的设置不同，一个为“0”，一个为“8”,显示的结果就是第一个表格的每个单元格之间的距离为0（在本例中由于我们为了显示的方便,将表格边框设为“1”,所以单元格的真实距离是“2”，若将表格边框设为“0”,则单元格的距离就是0了,第二个单元格同理)，第二个表格的每个单元格之间的距离为8。

ｃellpadｄing属性用来指定单元格内容与单元格边界之间的空白距离的大小。

此属性的参数值也是数字，表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。

我们先来看看这个例子:我们来看下面两个表格：网页教学网网页教学网第一个表格单元格的内容与单元格边界之间没有空白距离，而第二个表格单元格的内容与单元格边界之间有空白距离,我们来比较一下他们的源代码：第一个表格的代码：＜tabｌｅ wiｄｔh="24０＂ｃellspacing="0＂ borｄｅr=＂１＂ｂor ｄercolor=＂#000000" ｃellpａddｉng＝"０＂><ｔr>＜td width="120"＞网页陶吧<／td>＜td> </tｄ>＜/tr></tａｂle>第二个表格的代码:<tablｅ wiｄｔｈ="2４0" ｃellspaciｎg="0" ｂorder="1" bordercolor="＃００0０00" ｃellpadding=＂１5">＜tr＞<ｔd ｗiｄth＝"120"＞网页陶吧＜／tｄ>＜tｄ＞</td＞＜/tr＞＜/table>两个表格只有红色部分代码不同。