网页设计制作表格的步骤_如何在网页制作中用好表格

1、Web制作网页制作 html 表格

个人建议：浏览器F12查找，一般程序员宁可重写，也不愿查找错误

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

对许多不熟悉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”，同时将亮边框设置成与表格背景相同的颜色，暗边框设成你想要的任一颜色即可，怎么样，细线表格出现了吧。

3、如何在网页中制作表格框架

table{
border:1px solid #000;/*黑色1像素粗边框*/
}
td{
border:none;/*这个是单元格，不给他要边框*/
}
以上是全局的，用了以后所有的表格都是这个样式。
如果你要给特定的表格加入这个样式：
1 给那个表格加上class='classname' （classname是你自己起的样式名）
2 然后在CSS里加上
.classname{
border:1px solid #000;/*黑色1像素粗边框*/
}
.classname td{
border:none;/*这个是单元格，不给他要边框*/
}

只有内边框没有外边框的话，我就只会用赖皮的方法：给table外面套一个overflow:hidden的div，宽度和高度比table小2px，给table加上margin-left:-1px;margin-right:-1px;这样把他的表格边框遮住。。

4、求以下网页设计表格html代码

代码（大小有需要可以调）：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>练习使用HTML</title>
    </head>

    <body>
        <center>
            <table border="1px" cellpadding="0px" cellspacing="0px">
                <tr>
                    <td colspan="4" height="60px"></td>
                </tr>
                <tr>
                    <td width="200px" height="60px"></td>
                    <td width="200px" height="60px"></td>
                    <td width="200px" height="60px"></td>
                    <td width="200px" height="60px"></td>
                </tr>
                <tr>
                    <td colspan="4" height="60px"></td>
                </tr>
                <tr>
                    <td colspan="4" height="60px"></td>
                </tr>
                <tr>
                    <td colspan="4" height="60px"></td>
                </tr>
                <tr>
                    <td colspan="4" height="60px"></td>
                </tr>
            </table>
        </center>
    </body>

</html>

运行效果：

5、网页设计中有些表格怎么制作啊？？？

这是选项卡效果，需要用javascript实现。

给你一个参考实例：http://www.blueidea.com/tech/web/2008/5460.asp

6、怎样制作简单的静态的网页设计

你好。首先下载Dreamweaver.exe并打开，选择你使用的编辑语言，本案例用html
打开页面后，选着设计窗口，如图所示。设计窗口可以快速布局网页，不需要自己编辑代码。

打开你要设计的网页的设计图，本经验是百度经验首页为例，首先我们制作顶上的搜索条，点击插入—表格（如图所示）。打开表格属性编辑表格属性。插入1行和5列，表格宽度为1130,（即为网页的宽度），边距，间距分别为0，此表格只是为了定位，因此不设边框。

设置好表格后，可在表格里面插入你的内容，首先我们插入logo,点击插入—图像—选择你要插入的图片。点确定即可完成logo插入。表格的小大高度都可根据设计图需要调整，鼠标移到表格边框虚线即可拖拉调整高度或宽度。如图所示

接下来我们来做搜索框，点击插入—表单—插入文本域—确定。插入文本框后可点击文本框调整文本框的属性。根据设计图，文本框上班还要添加内容，因此，可选择单元格右击选择表格—拆分单元格，此处是需要添加一行的内容，因此拆分为两行，如图所示。

用同样的办法拆分上面的行，因为要添加10个选择项，因此拆分为10列（右击选中的行—拆分单元格—10列—确定）。拆分好后在小格里面添加文字内容即可。表格大小可根据步骤四调整。

接下来我们做搜索按钮，同样根据设计图要把表格拆分为两行。点击插入插入按钮的图片。

接下来给按钮添加链接，本次经验分享的是静态网页，因此在此先跟大家分享怎么直接添加按钮链接。同样是点击插入—添加超级链接,填写你事先做好的页面链接，或者其他网站链接。

剩下的内容都可根据方法步奏逐渐添加，调节细节即可完成你想要设计的网页。如图所示是上面步奏所做的静态页面，把所有做好的网页用超级链接链接起来即可做成一个简单的网站

另外我们还可以采用front page。也可以很容易的实现。
望采纳。

7、网页制作的表格怎么做

