网页表格制作转

最新推荐文章于 2023-07-11 12:40:37 发布

原创最新推荐文章于 2023-07-11 12:40:37 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#border #浏览器 #table

本文介绍如何利用HTML表格属性cellspacing和cellpadding制作不同类型的细线表格，包括跨幅细线、细线边框表格和隔距表格。

　表格是在网页设计中用的最多的元素，大多数的网页都是使用表格来组织的。利用表格来组织网页内容，可以设计出布局合理、结构协调、美观匀称的网页。我们今天要讲的不是表格在控制页面元素的应用，而是表格边框的一些技法。合理的设置表格边框，有时可以得到你意想不到的效果！本文讲述的内容是细线边框表格的制作，涉及的知识比较基础，仅供新手参考。

　　一．表格基础：

　　<table>：表格的标识符，用来界定表格的范围。<table>标签的属性：

　　border：表格边框宽度所占的像素点数。

　　width和height：指定表格的大小。“width”规定表格的宽度，“height”指定表格的高度。　　align：表格与其相邻文字的位置。参数值为left(居左)、center(居中)、和right(居右)。　　cellspacing：指定表格各单元格之间的空隙。

　　cellpadding：指定单元格内容与单元格边界之间的空白距离的大小。

　　<TR>：行标签。 <TR>标签的属性:

　　align：表示该行中各单元格内容是左对齐(left)、水平居中(center)和右对齐<right>的。

　　valign：表示该行中各单元格内容是紧靠上沿儿(top)、垂直居中(middle)和紧靠下沿儿的(bottom)。　　<TH>和<TD>:都是用来规定单元格内容的，<TH>规定表头元素的内容(表头元素一般位于每列的首行，用来说明该列的具体数据是关于哪个对象的)。<TD>规定该单元格的内容。<TH>和<TD>标签的所有属性及相应的属性功能是完全一样。

　　rowspan：表示该单元格所跨的行数。

　　colspan：表示该单元格所跨的列数。

　　align 、valign：用法同上。指定单元格内容的位置。

　　二．用表格制作跨幅细线：

　　有时候在网页排版时，我们需要一条细线，用图片似乎有点劳师动众了，其实，这个小问题用表格就能搞定。

　　制作过程：

　　1、插入一个一行一列的表格。

　　2、将表格的“cellpadding”“cellspacing”都设置为“0”。

　　3、将单元格的“bgcolor”设置为“#000000”（当然你也可以设置为其他的颜色，主要取决于你需要什么颜色的细线）“height”设置为“1”

。　　4、查看源代码，将<td></td>中的“ ”去掉就ok了。

　　原理：这种细线效果其实就是一个高为“1pix”的表格。

　　三．细线表格

　　我们常常遇到添加表格边框以区别不同的内容的情况，但将表格边框宽度“border”设置为“1”时，边框又显得过于突出，那么，能不能制作细线边框呢？

　　制作原理：

　　1、插入一个一行一列的表格。

　　2、将表格的“border”、“cellpadding”设置为“0”，“cellspacing”设置为“1”。

　　3、将表格的“bgcolor”=“#000000”。

　　4、将单元格的“bgcolor”设置为“#FFFFFF”（当然你也可以设置为其他的颜色，主要取决于你需要什么颜色的边框）。

　　5、预览页面。

　　原理：前面已经讲过属性“cellspacing”表示的是单元格与单元格的距离。我们在设置整个表格的背景色时也包含了这个距离间的空白（我们设置的是“1pix”），而设置单元格的背景色时却不包含这个距离间的空白，这样以来，你在浏览器中看到的表格边框线其实就是单元格与单元格的距离所显示的。　　　　

　　四．隔距表格：

　　这种效果使用了表格的嵌套。也就是在一个一行五列表格的每个单元格里又嵌套了五个单行单列的表格。

　　下面看看他的制作过程:

　　1、插入一个一行五列的表格。

　　2、将表格的属性设置为:width="400" border="0" cellspacing="2" cellpadding="1"。

　　3、将五个单元格的背景色均设置为：bgcolor="#FFFFFF"。

　　4、在每个单元格内再插入一个表格,在属性面板上设置插入的表格的属性：width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"。

　　5、将插入的表格的每个单元格的背景色设置为白色：bgcolor="#FFFFFF"　。

　　6、预览页面

　　原理：前面已经讲过属性“cellpadding”表示的是单元格内内容与单元格边界(四周)的距离。对照上面的原理，其实在浏览器中看到的表格边框线其实就是单元格内的内容（在这里是指内嵌的表格）与单元格的距离所显示的。知道了这一点，也就不难理解在设置内嵌单元格的属性时为什么要使width="100%"、height="100%"。这样做是为了让嵌入的表格在上下左右方向上将被嵌单元格占满，但由于已经设置了被嵌表格的cellpadding="1"，所以嵌入的表格尽管是100%,依然会在4边留下“1pix”的空位,这“1pix”的空位也就是在浏览器中显示的“边框线”！

　　我们也可以通过修改表格的亮暗边框来实现，但由于与网景浏览器（NC）的兼容问题，到了DW4后，此功能被取消。在此处就不在多讲。

　　通过上面的三种细线表格的原理学习，不难发现在这里面占着重要位置的属性就是“cellspacing”和“cellpadding”。希望大家通过动手实践来了解这两种属性的改变会在浏览器中带来什么样的变化