HTML表格边框制作教程

2023年12月18日发(作者：python中replace函数的功能)

HTML表格边框制作教程

作者：灵子

表格以

和分别作起始标识符。其中，里有一些必要的参数，为容易理解起见，在这里只介绍本节用到的参数，其他的参数今后将陆续提到。border参数定义表格边框的粗细，记为border=数值，数值取0，1，2，3等整数。width是我们要定义的参数，它规定表格的宽度，数值通常用100%，记作width=100%，值得注意的是，如果不设置width值，表格将根据单元格里的内容自动定义宽度。height参数规范表格的高度，通常可以不设置，而是让内容的多少让系统自行设定。

和之下，还需要由两个成对的标识符号定义表格的行、列，它们分别是……，……，tr标识符定义表中的行，td标识符定义数据表元，即每行中的每一列。……要包含在……里面。此外，论坛要求在下有（表体），它也是成对出现，包含...。一张完整的表格全部语法如下：

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>

背景色：bgcolor=#CCCC00 暗边框颜色：#008000 亮边框颜色：#008060

[注一：代码中用上了设置字体对齐方式，在和之间用

来定义左对齐，这种方式的定义无需终止标识符，而定义字体的那句则需要在结束字体定义处有终止标识符号。]

[注二：细心的朋友可能已经发现，表格代码里多了一组……，这是怎么回事呢？又是什么意思呢？在纯粹的HTML表格里本来可以不要这个的，但论坛有论坛的语法规范，它用来定义表格体，如果没有，系统也会自动在

和之间加上，且它要把……包含在里面。今后在论坛里制作表格应该养成加和的习惯。]

除了使用背景色，我们还可以使用图片来修饰表格背景，应该说，用图片来修饰表格的外观会更漂亮得多。不过应该注意，用来作表格背景图的文件不要太大，太大了打开网页速度较慢，图片的尺寸方面，要么是有规则图案的小图片，要么就是和表格大小相一致的，否则做出的表格也不会有理想的外观效果。下面我们在上面表格的基础上，用这幅图来作表格的背景图片：

-500)=-500;" border=0>

代码及效果如下：

代码(红色那句就是加背景图的语法，放在当中合适的位置即可)：

bgcolor=#CCCC00

background=/DownloadImg/2010/10/1114/5899762_>

背景色：bgcolor=#CCCC00 暗边框颜色：#008000 亮边框颜色：#008060

效果：

表格内容的编辑

由于本讲涉及到一些编辑排版、字体修饰等语法，黑马先来简单介绍一下这些常用到的语法格式。

：强制换行，效果等价于在Design模式下的组合键 Shift+Enter。

：段落标志。等价于敲一次回车键。

…：字体加粗，与…效果一致。

…：下划线。

…：斜体字。

：对齐方式，值取left，right，center。

下面黑马以一个实例代码和效果来演示如何在表格中编排内容。先来看看效果：

快乐的奔儿照片之一

-500)=-500;">

作于二○○六年二月五日

代码清单：

快乐的奔儿照片之一 src="/admin/../../admin/uploadpic/"> 快乐的奔儿照片之二 黑马制作于二○○四年四月二十八日

表格的嵌套一方面是为使页面（贴子）的外观更为漂亮，利用表格嵌套来编辑出复杂而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格来做精确的编排，或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的，只要你思路清晰，对表格的整体嵌套构架做到心中有数，在实际编辑时就不会出乱，发布出来的作品也就不会只是一堆代码。

现从最简单的表格嵌套开始演示和讲解，不会太难的。

两张表格的嵌套：

代码如下（红色的为第二张表格的代码）：

Table No.1(Father Table) Table No.2(Son Table) Table No.1(Father Table)

从上面的代码中，我们看得出来，第二张表格代码包含在第一张表格代码中的和里面，这一点一定要弄清楚。不然，终止符不正确或缺少时，由于系统的容错性不好、自动修正功能不够智能化等问题，效果将会很糟糕，错误太严重的话还会使浏览器在运算的时候进入死循环而造成机器当机。

下面是三个表格的嵌套代码及效果，由于表格里没有内容，所以，黑马指定了三级表格的高度。代码中，每一个表格的代码用一种颜色来区分。

代码：