<table width="312" height="124" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000"> <tr> <td colspan="3"><div align="center">这是一个表格示例</div></td> </tr> <tr> <td><div align="center">姓名</div></td> <td><div align="center">姓别</div></td> <td><div align="center">年龄</div></td> </tr> <tr> <td><div align="center">张三</div></td> <td><div align="center">男</div></td> <td><div align="center">22</div></td> </tr> </table>

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

对许多不熟悉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”，同时将亮边框设置成与表格背景相同的颜色，暗边框设成你想要的任一颜色即可，怎么样，细线表格出现了吧。

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

在制作网页的时候，常常要遇到制作虚线表格的问题，下面的文章就能解决这个问题。
方法一:作一个1x2的图。
半黑半白，再利用表格作成线。这种方法虽然麻烦，但在任何浏览器中均可浏览，兼容性最好。
方法二:在css里面设定。
如果你用dreamweaver话，只要在css面板里new一个style，选择“redefine
html
tag”，再在下拉菜单里先“table”，在弹出的面板里，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"
颜色是十六位代码，你可以自己设。

10、如何用Dreamweaver制作网页表格

　1、在插入栏中选择

按钮或“插入”菜单>选“表格”。系统弹出表格对话框如下图。这些参数我们都已经认识了。行：2。列：2。其余的参数都保留其默认值。。

Dreamweaver网页制作教程：表格设计

2、在编辑视图界面中生成了一个表格。表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。当光标移到点上就可以分别调整表格的高和宽。移到表格的边框线上也可以调整。（如下图）

Dreamweaver网页制作教程：表格设计

3、在表格的第一格按住左键不放，向下拖拽选中二格单元格。（如下图）

Dreamweaver网页制作教程：表格设计

然后在展开的属性面板中选择合并单元格按钮（如下图红框所示）。将表格的单元格合并。如果要分割单元格，则可以用合并单元格按钮右边的按钮。

Dreamweaver网页制作教程：表格设计

合并结果如下图。

Dreamweaver网页制作教程：表格设计

4、用鼠标拖拽表格的边框调整到适当的大小。

5、单击左边的单元格，然后输入“摄影作品赏析”文字，并调整大小，因是竖排应每个字回车一次。如果需要调整格子的大小。只需要鼠标的光标移动到边框上拖拽即可。

6、在右边上下单元格内分别插入图片和文本。页面的基本样子有了。

Dreamweaver网页制作教程：表格设计

7、光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中将“边框”值设置适合的值，如果为0，边框在编辑状态，为虚线显示，浏览时就看不见了。

一个符合要求的页面在表格的帮助下做好了。

通过上面的操作我们对于表格有了一个初步的认识。还要提示一点，对整幅表格操作和对一个单元格操作的时候，相应的属性面板是不同的。

表格颜色设置，选择整幅表格后，利用属性面板的颜色选择器设置背景色。单元格也可单独设置。鼠标在需要设置的单元格点一下，其余操作同上。

下面我们就来看看这些属性面板的区别。

表格的属性面板，要出现这个面板必须先选中整幅表格，方法上面已经提到过了。您可以在众多选项中填入需要的参数。如下图：

Dreamweaver网页制作教程：表格设计

选中了单元格之后属性面板就发生如下变化了。选择行或者列都属于选中单元格。如下图：

Dreamweaver网页制作教程：表格设计

对表格操作的几种常用方式：

合并：将选中的连续单元格合并成为一个单元格。

分割：将一个单元格分割成若干单元格。

水平对齐方式：分为（左）（中）（右）三种。

垂直对齐方式：分为（顶）（居中）（居底）（基线对齐）

表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键。在右键菜单中选择表格选项>>选择“插入行或列”。系统会弹出对话框如下。

Dreamweaver网页制作教程：表格设计

在对话框里填入数据即可。最后要说的是选中表格中的各种元素的方法：

选中一行，把光标移到该行的最左边单元格的左面，光标会变成箭头状。单击就可以选中一行。

选中一列，把光标移到该列的最上边单元格的上面，光标会变成箭头状，然后单击可以选中一列。

选中整张表格，把光标移到表格的左上角或右边框或下边框线上。单击即可选中整幅表格。选中的表格会在周围出现一个黑框表示整张表格选中了。请看如下示意：

选中单元格。单元格可以同时选中多个。选择连续的单元格，光标先选中的一个单元格，按shift键不放，选取最后一个单元格。选不连续的单元格。按住Ctrl键，点取所需要的单元格即可。

导航:首页 > 万维百科 > 网页设计制作表格的步骤

网页设计制作表格的步骤

与网页设计制作表格的步骤相关的知识