- 豆豆staR
-
好处太多了,只要你想设计出像样的网页,就需要有表格。
她起到布局以及固定网页元素的作用。
表格是在网页设计中用的最多的元素,大多数的网页都是使用表格来组织的。利用表格来组织网页内容,可以设计出布局合理、结构协调、美观匀称的网页。我们今天要讲的不是表格在控制页面元素的应用,而是表格边框的一些技法。合理的设置表格边框,有时可以得到你意想不到的效果!本文讲述的内容是细线边框表格的制作,涉及的知识比较基础,仅供新手参考。
一.表格基础:
<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”),而设置单元格的背景色时却不包含这个距离间的空白,这样以来,你在浏览器中看到的表格边框线其实就是单元格与单元格的距离所显示的。