一般来说，只要结构清晰，再多的表格嵌套也是一样操作的。再次提示：不管是多少张表格嵌套，一定要注意起始标识符的正确性，稍有点错误，系统会自动帮你更正，但更正的效果或许不是你所需的，而且，一旦错误太多，系统的自动更正也无能为力。

先来看看以下表格：

你应该可以看得出来，上表中有一个一级表格（父表格），里面有两个二级表格（子表格），二级表格一上一下，位置十分清楚。如果你愿意，你还可以在二级表格里再嵌套次级别的表格。

现在我们来看代码，每一种颜色的文字代码一个表格的完整代码，注意观察起始标识符号的前后关系。

这种方式的嵌套可以让你有更多的创意，比如，上面的二级表格里放置一个背景图并用透明Flash动画来修饰它，下面一个表格里放置滚动图文，总之，发挥你的想象力，充分利用这种格式制作出令人赞叹的效果来！

与上一讲的嵌套效果相比，我们可以明显地看到：上面表格中的两个二级表格是并列放在父表里的。如何做到这个效果呢？

首先，在父表格里，我们用两次“……”将父表分隔成左右各一半，即父表是一个有一行两列的表格。其次，我们在父表的左、右单元格里分别放置一个表格，就形成了以上效果。请研究以下代码清单，为了区分层次，把每一个表格的代码用一种颜色表示，请特别注意父表的代码：

上述代码里，定义了二级表格的高度，在实际使用中，你可以根据情况定义或不定义，但要注意两个子表格的高度要一致，否则就很难看。此外，表格的border值要不要应该根据实际需要而定，之所以定义为4，是为了使效果更加明显。

表格是HTML文档里的元素之一，它还可以是容器，因此，表格里甚至是表格的单元格里又有表格是正常的，我们就是充分利用这一特点来装饰我们的文档（或贴子）。

第五讲的三个讲义专门研究了表格嵌套，嵌套原理到嵌套格式及嵌套方法我们都应该学会了。讲义里的例子是简单的，但它们已经将表格的嵌套结构展示完毕，在这个基础上，我们可以制作出复杂而美观的贴子来。所有多层次嵌套及嵌套中的嵌套都是通过一个又一个简单的嵌套来实现的，这就看你的了。

表格应用

在这里向大家演示《蛋壳艺术》的制作过程。《蛋壳艺术》曾在贴图天下发布，这里，为了便于讲解，帖子代码与原来的帖子有所区别。

以下代码得出帖子的总体框架。思路是，先制作一张父表，这张父表头尾部分有帖子标题及签名，标题的下方和签名的上方各加一条分隔线(语法：

---

)。

蛋壳艺术 黑马制作

蛋壳艺术

灵子制作

以上第一步得出的效果已经差不多了，接下来要做的是在两个分隔符的中间加上核心内容。我曾想用的方式把蛋壳图片一一放上去，考虑到这样做会使帖子很长，就想到用marquee语句令图片自下而上滚动；又考虑到img语句得出的图片观赏者可以用鼠标滚轮控制图片大小——这样对帖子的整体效果是有一定的影响的——，因此，想把图片一张一张地以表格的背景图的形式体现出来。

下面是核心部分的代码，放置在上面代码的两个

---

之间：

wnloadImg/2010/10/1114/5899762_ border=1>

整体效果如下：

接着放置背景音乐，帖子的制作就算完成了。

type=audio/mpeg loop="-1">

《蛋壳艺术》是一个很简单的帖子。请记住：复杂是简单的组合。只要你会很多简单的东西，你就可以做出复杂的效果。

表格应用篇(二)

本讲要点：

一、给表格添加背景图片；

二、给表格添加背景特效。

细心的朋友一打开本节讲义应该立刻发现：本讲有大小不同但分布均匀的花朵，这是怎么回事呢？原来，这是用了一个宽度为100%的表格，边框、边距、单元格间距都设置为0，所以大家在这里看不到表框。其语法如下：

background=/valentine/images/ border=0>

仔细看一下上面的代码，大家不难发现，给表格插入背景图片的语句是放在

之内的，语法为：

background=图片地址

此句放在

