一步一步学代码---图框制作(表格初步)[连载20]

没起名 2007-9-28 1317


四 图框制作
1 表格初步
(1)基本概念
表格是在论坛做帖的重要武器。这原因是,论坛里提供给用户操作的区域是非常有限的,用户只能在论坛程序框架好的body区域里的某个区域施展身手,不能修改body的背景色,更不能介入head的定义,因此,诸如让自己的帖子有底色、底图之类的修饰,用户只能通过表格来实现。表格是一个可自定义的容器,因而它就是我们用以实现帖子构设的利器。
把表格称作容器缘于表格的装载特性。表格是用于装载数据的,与我们现实中所看到和理解的表格非常一致。我们在Word和Excel里都接触过表格,知道表格有表头、表体、单元格、行、列等等概念,它们并不难理解。而在HTML里,我们对表格的理解和运用可能会增加一些概念,但并非复杂,在学习本教程的过程中,通过领会和实践,相信是很容易掌握的。
表格不仅仅只能装载数据,它还被广泛地应用于网页的布局,这与表格可以将其所在区域划分为行和列即诸多单元格密切相关。表格用于网页布局过去非常流行,现在仍然深受欢迎,它在论坛做帖也起到不可估量的作用,帖子的页面布局将因使用了表格而可以随心所欲地排版。
现在我们来看看表格的基本代码构成。以下是一个完整的表格标签代码框架,为了能够一目了然,各元素尚未引入它们的属性
<table><tbody><tr><td>内容</td></tr></tbody></table>
说明:
<table>:表格的起始符。任意一个表格的开始都必须以它开头,且必须有终止符</table>。
<tbody>:表体的起始符。紧跟在<table>之后,表示表体开始。必须有结尾符,放在</table>之前。在纯网页中可以不要tbody元素,但在论坛一定要使用,否则,当帖子用到较多的表格时,论坛的自动填充功能将可能会导致代码出错。
<tr>:tr的作用是规定表格的行,其中,t是table,r是row(行)。有多少组tr,这张表格就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>。
<td>:td的作用是规定表格的列,t是table,d可理解为down(向下)。有多少组td,这张表格就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成单元格。
</td>、</tr>、</tbody>、</table>:这些都是相应元素的终止符,表示相应元素所规范的内容结束。必须注意它们的排列顺序,不能有错。
从表格的代码框架分析得出:表格标签里,所有元素都成对出现,而这些元素是按照从大到小的顺序从外往里层层包裹的。table最大,它占在起始和终结的位置,tbody是老二,tr是老三,td最小,它在最里层。
(2)表格属性设置
我们先看看<table>标签里都有哪些需要设置的属性。
border:此属性定义表格的边框。比如,border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框。
cellspacing:单元格间距。当一个表格有多个单元格时,各单元格的距离就是cellspacing了,如若表格只有一个单元格,那么,这个单元格与表格上、下、左、右边边框的距离也是cellspacing。
cellpadding:单元格衬距。指该单元格里的内容与cellspacing区域的距离,如果cellspacing为0,则表示单元格里的内容与表格周边边框的距离。
width:表格的宽度。取值从0开始,默认以像素为单位,与显示器的分辨率的像素是一致的。800×600的显示分辨率下,如果表格设置成1000个像素的宽度,那么,得出的效果将导致IE的横向滚动条出现,只有通过滑动它才能看到表格最右边的内容,所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比,如widht="100%",这种赋值法有个好处:表格的宽度将根据可显示的宽度来自我调整宽度。
height:表格的高度,取值方法同width。提示:如果不是特别需要,建议不用设置表格的高度,系统会根据表格的内容自动设置高度。所谓特别的需要,是指一些特殊的情形下,需要表格的高度精确,比如,当我们通过表格的背景来发一张图片时,如果表格的高度不精确定义,图片就不可能完整或完美地显示。
bgcolor:表格的背景色。取值方法举例:bgcolor=#ff0000或bgcolor=red。单元格<td>也可有此属性,如果设置了表格的背景色,又设置表格单元格的背景色,得出的效果将是值得试试的,这种情况主要用于多单元格的表格。
background:表格的背景图。其值为一个有效的图片地址。<td>也有此属性。同时设置背景色和背景图不冲突,也建议这么做,这样,当图片不能显示时,表格的外观依然是好看的。
bordercolor:表格的边框颜色,当border值不为0时设置此值有效。取值同bgcolor。
bordercolorlight:亮边框颜色,当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。
bordercolordark:暗边框颜色,当border值不为0时设置有效。暗边框指表格的右边和下边的边框。
align:表格的对齐方式,值有left(左对齐,默认)、center(居中)以及right(右对齐)。align定义的是表格自身的位置,这是一个很有用的属性,强烈建议使用它来规定表格的对齐方式,尽量不要使用<p align=?>表格</p>、<div align=?>表格</div>和<center>表格</center>之类的标签来规定表格的位置,因为这么做将导致论坛添加许多废码!此外,当表格的宽度设置为100%,或者,表格的宽度设置成了占满它所在的容器的宽度,没有必要定义align属性。
表格标签的属性较多,使得本节有一定的难度,需要悉心领会并一一记住。
下面给出一个表格式样和代码,表格中有一些简单的说明。





