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