如何在网页制作中用好表格

对许多不熟悉HTML的朋友来说，还以为是使用了CSS、JavaScript等技术，其实不然。看完下面的内容你就会明白了。控制表格边框的显示对使用Dreamweaver、FrontPage等所见即所得的网页编辑软件的朋友来说，很难控制表格的上下左右的边框显示与隐藏，其实你只要在HTML中的〈table〉〈/table〉标签页中添加一项“frame” 属性即可。 不显示表格边框(frame=void) 只显示表格的上边框(frame=above ) 只显示表格的下边框(frame=below ) 只显示表格的上下边框(frame=hsides) 只显示表格的左右边框(frame=vsides) 只显示表格的左边框(frame=lhs) 只显示表格的右边框(frame=rhs) 例如，〈table width="75%" border="1" frame=void/above/below/hsides/vsides/lhs/rhscellpadding="0" cellspacing="0"〉 〈/table〉 控制表格行与列的分割线在网页设计中，如果版面没设计好，那么这个网页可以说是失败的。利用表格进行分栏，可以达到整齐排版的目的，美化你的网页外观。所谓分栏，就是让你的网页变成一个大表格，然后根据你的版面设计和内容安排，将这个表格分成不同的行和列，调整各个行和列的宽度和高度，以达到你排版的要求。当然了，你还可以在表格之中再嵌套表格，以达到更加复杂的排版需要。在设计过程中你可以灵活设置单元格边距和单元格间距的数值。在HTML语言中表格的分割线是由“rules”属性来决定的。所以我们可以通过手工修改源代码的方法来控制分割线的显示与隐藏。 1、显示所有分割线(rules=all) 如〈table width="75%" border="1" rules=all cellpadding="0" cellspacing="0"〉 2、不显示任何分割线(rules=none) 3、只显示行与行之间的分割线(rules=rows) 4、只显示列与列之间分割线(rules=cols) 用表格边框实现单线显示用线条来美化网页是网页设计者经常使用的手法之一。在网页中除了用〈hr〉标记来实现插入水平线外，我们还可以用表格来实现。FrontPage2000默认的表格线比较粗，但只要稍加处理，就可以制作出一个细线表格，细线表格非常娟秀小巧，很有个性。它的具体 *** 作方法是：在表格属性中将边框粗细设为“1”，将单元格边距和单元格间距设置为“0”，同时将亮边框设置成与表格背景相同的颜色，暗边框设成你想要的任一颜色即可，怎么样，细线表格出现了吧。

表格做网页是为了方便排版和定位，其实就是整页是一个表格，只不过表格的表框宽度为0，所以表格框架为不可见的，然后在相应的单元格填充或者文章标题，因为表格的单元格有百分比这样的属性，这样在网页放大放小的时候不至于导致网页内元素的混乱。至于具体怎么做，其实就是插入一个表格，按照你自己的要求合并好单元格，然后填好需要的内容，再将表格的框架宽度设为0就可以了

　　通常有以下几种方法：

1、CSS法

可以在<table>标签中设置margin属性，即：style="margin:5px

0

5px

0;"（顺序：上、右、下左，亦可简写为style="margin:

5px

0;"），这段CSS的作用是在当前表格外部的上下各留出5px的空白。

2、空对象法

（1）空行。还可以在表格后敲回车换行，产生<p></p>标签，或者按Shift+回车软换行，产生<br>标签，都可产生一个空行。

（2）空表格。插入一个1行1列的表格，设置单元格的宽度、高度，在单元格中不输入内容。当单元格高度小于12px时，一定要将空格符

删掉，否则达不到设定高度，这一点非常重要。即：

<table

width="100%"

border="0"

cellspacing="0"

cellpadding="0">

<tr>

<td

height="5"></td>

</tr>

</table>

（3）空DIV。类似于空表格，插入一个DIV，设置其宽度、高度，超出隐藏即可。

<div

style="width:100px;height:5px;overflow:hidden;clear:both;"

3、透明法

可以在PS中新建一个5x5px的画布，背景设为透明，保存为透明GIF，然后在需要留间距的表格后面插入这个透明，将其宽度、高度可以任意调整，直到满意为直。

<img

src="nullgif">

以下是一个css+DIV的圆角矩形制作的方法。

http://wwww3org/TR/xHTML1/DTD/xHTML1-transitionaldtd">

http://wwww3org/1999/xHTML">

div+CSS圆角矩形

#nifty{

margin:

0

10%;

background-color:

#00FF00;

}

divrtop

{display:block;background:

#FFF}

divrtop

div

{

display:block;

height:

1px;

overflow:

hidden;

background-color:#00FFFF;

}

divr1{margin:

0

5px;}

divr2{margin:

0

3px;}

divr3{margin:

0

2px;}

divrtop

divr4{margin:

0

1px;height:

2px}

这是您要放的内容！

这应该根据你的背景大小以及你的网页宽度有关 如果尺寸和网页宽度一致那么平铺就好了，background-repeat 属性定义的平铺模式。从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。