里面的什么地方事实上不重要（虽然系统对其位置是有要求的），系统会自动调整，只要放在里面就行。在表格里放置背景图片就这么简单，相信你已经学会了。当然，你应该根据需要选择好图片，一般来说，背景图片的宽度与高度要么在500以内，要么就很小很小，且注意设置表格的宽度。这里黑马想提示大家的是，当你选择的背景图片宽度接近500时，表格的宽度则应该设置为图片的宽度；如果背景图片很小很小，则根据你的需要设置表格的宽度为500以内。另外，当表格的边框、单元格的间距和边距都设有实值时，它们的值也要考虑好，因为，800×600的显示分辨率下，论坛的帖子可视部分的宽度最多500个象素，宽度表格的宽度加上各种元素的宽度加起来不应该超过500。

单击以下这幅图，IE会开启另一个页面打开它，请右击图片→选属性，查看一下图片的宽度和高度，确定退出。

/uploadFile/2004/06/12/

是的，这张图片的尺寸为450×338，那么，我们的表格也应该是这个尺寸，即宽为450，高为338，请看下面代码：

background=/uploadFile/2004/06/12/ border=0>

上面的代码效果如下：

可能有的朋友会说，这与用发图没区别呀！呵呵，有的，你试试看能不能用鼠标滚轮调整图片的大小。不行吧？注意：这张图是以背景图片的形式显示出来的，而不是以img形式发布的。由于表格的border及单元格边距和间距设置为0，所以看不到表格的边框和其他表格特征，但它确实是一张包含背景图片的表格！

同时也请朋友们注意

内的align=center一句，它的作用是使表格居中，这是令表格居中的最简单的方法。

为什么给表格加个背景图而不是直接用IMG发图呢？原因很简单：我们要给这张图片加一个特效。这个特效不能加在用IMG方式所发的图片之上，因为用IMG方式发的图片是作为一个占用空间的元素出现的，而表格的背景图则不同，它“寄生”于表格，相当于表格的底色，我们可以在这个底色之上放其他的东西，比如文字、Flash影片等等。

我们这里所说的特效指的是在一个有背景图片的表格上以透明方式套用Flash影片。所用的Flash影片其底色是纯色的，通过透明处理，影片只显示动画部分，底色则屏蔽掉。语法不算太复杂，格式如下（红色部分为用户填写的内容）：

wmode="transparent" quality="high">

这个语句放在

之间。比如，我们在上面的表格代码里插入一段套用Flash影片的代码，将使得效果与上表有明显的区别。代码和效果如下：

和

background=/uploadFile/2004/06/12/ border=0>

type=application/octet-stream wmode="transparent" quality="high">

小结：通过本节的学习，我们掌握了如何给表格加背景图并给表格加个透明的Flash动画效果。在此基础上，通过表格的里外嵌套和多个Flash透明效果，必要时再加上修饰合理的优美的文字，你的贴子就非常精彩了。

HTML之表格应用篇(三)

充分利用表格的单元格能够做出一些意想不到的效果。事实上，表格的组成元素中，可视部分的核心元素就是单元格，它由表线规范起来，成为一个个可装载各种内容的容器。在一个表格里，作为容器的单元格可以是多个的，也可以只是一个。此前我们所讲的表格嵌套，基本上是由一个父表格加上若干个并列关系或从属关系的子表格组合而成，而这次，我们将讨论一个含有多个单元格的表格的实现方法以及单元格里与其他表格的嵌套问题。

在HTML语法中，单元格由是这样实现的：

要加载的内容

以上语法不能独立使用，它们必须放在

和之间。和之间可以有多个即多个单元格，和之间又可以有多个...构成一行中的单元格。单元格里又可以加载各种合法的内容。比如，我们可以在上面的“要加载的内容”里加上另外的表格(子表格)，就形成了表格的高级嵌套，组合出相对复杂的效果。

我们先来看看一个简单的多单元格的表格实例：

这个是3×3的表格，即，有9个单元格的表格。完整代码如下：

1	2	3
4	5	6
7	8	9

你会说：这有什么？这只不过是一个普普通通的表格。呵呵，是的，它是一个普通的表格，而且很简单。但还是请你看看下面表格的效果，它只是在上面表格的

基础上做了些更改：

你可能又会说：这也没什么呀！不过是把border等值设置为0，把单元格的高度和单元格的颜色改变了而已。

是的。但是，如果我把第五个单元格里的bgcolor=……改为background=……，再加载相应内容，它的外观就大为不同了——

从上面表格中应该可以看出：我们是在第5个单元格里再嵌套一个带有背景图的表格，这才是本节的核心内容。全部代码如下：

	background=/UploadFile/2004-6/ border=0 cellpadding=0 cellspacing=0 width=395 height=225>

