2023年12月6日发(作者：离职申请格式)
HTML表格边框制作教程
作者：灵子
表格以
| Hello Table |
效果如下：
Hello Table
表格边框的修饰
上一讲我们讲到border属性，border即为边框，除了有粗细的数值定义以外，还有其他的属性哦。我们先来看看亮边框的颜色和暗边框的颜色设置。亮边框记作bordercolorlight，暗边框记作bordercolordark。它们的数值可以用red、green、blue等表达，也可以用#11ee00这样的方式来表达，比如：bordercolorlight=red，bordercolorlight=#808000。请看下面的表格：
以上表格的全部代码清单如下：
| Hello Table |
上表中，左、上边框是亮边框，右、下边框为暗边框。怎么样？这么一修饰就好看多了吧？
边框颜色方面还有一个属性：bordercolor。当同时设置了暗、亮边框的颜色，bordercolor的颜色设置是多余的，这一点应该注意。现在我们用bordercolor来设置一下表格边框，看看有什么效果：
Hello Table
代码清单：
| Hello Table |
上面我们学习的有关表格边框颜色的设置，下面继续跟我学习表格边框其他方面的知识。
内容不多了，还讲两个表格边框的属性：一是边框线（cellpadding）粗细和边框空白处的大小，取值范围从0开始，用正整数。下面是代码和表格效果：
| Hello Table 边框线:2 ，边框空白处:8 |
Hello Table 边框线:2 ，边框空白处:8
表格背景的修饰
默认情况下，HTML网页里表格的背景色是白色的。这显然不总是符合我们的要求，我们通常会设置各种背景颜色，以配合网页或贴子主题。
设置表格的背景色很简单，给其bgcolor属性赋值即可，写作bgcolor=数值，其数值取值方式和上一讲讲到的边框颜色是一致的，比如：bgcolor=black或bgcolor=#000000。bgcolor属性应该放置在表格初始符<>当中。下面举个实例，先是代码，后是效果：
|
背景色：bgcolor=#CCCC00
暗边框颜色：#008000
亮边框颜色：#008060
|
[注一：代码中用上了设置字体对齐方式，在
来定义左对齐，这种方式的定义无需终止标识符，而定义字体的那句则需要在结束字体定义处有终止标识符号。]
[注二：细心的朋友可能已经发现，表格代码里多了一组
……，这是怎么回事呢？又是什么意思呢？在纯粹的HTML表格里本来可以不要这个的，但论坛有论坛的语法规范，它用来定义表格体，如果没有，系统也会自动在
除了使用背景色，我们还可以使用图片来修饰表格背景，应该说，用图片来修饰表格的外观会更漂亮得多。不过应该注意，用来作表格背景图的文件不要太大，太大了打开网页速度较慢，图片的尺寸方面，要么是有规则图案的小图片，要么就是和表格大小相一致的，否则做出的表格也不会有理想的外观效果。下面我们在上面表格的基础上，用这幅图来作表格的背景图片：
-500)=-500;" border=0>
代码及效果如下：
代码(红色那句就是加背景图的语法，放在
|
背景色：bgcolor=#CCCC00
暗边框颜色：#008000
亮边框颜色：#008060
|
效果：
表格内容的编辑
由于本讲涉及到一些编辑排版、字体修饰等语法，黑马先来简单介绍一下这些常用到的语法格式。
：强制换行，效果等价于在Design模式下的组合键 Shift+Enter。
…：字体加粗，与…效果一致。
…：下划线。
…：斜体字。
：对齐方式，值取left，right，center。
下面黑马以一个实例代码和效果来演示如何在表格中编排内容。先来看看效果：
快乐的奔儿照片之一
-500)=-500;">
作于二○○六年二月五日
代码清单：
| 快乐的奔儿照片之一
src="/admin/../../admin/uploadpic/"> 快乐的奔儿照片之二
黑马制作于二○○四年四月二十八日 |
表格的嵌套一方面是为使页面（贴子）的外观更为漂亮，利用表格嵌套来编辑出复杂而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格来做精确的编排，或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的，只要你思路清晰，对表格的整体嵌套构架做到心中有数，在实际编辑时就不会出乱，发布出来的作品也就不会只是一堆代码。
现从最简单的表格嵌套开始演示和讲解，不会太难的。
两张表格的嵌套：
代码如下（红色的为第二张表格的代码）：
| Table No.1(Father Table)
Table No.1(Father Table)
|
从上面的代码中，我们看得出来，第二张表格代码包含在第一张表格代码中的
下面是三个表格的嵌套代码及效果，由于表格里没有内容，所以，黑马指定了三级表格的高度。代码中，每一个表格的代码用一种颜色来区分。
代码：
|
|
一般来说，只要结构清晰，再多的表格嵌套也是一样操作的。再次提示：不管是多少张表格嵌套，一定要注意起始标识符的正确性，稍有点错误，系统会自动帮你更正，但更正的效果或许不是你所需的，而且，一旦错误太多，系统的自动更正也无能为力。
先来看看以下表格：
你应该可以看得出来，上表中有一个一级表格（父表格），里面有两个二级表格（子表格），二级表格一上一下，位置十分清楚。如果你愿意，你还可以在二级表格里再嵌套次级别的表格。
现在我们来看代码，每一种颜色的文字代码一个表格的完整代码，注意观察起始标识符号的前后关系。
|
|
这种方式的嵌套可以让你有更多的创意，比如，上面的二级表格里放置一个背景图并用透明Flash动画来修饰它，下面一个表格里放置滚动图文，总之，发挥你的想象力，充分利用这种格式制作出令人赞叹的效果来！
与上一讲的嵌套效果相比，我们可以明显地看到：上面表格中的两个二级表格是并列放在父表里的。如何做到这个效果呢？
首先，在父表格里，我们用两次“
|
|
|
上述代码里，定义了二级表格的高度，在实际使用中，你可以根据情况定义或不定义，但要注意两个子表格的高度要一致，否则就很难看。此外，表格的border值要不要应该根据实际需要而定，之所以定义为4，是为了使效果更加明显。
表格是HTML文档里的元素之一，它还可以是容器，因此，表格里甚至是表格的单元格里又有表格是正常的，我们就是充分利用这一特点来装饰我们的文档（或贴子）。
第五讲的三个讲义专门研究了表格嵌套，嵌套原理到嵌套格式及嵌套方法我们都应该学会了。讲义里的例子是简单的，但它们已经将表格的嵌套结构展示完毕，在这个基础上，我们可以制作出复杂而美观的贴子来。所有多层次嵌套及嵌套中的嵌套都是通过一个又一个简单的嵌套来实现的，这就看你的了。
表格应用
在这里向大家演示《蛋壳艺术》的制作过程。《蛋壳艺术》曾在贴图天下发布，这里，为了便于讲解，帖子代码与原来的帖子有所区别。
以下代码得出帖子的总体框架。思路是，先制作一张父表，这张父表头尾部分有帖子标题及签名，标题的下方和签名的上方各加一条分隔线(语法：
| 蛋壳艺术 黑马制作 |
蛋壳艺术
灵子制作
以上第一步得出的效果已经差不多了，接下来要做的是在两个分隔符的中间加上核心内容。我曾想用的方式把蛋壳图片一一放上去，考虑到这样做会使帖子很长，就想到用marquee语句令图片自下而上滚动；又考虑到img语句得出的图片观赏者可以用鼠标滚轮控制图片大小——这样对帖子的整体效果是有一定的影响的——，因此，想把图片一张一张地以表格的背景图的形式体现出来。
下面是核心部分的代码，放置在上面代码的两个
整体效果如下：
接着放置背景音乐，帖子的制作就算完成了。
《蛋壳艺术》是一个很简单的帖子。请记住：复杂是简单的组合。只要你会很多简单的东西，你就可以做出复杂的效果。
表格应用篇(二)
本讲要点：
一、给表格添加背景图片；
二、给表格添加背景特效。
细心的朋友一打开本节讲义应该立刻发现：本讲有大小不同但分布均匀的花朵，这是怎么回事呢？原来，这是用了一个宽度为100%的表格，边框、边距、单元格间距都设置为0，所以大家在这里看不到表框。其语法如下：
仔细看一下上面的代码，大家不难发现，给表格插入背景图片的语句是放在
上面的代码效果如下：
可能有的朋友会说，这与用发图没区别呀！呵呵，有的，你试试看能不能用鼠标滚轮调整图片的大小。不行吧？注意：这张图是以背景图片的形式显示出来的，而不是以img形式发布的。由于表格的border及单元格边距和间距设置为0，所以看不到表格的边框和其他表格特征，但它确实是一张包含背景图片的表格！
同时也请朋友们注意
| 和 | 之间。比如，我们在上面的表格代码里插入一段套用Flash影片的代码，将使得效果与上表有明显的区别。代码和效果如下：
| |
小结：通过本节的学习，我们掌握了如何给表格加背景图并给表格加个透明的Flash动画效果。在此基础上，通过表格的里外嵌套和多个Flash透明效果，必要时再加上修饰合理的优美的文字，你的贴子就非常精彩了。
HTML之表格应用篇(三)
充分利用表格的单元格能够做出一些意想不到的效果。事实上，表格的组成元素中，可视部分的核心元素就是单元格，它由表线规范起来，成为一个个可装载各种内容的容器。在一个表格里，作为容器的单元格可以是多个的，也可以只是一个。此前我们所讲的表格嵌套，基本上是由一个父表格加上若干个并列关系或从属关系的子表格组合而成，而这次，我们将讨论一个含有多个单元格的表格的实现方法以及单元格里与其他表格的嵌套问题。
在HTML语法中，单元格由是这样实现的：
以上语法不能独立使用，它们必须放在
我们先来看看一个简单的多单元格的表格实例：
这个是3×3的表格，即，有9个单元格的表格。完整代码如下：
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
你会说：这有什么？这只不过是一个普普通通的表格。呵呵，是的，它是一个普通的表格，而且很简单。但还是请你看看下面表格的效果，它只是在上面表格的 基础上做了些更改：
你可能又会说：这也没什么呀！不过是把border等值设置为0，把单元格的高度和单元格的颜色改变了而已。
是的。但是，如果我把第五个单元格
从上面表格中应该可以看出：我们是在第5个单元格里再嵌套一个带有背景图的表格，这才是本节的核心内容。全部代码如下：
|
| |||
小结：
一、本讲介绍用HTML制作多单元格的表格，表格中的每一行由
二、在
表格的并列组合
这一讲我们来讨论表格的并列组合。所谓并列组合，就是表与表之间的关系不是从属关系，亦即，它们不是嵌套在一起的，而是以并排或上下的形式组合在一起。为了容易规范以并列关系组合起来的表格整体，我们把这些组合起来的表格放在一个表格里面，因此，本讲依然与表格的嵌套有关，只是，表格的嵌套不再是本讲的主要内容。
三个并排起来的表格并不难以实现。以下的三个表格实例是紧密并排在一块的，它们都是子表格，换句话说，它们是放在一张父表里。请研究一下表格效果与代码：
|
|
上面的表格实例应该说是一目了然的。表一和表三分别位于左边和右边，它们只是一个非常简单的表格；表二有两个高度不一致的单元格，位于表一和表三之间。这三个表格以典型的并排关系组合在一起，它们作为套在一个父表里的子表格，其相互间的关系是并列的而不是从属的(不过它们一起从属于其所在的父表格)。表格代码的易读性也很理想，只有两个地方需要说明：一是，表二第二个单元格的高度设置为118，这是因为，表二的边框我们设置为1，既然表里有两个单元格，单元格的边框占用两个单位(即2)，那么，从整齐角度出发，这个单元格的高度需要减去2。事实上，宽度也应该这么计算的，虽然代码中并未做相应处理；二是，三个表格我们都用了align=left来规定位置，而不是我们想当然的一个用left，一个用center，另一个用right。原因很简单：让它们紧密靠在一起。
以上讲的是让几个表格并排在一起的组合方法。下面讲一讲上下排列的组合方法。
我们以上面的表格实例当作一个表格单位(事实上它们是套在一张表格里面的，我们这样看待它是未尝不可的)，在它的下面再放置一张宽度和它一致的表格，从而组合成一个相对复杂的实例。为了便于观察，我们先来看看即将使用的表格式样：
这不是一个复杂的表格，我们在上一讲已经熟悉它了。现在我们要做的是把这张表格与上面的组合表格整合起来。整合操作也不复杂，需要注意的是，我们需要有整体概念，随时随地地把任意一个组合体看成一个整体，而一个整体在某时它又只是一个组合体的成员。——呵呵，抽象吧？不要紧，关键是操作。
先看代码：
|
代码总是枯燥的，读着读着我们会头晕。但是，要想深入研究，我们不得不读代码。代码与实效结合起来，阅读起来会容易一些：
我们已经知道，表格可以有背景图，表格的单元格也可以有背景图，那么，如果我们制作或找到合适的图片，分别用作表一、表二单元格1、表三、表四单元格1表四单元格3、表四单元格4、表四单元格5和表四单元格6的背景，再将所有表格的border等值取值为0，然后在表二单元格2和表四单元格2放置其他内容，得出的组合效果就相当完美，你甚至不能看出它是一个表格组合。看看——
本讲主要讲述表格的并列组合。在网页制作中，表格经常用于整体布局之用，它们就是以并列+嵌套的方式组合起来的，制作帖子也大量使用表格的并列+嵌套 形式的组合。通过观察表格组合的实例和分析代码，相信大家会慢慢熟悉和掌握表格的组合与嵌套的高级应用。
特效代码——
|
本文发布于:2023-12-06 16:30:17，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/zhishi/a/1701851417237653.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：HTML表格边框制作教程.doc
本文 PDF 下载地址：HTML表格边框制作教程.pdf
| 留言与评论（共有 0 条评论） |
