利用表格制作网页的详细步骤模板.docx
《利用表格制作网页的详细步骤模板.docx》由会员分享，可在线阅读，更多相关《利用表格制作网页的详细步骤模板.docx（7页珍藏版）》请在冰豆网上搜索。
利用表格制作网页的详细步骤模板
利用表格制作网页具体步骤
将一定内容按特定行、列规则进行排列就组成了表格。
不管在日常生活和工作中,还是在网页设计中,表格通常都能够使信息更轻易了解。
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值等于多少,那表格内单元格从本身边界开始向内保留多少空白,单元格里元素永远都不会进入那些空白里。
我们在以后篇幅中会大量用到这两个属性,所以请大家不要弄混乱了,为了形象了解,请参考
升级会员 