小结：

一、本讲介绍用HTML制作多单元格的表格，表格中的每一行由...组成，...里用...构成单元格，有多少个...，一行里就有多少列，有多少个...，表格就有多少行。

二、在...的省略号部分，我们可以加载所需内容，当我们加载一个完整的

...语法时，我们实际上是在一个单元格里嵌套了一张表格。

表格的并列组合

这一讲我们来讨论表格的并列组合。所谓并列组合，就是表与表之间的关系不是从属关系，亦即，它们不是嵌套在一起的，而是以并排或上下的形式组合在一起。为了容易规范以并列关系组合起来的表格整体，我们把这些组合起来的表格放在一个表格里面，因此，本讲依然与表格的嵌套有关，只是，表格的嵌套不再是本讲的主要内容。

三个并排起来的表格并不难以实现。以下的三个表格实例是紧密并排在一块的，它们都是子表格，换句话说，它们是放在一张父表里。请研究一下表格效果与代码：

表 一 表二(单元格1) 表二(单元格2) 表 三

上面的表格实例应该说是一目了然的。表一和表三分别位于左边和右边，它们只是一个非常简单的表格；表二有两个高度不一致的单元格，位于表一和表三之间。这三个表格以典型的并排关系组合在一起，它们作为套在一个父表里的子表格，其相互间的关系是并列的而不是从属的(不过它们一起从属于其所在的父表格)。表格代码的易读性也很理想，只有两个地方需要说明：一是，表二第二个单元格的高度设置为118，这是因为，表二的边框我们设置为1，既然表里有两个单元格，单元格的边框占用两个单位(即2)，那么，从整齐角度出发，这个单元格的高度需要减去2。事实上，宽度也应该这么计算的，虽然代码中并未做相应处理；二是，三个表格我们都用了align=left来规定位置，而不是我们想当然的一个用left，一个用center，另一个用right。原因很简单：让它们紧密靠在一起。

以上讲的是让几个表格并排在一起的组合方法。下面讲一讲上下排列的组合方法。

我们以上面的表格实例当作一个表格单位(事实上它们是套在一张表格里面的，我们这样看待它是未尝不可的)，在它的下面再放置一张宽度和它一致的表格，从而组合成一个相对复杂的实例。为了便于观察，我们先来看看即将使用的表格式样：

这不是一个复杂的表格，我们在上一讲已经熟悉它了。现在我们要做的是把这张表格与上面的组合表格整合起来。整合操作也不复杂，需要注意的是，我们需要有整体概念，随时随地地把任意一个组合体看成一个整体，而一个整体在某时它又只是一个组合体的成员。——呵呵，抽象吧？不要紧，关键是操作。

先看代码：

表 一 表二(单元格1) 表二(单元格2) 表 三 表 四 单 1 表四(单元格2) 表 四 单 3 表 四 单 4 表四(单元格5) 表 四 单 6

代码总是枯燥的，读着读着我们会头晕。但是，要想深入研究，我们不得不读代码。代码与实效结合起来，阅读起来会容易一些：

我们已经知道，表格可以有背景图，表格的单元格也可以有背景图，那么，如果我们制作或找到合适的图片，分别用作表一、表二单元格1、表三、表四单元格1表四单元格3、表四单元格4、表四单元格5和表四单元格6的背景，再将所有表格的border等值取值为0，然后在表二单元格2和表四单元格2放置其他内容，得出的组合效果就相当完美，你甚至不能看出它是一个表格组合。看看——

本讲主要讲述表格的并列组合。在网页制作中，表格经常用于整体布局之用，它们就是以并列+嵌套的方式组合起来的，制作帖子也大量使用表格的并列+嵌套

形式的组合。通过观察表格组合的实例和分析代码，相信大家会慢慢熟悉和掌握表格的组合与嵌套的高级应用。

特效代码——

width=453> background=/UploadFile/2004-6/> background=/UploadFile/2004-6/> background=/109348/../../admin/uploadpic/ width=94 height=112> background=/UploadFile/2004-6/ cellspacing=0 cellpadding=0> background=/UploadFile/2004-6/> height=263 background=/UploadFile/2004-6/> background=/UploadFile/2004-6/> background=/UploadFile/2004-6/> background=/UploadFile/2004-6/> background=/UploadFile/2004-6/>