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

对许多不熟悉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/rhs cellpadding="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〉标记来实现插入水平线外，我们还可以用表格来实现。FrontPage 2000默认的表格线比较粗，但只要稍加处理，就可以制作出一个细线表格，细线表格非常娟秀小巧，很有个性。它的具体 *** 作方法是：在表格属性中将边框粗细设为“1”，将单元格边距和单元格间距设置为“0”，同时将亮边框设置成与表格背景相同的颜色，暗边框设成你想要的任一颜色即可，怎么样，细线表格出现了吧。

提供几种代码：（每种代码，保存成html格式。）

第一种（CSS+JS）：

<html>

<head>

<title>Untitled Document</title>

<style>

t1 {background-color:#336699;text-align:center}

t2 {background-color:#ffcc00;text-align:center}

</style>

</head>

<tr><td>aaaaaaaaaaa</td></tr>

<tr><td>bbbbbbbbbbb</td></tr>

<tr><td>aaaaaaaaaaa</td></tr>

<tr><td>bbbbbbbbbbb</td></tr>

<tr><td>aaaaaaaaaaa</td></tr>

<tr><td>bbbbbbbbbbb</td></tr>

<tr><td>aaaaaaaaaaa</td></tr>

<tr><td>bbbbbbbbbbb</td></tr>

<tr><td>aaaaaaaaaaa</td></tr>

<tr><td>bbbbbbbbbbb</td></tr>

<tr><td>aaaaaaaaaaa</td></tr>

<tr><td>bbbbbbbbbbb</td></tr>

</table>

for (i=0;i<table1rowslength;i++) {

(i%2==0)(table1rows(i)className = "t1"):(table1rows(i)className = "t2");

}

</script>

</body>

</html>

第二种（CSS）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 40 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

table{

width:100%;

}

t1{

background:#ff6600;

color:black;

}

t2{

background:#336699;

color:white;

}

</style>

</HEAD>

<BODY>

</TR>

</TR>

</TR>

</TR>

</TR>

</TR>

</TABLE>

</BODY>

</HTML>

第三种（CSS+JS）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Strict//EN" "http://wwww3org/TR/xhtml1/DTD/xhtml1-strictdtd">

<head>

<title>表格隔行换色</title>

<!-- / PR-CSS /

table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}

table td {border:solid #999;border-width:0 1px 1px 0;}

trt1 td {background-color:#fff;}/ 第一行的背景色 /

trt2 td {background-color:#eee;}/ 第二行的背景色 /

trt3 td {background-color:#ccc;}/ 鼠标经过时的背景色 /

-->

</style>

</head>

<body>

</table>

<!--

var Ptr=documentgetElementById("tab")getElementsByTagName("tr");

function $() {

for (i=1;i<Ptrlength+1;i++) {

Ptr[i-1]className = (i%2>0)"t1":"t2";

}

windowonload=$;

for(var i=0;i<Ptrlength;i++) {

Ptr[i]onmouseover=function(){

thistmpClass=thisclassName;

thisclassName = "t3";

};

Ptr[i]onmouseout=function(){

thisclassName=thistmpClass;

};

}

//-->

</script>

</body>

</html>

在制作网页的时候，经常要碰到制作虚线表格的题目，下面的文章就能解决这个题目。

　　方法一:作一个1X2的图。

　　半黑半白，再利用表格作成线。这种方法固然麻烦，但在任何浏览器中均可浏览，兼容性最好。

　　方法二:在CSS里面设定。

　　假如你用DreamWeaver话，只要在CSS面板里new一个style，选择“redefine HTML Tag”，再在下拉菜单里先“table”，在d出的面板里，category里选择border，在border里，将top,left,right,bottom都设成1px，颜色设成你想要的边框的颜色。然后在style下拉框里选择dashed。一切ok。只是所有的表格都会用虚线做边框了。留意，这个效果在浏览器里才能看见。

　　方法三:直接在html里设置(假如你只想让某一个表格边框是虚线的话)。

　　在表格的html里加上这个:

　　style="BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED; BORDER-BOTTOM: #000000 1PX DASHED"

　　颜色是十六位代码，你可以自己设。

你可以把这个几个表格都放在一个表格里，先设置一个三行一列的表格；再把第一行设置成三列；在第一行第一列插入第一个竖表格，第一行第三列插入第二个竖表格，第三行插入一个横表格；设置第二行的高度（即两个竖表格和横表格之间的间隙了）代码如下： <table width="1003" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="250">  <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="middle" height="200">第一个竖表格</td> </tr> </table> </td> <td width="10"></td> <td width="750">  <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="middle" height="200">第二个竖表格</td> </tr> </table> </td> </tr> <tr> <td colspan="3" height="10"></td> </tr> <tr> <td colspan="3">  <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="middle" height="150">第一个横表格</td> </tr> </table> </td></tr> </table>

不用代码，先建一个表格，然后全选整个“表格”，填充背景色，再然后全选里面的“单元格”设为无色，然后在属性面板里设单元格“间隔”为1px，边框设为0px；

现在表格布局已经不在是主流，建议学css布局！

方法/步骤

要想用Dreamweaver来制作网页，首先要安装Dreamweaver网页制作的工具，那是必备的哦，可以去官网里面去下载即可。第一步是打开Dreamweaver工具；

然后在Dreamweaver选项的中，选择新建一个Html文件，这个是制作网页的前提哦；

进入Dreamweaver主界面后，我们可以看到自动生成的标题、头、身体的相关的代码的出现，这个是软件自动生成的，可以直接使用的；

在Dreamweaver代码的主界面中，在代码、拆分、设计这三个选项卡中，选择拆分，因为这样可以更好的看到代码与相关设计的表格的调整的问题；

然后选择插入中的表格的选项，这个是用来选择表格的选项的；

选择表格的选项框出现后，然后根据个人的需要，可以选择表格的行与列，还可以选择相关的标题、摘要，那我们就选择五行五列吧；

当我们点击确定后，就能够看到左边的代码区域，右边的相关表格的区域；

表格制作好后，可以根据个人的需要对表格进行调整大小，我们可以通过鼠标的拖动来调整表格的大小；

我们还可以在代码中调整网页表格的大小，对表格的长与宽进行相关的调整，可以修改长与宽的值的大小；

最后一定要记得保存哦，保存的文件是以html为后缀名的哦；

步骤阅读

文件保存好后，你可以在Dreamweaver页面中按F12来浏览你做好的网页表格，哈哈，很简单吧；

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/12180335.html

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

发表评论

评论列表（0条）