《HTML基础:表格边框制作教程》由会员分享,可在线阅读,更多相关《HTML基础:表格边框制作教程(27页珍藏版)》请在金锄头文库上搜索。
1、HTML表格边框制作教程作者:灵子表格以和分别作起始标识符。其中,里有一些必要的参数,为容易理解起见,在这里只介绍本节用到的参数,其他的参数今后将陆续提到。border参数定义表格边框的粗细,记为border=数值,数值取0,1,2,3等整数。width是我们要定义的参数,它规定表格的宽度,数值通常用100%,记作width=100%,值得注意的是,如果不设置width值,表格将根据单元格里的内容自动定义宽度。height参数规范表格的高度,通常可以不设置,而是让内容的多少让系统自行设定。和之下,还需要由两个成对的标识符号定义表格的行、列,它们分别是,tr标识符定义表中的行,td标识符定义数据
2、表元,即每行中的每一列。要包含在里面。此外,论坛要求在下有(表体),它也是成对出现,包含.。一张完整的表格全部语法如下: Hello Table效果如下: Hello Table表格边框的修饰上一讲我们讲到border属性,border即为边框,除了有粗细的数值定义以外,还有其他的属性哦。我们先来看看亮边框的颜色和暗边框的颜色设置。亮边框记作bordercolorlight,暗边框记作bordercolordark。它们的数值可以用red、green、blue等表达,也可以用#11ee00这样的方式来表达,比如:bordercolorlight=red,bordercolorlight=#80
3、8000。请看下面的表格:以上表格的全部代码清单如下: Hello Table 上表中,左、上边框是亮边框,右、下边框为暗边框。怎么样?这么一修饰就好看多了吧?边框颜色方面还有一个属性:bordercolor。当同时设置了暗、亮边框的颜色,bordercolor的颜色设置是多余的,这一点应该注意。现在我们用bordercolor来设置一下表格边框,看看有什么效果:Hello Table代码清单: Hello Table上面我们学习的有关表格边框颜色的设置,下面继续跟我学习表格边框其他方面的知识。内容不多了,还讲两个表格边框的属性:一是边框线(cellpadding)粗细和边框空白处的大小,取值
4、范围从0开始,用正整数。下面是代码和表格效果: Hello Table 边框线:2 ,边框空白处:8 Hello Table 边框线:2 ,边框空白处:8表格背景的修饰默认情况下,HTML网页里表格的背景色是白色的。这显然不总是符合我们的要求,我们通常会设置各种背景颜色,以配合网页或贴子主题。设置表格的背景色很简单,给其bgcolor属性赋值即可,写作bgcolor=数值,其数值取值方式和上一讲讲到的边框颜色是一致的,比如:bgcolor=black或bgcolor=#000000。bgcolor属性应该放置在表格初始符当中。下面举个实例,先是代码,后是效果:nlp暗边框颜色:#008000亮
5、边框颜色:#008060 注一:代码中用上了设置字体对齐方式,在和之间用来定义左对齐,这种方式的定义无需终止标识符,而定义字体的那句则需要在结束字体定义处有终止标识符号。注二:细心的朋友可能已经发现,表格代码里多了一组,这是怎么回事呢?又是什么意思呢?在纯粹的HTML表格里本来可以不要这个的,但论坛有论坛的语法规范,它用来定义表格体,如果没有,系统也会自动在和之间加上,且它要把包含在里面。今后在论坛里制作表格应该养成加和的习惯。除了使用背景色,我们还可以使用图片来修饰表格背景,应该说,用图片来修饰表格的外观会更漂亮得多。不过应该注意,用来作表格背景图的文件不要太大,太大了打开网页速度较慢,图片
6、的尺寸方面,要么是有规则图案的小图片,要么就是和表格大小相一致的,否则做出的表格也不会有理想的外观效果。下面我们在上面表格的基础上,用这幅图来作表格的背景图片:screen.width-500)this.style.width=screen.width-500; border=0代码及效果如下:代码(红色那句就是加背景图的语法,放在当中合适的位置即可):背景色:bgcolor=#CCCC00暗边框颜色:#008000亮边框颜色:#008060 中国首届国际nlp大会效果:表格内容的编辑由于本讲涉及到一些编辑排版、字体修饰等语法,黑马先来简单介绍一下这些常用到的语法格式。:强制换行,效果等价于在
7、Design模式下的组合键 Shift+Enter。:段落标志。等价于敲一次回车键。:字体加粗,与效果一致。:下划线。:斜体字。:对齐方式,值取left,right,center。下面黑马以一个实例代码和效果来演示如何在表格中编排内容。先来看看效果:快乐的奔儿照片之一screen.width-500)this.style.width=screen.width-500;作于二六年二月五日代码清单:NLP图片之一快乐的奔儿照片之二中国NLP学院表格的嵌套一方面是为使页面(贴子)的外观更为漂亮,利用表格嵌套来编辑出复杂而精美的效果,另一方面是出于布局需要,用一些嵌套方式的表格来做精确的编排,或者二者
8、兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的,只要你思路清晰,对表格的整体嵌套构架做到心中有数,在实际编辑时就不会出乱,发布出来的作品也就不会只是一堆代码。现从最简单的表格嵌套开始演示和讲解,不会太难的。两张表格的嵌套:代码如下(红色的为第二张表格的代码): Table No.1(Father Table) Table No.2(Son Table) Table No.1(Father Table) 从上面的代码中,我们看得出来,第二张表格代码包含在第一张表格代码中的和里面,这一点一定要弄清楚。不然,终止符不正确或缺少时,由于系统的容错性不好、自动修正功能不够智能化等问题,效果将会很糟糕,错误太严重的话还会使浏览器在运算的时候进