本文目录一览：

在网页设计中,表格有什么重要作用

1．当需要提交所有数据时，可以提交整个100个表，如果不使用表，可以逐个提交。

2．表格设计简洁美观，方形，与网页的设计非常一致。

3．网站其实是一个大版本的表格，数据和权重之间的数据库也与表格有联系，所以密不可分。

制作方法如下：

1．打开WPS表单并创建一个新的工作簿；

2．然后从多个表中选择要创建的表的行数和复制列数；

3．然后在工具栏顶部的insert函数下，查找表；

4．双击表格后会弹出一个对话框，然后选择确定；

5．最后，表格将在您选择的区域自动生成，一个简单的表格已经准备好了。

如何用Dreamweaver制作网页表格

1、在插入栏中选择

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

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

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

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

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

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

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

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

合并结果如下图。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我们对于表格的使用就讲到这里，表格是网页制作的基本技术，只有通过不断实践才能充分掌握。

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

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

方法一:作一个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"

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

网页设计中如何设置表格各项属性

HTML网站表格的属性设置可以分为以下几条属性：

从很大程度上来说，HTML/XHTML浏览器都使用同样的属性来显示表格内容，这些属性控制着常规内容的显示。但是，在表格中会有一些特殊情况。要使作者得以更好地控制这些项，CSS添加了几个特定于表格的属性。但是现在流行的浏览器都还不支持这些属性。下面开始介绍：

在表格内的单元格边方面，有两种有分歧的意见。第一种观点认为每个单元格都是具有惟一边框的独立实体。另一种观点则认为相邻的单元格共享边框的边，改变一个单元格中的边框会影响其相邻的单元格。

为了使建设网站人员可以得到最大的控制权，CSS提供了border-collapse属笥，它允许我们选择适合自己样式的模型。默认情况下，这个属性的值为collapse，其含义是相邻单元格共享他们的边框样式。换句话说，可以将border-collapse属性设置为separate，这样就扩大了表格，因此边框可以被单独显示，并清楚的围绕在每个单元格周围。

如果选择的是separate样式，还可以使用border-spacing属性来设置相邻边框之间的间距。默认边框间距为0，这意味着相邻的单元格边框彼此相接，但是有些浏览器还是可能使用不同的默认值，增加该值后，可以使浏览器在边框之间插入额外的空间，这就允许表格的背景颜色或图像可以显示出来。如果只提供了两个值，第一值设置水平间距，第二个值确定垂直间距。

在separate样式中，还可以控制边框围绕着单元格绘制的方式。默认情况下，边框会围绕着一个表格内的所有单元格进行绘制，即使其中并没有内容。将empty-cells属性从其默认值show切换为hide,便可以改变这种状况。在设置属性时，空的单元格仅仅会显示表格背景。如果整行单元格都是空的，浏览器会从表格实体中去除行。

表格caption-side属性：

仅在caption元素中使用caption-side属性。它接受top、bottom、left或right值，并告诉浏览器在何处放置与其相关联表格相邻的标题。与caption标签依赖于浏览器的align属性相比，caption-side属性在放置标题方面提供了更为一致方法。流行浏览器还都不支持caption-side，但是不管怎么样，还是应该在将来的版本中包括这个属性。

表格speak-header属性：

能够播放音频的浏览器可以通过检索目录为用户提供很浏览方式。一种非常简单的途径就是让浏览器会根据它们各自的标题将目录组织起来，并以更易理解的方式读取的是哪个单元格。

speak-header属性为浏览器标识表格中的单元格（集合）提供了两种方式。如果指定了once(默认值)，浏览器在读取每个单元格相关联的数据单元格之前，只读取一次标题单元格的内容。通过这种方式，用户在移过一行单元格时，就会听到该行中第一个单元格的行标题和列标题，但是只有须移到该行中随后的单元格中时，才会听到变化的列标题。

如果将speak-header属性设置为always，浏览器会以读取单元格相关联的标题为+开始，来读取每个单元格的内容。已经证明，这点对于复杂表格来说，或者是在标题值

使得理解表格内容更为容易一些的地方（尤其是表格仅包含数字的情况下）都很有用处。

请注意，仅在知道哪个标题单元格与数据单元格相关联的时候，浏览器才会把标题念出来，这时候认真的程序猿们会在他们的表格单元格中使用header属性，以此指定与表格中的每个数据单元格相关的标题单元格。

表格table-layout属性：

表格布局对于任何浏览器来说都是一项艰巨的任务。为了创建具有吸引力的表格，浏览器必须找出每一列中最宽的单元格，将该列调整为适应那个宽度，然后将整个表格调整为适应所有的列。对于大型表格来说，当浏览器在处理多个表格时，文档显示可能会显著地慢下来，以便正确显示表格。

使用table-layout属性对这个过程会有所帮助。如果将属性设置为fixed，浏览器会根据表格中第一行的宽度确定列宽。如果显示方式设置了列宽，将表格的table-layout属性设置为fixed，表格的显示过程会明显加快，从而使用户在查看这些文档时增强自己的体验。

默认情况下，table-layout属性设置为auto，这就迫使浏览器使用更为耗费时间的多程算法，即使指定了表格中的列宽也无济于事。如果表格内容有变，而且你无法设置列宽，便可以将table-layout属性设置为auto。如果可以固定列宽，而且表格内容不变，可以将table-layout属性设置为fixed。

网页设计中表格问题

现在表格制作网页属于网页制作初期的,顶峰互联的回答非常正确,你要是想要他们分开,设置间距就可以了,点表格然后点属性即可.

但是你这个表格有个大问题啊,首先别把整个网站用表格固定死了,我保证当你插入图片插入其他东西后你会疯掉,因为版面会被你自己拉伸掉,比如文字突然多了,或者图片突然大了,你那表格就会不伦不类的,如果你是初学者,建议你用表格内套表格的方法,把整天变成局部来弄,不怕套的多,有时你表格里套表格套10几层都纯属正常现象.总之别用边框把页面固定死了.

如何用网页制作出好看的表格

CSS制作好看的网页表格

如果数据表格对于视力没有问题用户都难以阅读的话，那么想像一个那些用辅助技术(掌上设备)的人来说，它们是多么复杂和混乱.幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性.

1.summary 和 caption

第一元素是表格的caption，它基本上用做表格的标题.尽管这不是必须有的元素，但是尽可以使用caption总是好的.另一个元素是summary.summary属性可以应用于表格标签，用来描述表格的内容.与image的alt文本属性相似.

2.thead, tbody, tfoot

thead, tbody, tfoot使网页设计人员能够将表格划分为罗辑部分.例如，可以将所有列标题放在thead元素中，这样就能够对这个特殊区域单独应用样式.如果选择使用thead或tfoot元素，那么必须至少使用一个tbody元素.在一个表格中只能使用一个thead和tfoot元素，但是可以使用多个tbody元素将复杂的表格划分为更容易管理的部分.

3.col 和 colgroup

行与列标题应该使用th标记而不是td，但是如果某些内容既是标题又是数据，那么它仍然使用td.表格标题可以设置为row或col的scope属性，定义它们是行标题还是列标题.

虽然tr元素使开发人员能够整行应用样式，但是很难整列应用样式.为了解决这个问题。