本表格的属性设置:边框大小:border=1边框颜色:bordercolor=#ff0000背景色:bgcolor=#cc9968表格宽度:width=400单元格间距:cellspcing=16单元格衬距:cellpadding=8表格的对齐方式(居中):align=center注:其他属性未设置。
参考代码:
<table border=1 cellpadding=8 cellspacing=16 bgcolor=#cc9968 bordercolor=#ff0000 width=400 align=center><tbody><tr><td>表格里的内容写在这里</td> </tr></tbody></table>
(3)单元格属性设置
在上一节对表格属性设置的介绍中,我们提到,有一些属于表格的属性单元格也有,比如,背景色、宽度和高度等等。本节我们学习单元格的属性设置,但这回我们采用不那么正规的讲述方法来介绍单元格的属性设置。
从表格的整体外观上看,单元格是表格的基本构成单元,一张表格至少要有一个单元格。单元格由<tr><td></td></tr>共同组成,但在一组tr里,可以拥有多组td,我们前面说过,有多少组td该表格就有多少列;同样,一张表格可以拥有多组tr,表格有多少组tr就有多少行。显而易见,构成表格最小单元的td,它的属性设置是不可忽视的。
单元格的属性设置主要体现在<td>里,除了我们在上一节学到的bgcolor等之外,还有许多属性需要掌握,令人高兴的是,很多属性的设置方法都是和<table>属性设置一样的,如width、height、bordercolor等。关于width,我们在此着重讨论一下。好的习惯是,如果是一个单元格的表格,假设我们在<table>里设置了其宽度,那么,就不必再设置<td>的宽度了,因为这是多余的,但我经常看到不少朋友的代码就是重复设置的,且这么设置:<td width="100%">,显然只是增加了帖子的代码量,它没有任何作用——当有了表格宽度,单元格的宽度会自动占满表格的宽度。但是,在多列表格里,<td>的宽度就应该设置,如若不设置,系统会自动按各单元格里的内容的占位情况自行分配宽度,效果是可想而知的。
单元格的bordercolor设置有些讲究,主要用于实现单像素的表格边框——要实现这种效果,要求表格的border为1,且<table>里设置了bordercolor颜色值,cellpadding和cellspacing都设置为0,然后将<td>的bordercolor颜色值设置为与<td>的背景色相一致。
单元格的最为重要的属性应该为align和valign,align规范单元格里的内容的水平对齐方式,valign则规定垂直方向的对齐方式——请特别注意:它们规定的对齐方式是单元格里面的内容,而不象表格里的align那样定义自身的位置!align取值方法和前面介绍的一样,valign的取值方法主要有:left(左对齐)、middle(居中)、top(靠顶)、bottom(靠底)等。以下是<td>的两个对齐属性的不同设置所产生的效果示例:









默认对齐(不设置)




水平:居中垂直:靠顶代码:<td align=center valign=top>
单元格元素中,<tr>也有些属性设置,因在论坛中作用不是很大,这里就不介绍了。但有一个有趣的不属于“属性”的情况这里格外提一下:<tr>后面可以有文字,以下的示例的“表一”和“表二”就是放在<tr>和<td>之间的:









水平:居中垂直:默认




水平:右对齐垂直:靠底代码:<td align=right valign=bottom>
通过探索,我们还有可能发现更多的书上没有介绍的东西。建议大家安装可以自动填充代码的网页编辑器(如FP2003),这样,当我们在“代码”编辑模式下编写代码时,就会看到,有很多属性或其他内容自动弹出来,我们可以做些尝试,然后通过预览看看是什么样的效果。
熟能生巧,要多加练习哦!
最新回复 (0)
    • 文学风原创文学网站 | 分享原创乐趣
      2
        立即登录 立即注册
返回