HTML表格边框制作教程.docx
- 文档编号:6004178
- 上传时间:2023-01-02
- 格式:DOCX
- 页数:23
- 大小:262.33KB
HTML表格边框制作教程.docx
《HTML表格边框制作教程.docx》由会员分享,可在线阅读,更多相关《HTML表格边框制作教程.docx(23页珍藏版)》请在冰豆网上搜索。
HTML表格边框制作教程
HTML表格边框制作教程
作者:
灵子
表格以
其中,
此外,论坛要求在
HelloTable |
效果如下:
HelloTable
表格边框的修饰
上一讲我们讲到border属性,border即为边框,除了有粗细的数值定义以外,还有其他的属性哦。
我们先来看看亮边框的颜色和暗边框的颜色设置。
亮边框记作bordercolorlight,暗边框记作bordercolordark。
它们的数值可以用red、green、blue等表达,也可以用#11ee00这样的方式来表达,比如:
bordercolorlight=red,bordercolorlight=#808000。
请看下面的表格:
以上表格的全部代码清单如下:
上表中,左、上边框是亮边框,右、下边框为暗边框。
怎么样?
这么一修饰就好看多了吧?
边框颜色方面还有一个属性:
bordercolor。
当同时设置了暗、亮边框的颜色,bordercolor的颜色设置是多余的,这一点应该注意。
现在我们用bordercolor来设置一下表格边框,看看有什么效果:
HelloTable
代码清单:
上面我们学习的有关表格边框颜色的设置,下面继续跟我学习表格边框其他方面的知识。
内容不多了,还讲两个表格边框的属性:
一是边框线(cellpadding)粗细和边框空白处的大小,取值范围从0开始,用正整数。
下面是代码和表格效果:
2,边框空白处:
8
HelloTable边框线:
2,边框空白处:
8
表格背景的修饰
默认情况下,HTML网页里表格的背景色是白色的。
这显然不总是符合我们的要求,我们通常会设置各种背景颜色,以配合网页或贴子主题。
设置表格的背景色很简单,给其bgcolor属性赋值即可,写作bgcolor=数值,其数值取值方式和上一讲讲到的边框颜色是一致的,比如:
bgcolor=black或bgcolor=#000000。
bgcolor属性应该放置在表格初始符
下面举个实例,先是代码,后是效果:
bgcolor=#CCCC00
暗边框颜色:
#008000
亮边框颜色:
#008060
[注一:
代码中用上了设置字体对齐方式,在
]
[注二:
细心的朋友可能已经发现,表格代码里多了一组
……,这是怎么回事呢?又是什么意思呢?
在纯粹的HTML表格里本来可以不要这个的,但论坛有论坛的语法规范,它用
来定义表格体,如果没有,系统也会自动在今后在论坛里制作表格应该养成加
和的习惯。]
除了使用背景色,我们还可以使用图片来修饰表格背景,应该说,用图片来修饰表格的外观会更漂亮得多。
不过应该注意,用来作表格背景图的文件不要太大,太大了打开网页速度较慢,图片的尺寸方面,要么是有规则图案的小图片,要么就是和表格大小相一致的,否则做出的表格也不会有理想的外观效果。
下面我们在上面表格的基础上,用这幅图来作表格的背景图片:
screen.width-500)this.style.width=screen.width-500;"border=0>
代码及效果如下:
代码(红色那句就是加背景图的语法,放在
bgcolor=#CCCC00 暗边框颜色: #008000 亮边框颜色: #008060
|
效果:
表格内容的编辑
由于本讲涉及到一些编辑排版、字体修饰等语法,黑马先来简单介绍一下这些常用到的语法格式。
:
强制换行,效果等价于在Design模式下的组合键Shift+Enter。
:
段落标志。
等价于敲一次回车键。
…:
字体加粗,与…效果一致。
…:
下划线。
…:
斜体字。
对齐方式,值取left,right,center。
下面黑马以一个实例代码和效果来演示如何在表格中编排内容。
先来看看效果:
快乐的奔儿照片之一
screen.width-500)this.style.width=screen.width-500;">
作于二○○六年二月五日
代码清单:
黑马制作于二○○四年四月二十八日
表格的嵌套一方面是为使页面(贴子)的外观更为漂亮,利用表格嵌套来编辑出复杂而精美的效果,另一方面是出于布局需要,用一些嵌套方式的表格来做精确的编排,或者二者兼而有之。
熟练地掌握表格的嵌套技巧并不是很困难的,只要你思路清晰,对表格的整体嵌套构架做到心中有数,在实际编辑时就不会出乱,发布出来的作品也就不会只是一堆代码。
现从最简单的表格嵌套开始演示和讲解,不会太难的。
两张表格的嵌套:
代码如下(红色的为第二张表格的代码):
TableNo.2(SonTable)
TableNo.1(FatherTable)
从上面的代码中,我们看得出来,第二张表格代码包含在第一张表格代码中的
不然,终止符不正确或缺少时,由于系统的容错性不好、自动修正功能不够智能化等问题,效果将会很糟糕,错误太严重的话还会使浏览器在运算的时候进入死循环而造成机器当机。
下面是三个表格的嵌套代码及效果,由于表格里没有内容,所以,黑马指定了三级表格的高度。
代码中,每一个表格的代码用一种颜色来区分。
代码:
一般来说,只要结构清晰,再多的表格嵌套也是一样操作的。
再次提示:
不管是多少张表格嵌套,一定要注意起始标识符的正确性,稍有点错误,系统会自动帮你更正,但更正的效果或许不是你所需的,而且,一旦错误太多,系统的自动更正也无能为力。
先来看看以下表格:
你应该可以看得出来,上表中有一个一级表格(父表格),里面有两个二级表格(子表格),二级表格一上一下,位置十分清楚。
如果你愿意,你还可以在二级表格里再嵌套次级别的表格。
现在我们来看代码,每一种颜色的文字代码一个表格的完整代码,注意观察起始标识符号的前后关系。
这种方式的嵌套可以让你有更多的创意,比如,上面的二级表格里放置一个背景图并用透明Flash动画来修饰它,下面一个表格里放置滚动图文,总之,发挥你的想象力,充分利用这种格式制作出令人赞叹的效果来!
与上一讲的嵌套效果相比,我们可以明显地看到:
上面表格中的两个二级表格是并列放在父表里的。
如何做到这个效果呢?
首先,在父表格里,我们用两次“
其次,我们在父表的左、右单元格里分别放置一个表格,就形成了以上效果。
请研究以下代码清单,为了区分层次,把每一个表格的代码用一种颜色表示,请特别注意父表的代码:
上述代码里,定义了二级表格的高度,在实际使用中,你可以根据情况定义或不定义,但要注意两个子表格的高度要一致,否则就很难看。
此外,表格的border值要不要应该根据实际需要而定,之所以定义为4,是为了使效果更加明显。
表格是HTML文档里的元素之一,它还可以是容器,因此,表格里甚至是表格的单元格里又有表格是正常的,我们就是充分利用这一特点来装饰我们的文档(或贴子)。
第五讲的三个讲义专门研究了表格嵌套,嵌套原理到嵌套格式及嵌套方法我们都应该学会了。
讲义里的例子是简单的,但它们已经将表格的嵌套结构展示完毕,在这个基础上,我们可以制作出复杂而美观的贴子来。
所有多层次嵌套及嵌套中的嵌套都是通过一个又一个简单的嵌套来实现的,这就看你的了。
表格应用
在这里向大家演示《蛋壳艺术》的制作过程。
《蛋壳艺术》曾在贴图天下发布,这里,为了便于讲解,帖子代码与原来的帖子有所区别。
以下代码得出帖子的总体框架。
思路是,先制作一张父表,这张父表头尾部分有帖子标题及签名,标题的下方和签名的上方各加一条分隔线(语法:
)。
蛋壳艺术
灵子制作
以上第一步得出的效果已经差不多了,接下来要做的是在两个分隔符的中间加上核心内容。
我曾想用
下面是核心部分的代码,放置在上面代码的两个
之间:
整体效果如下:
接着放置背景音乐,帖子的制作就算完成了。
《蛋壳艺术》是一个很简单的帖子。
请记住:
复杂是简单的组合。
只要你会很多简单的东西,你就可以做出复杂的效果。
表格应用篇
(二)
本讲要点:
一、给表格添加背景图片;
二、给表格添加背景特效。
细心的朋友一打开本节讲义应该立刻发现:
本讲有大小不同但分布均匀的花朵,这是怎么回事呢?
原来,这是用了一个宽度为100%的表格,边框、边距、单元格间距都设置为0,所以大家在这里看不到表框。
其语法如下:
仔细看一下上面的代码,大家不难发现,给表格插入背景图片的语句是放在