dw如何固定表格.docx

dw如何固定表格.docx

《dw如何固定表格.docx》由会员分享，可在线阅读，更多相关《dw如何固定表格.docx（10页珍藏版）》请在冰点文库上搜索。

dw如何固定表格

竭诚为您提供优质文档/双击可除

dw如何固定表格

　　篇一：

如何用dw创建表格

　　一、创建基本的表格

　　一个表由＜table＞开始，＜/table＞结束，表的内容由＜tr＞,＜th＞和＜td＞定义。

＜tr＞说明表的一个行，表有多少行就有多少个＜tr＞；＜th＞说明表的列数和相应栏目的名称，有多少个栏就有多少个＜th＞；＜td＞则填充由＜tr＞和＜th＞组成的表格。

　　表格重要的基本标记不多，但每个标记都有很多的属性，考虑到一下子把这些属性都列出来，可能让初学者感到无从下手，所以我们还是从表格的外观（即浏览器中显示的表格的样式）来了解最基本的属性。

　　在讲解之前，我们先来看看表格的基本构造。

下图是一个3行3列的表格。

　　这里面有两个概念要弄明白：

表格与单元格。

他们的关系是整体与局部的关系，如同砌墙的砖和砌好的墙一样。

在上面3行3列的表格中一共有9个单元格。

由于我们后面将提到的表格属性和单元格属性有很多是相同的，所以一定要分清楚。

前面已经说过表格的最基本标记为＜table＞、＜tr＞、＜td＞，可以先树立这样一个概念：

描述整个表格的属性标记放在＜table＞里，描述单元格的属性标记放在＜tr＞、＜td＞里。

有这样一个概念后，我们学习起来就可能简单些。

　　1、表格、单元格的大小,表格边框的宽度、颜色,单元格边框的颜色

　　表格以及单元格的大小是用“width=#”和“height=#”属性说明，“width=#”表示宽，“height=#”表示高，，#是以象素或者百分比为单位的数字。

表格边框的宽度是用

　　“border=#”属性说明，，#为宽度值，单位是象素，表格边框的颜色是用“bordercolor="#"属性说明，#是16进制的6位数，格式为rrggbb，分别表示红、绿、兰三色的分量。

或者是16种已定义好的颜色名称，参见文本颜色，单元格边框的颜色属性与表格的相同，但只适用于ie。

下面是一个宽为300,高为80,边框宽为4,边框颜色为“FF0000”的一行两列表格，其中第一个单元格的宽为200,高为80，第二个单元格的边框颜色为“0000FF”。

　　代码如下：

　　＜tableborder="4"width="300"height="80"bordercolor="#FF0000"＞

　　＜tr＞

　　＜tdwidth="200"height="80"＞＜/td＞

　　＜tdbordercolor="#0000FF"＞＜/td＞

　　＜/tr＞

　　＜/table＞

　　2、表格的水平摆放位置

　　表格的水平摆放位置是用align="#"属性说明的，#为left（左对齐）,right（右对齐）,

　　第三个表格的代码如下：

　　＜tablewidth="80"border="1"align="right"height="30"＞

　　＜tr＞

　　＜td＞右对齐＜/td＞

　　＜/tr＞

　　＜/table＞

　　3、单元格里内容的位置属性

　　水平对齐方式，用align="#"属性说明，#为left（左对齐）,right（右对齐）,center（居中）；垂直对齐方式，用valign="#"属性说明，#为top（上对齐）,bottom（下对齐）,middle（居中）。

分别见下例，注意单元格里的内容与边框的的位置关系：

　　代码如下：

　　＜tablewidth="450"border="1"＞

　　＜tr＞

　　＜tdwidth="150"＞

　　＜divalign="left"＞内容左对齐＜/div＞

　　＜/td＞

　　＜tdwidth="150"＞

　　＜divalign="center"＞内容居中＜/div＞

　　＜/td＞

　　＜td＞

　　＜divalign="right"＞内容右对齐＜/div＞

　　＜/td＞

　　＜/tr＞

　　＜/table＞

　　垂直对齐方式

　　代码如下：

　　＜tablewidth="150"border="1"＞

　　＜tr＞

　　＜tdheight="40"width="146"valign="top"＞内容上对齐＜/td＞

　　＜/tr＞

　　＜tr＞

　　＜tdheight="40"width="146"valign="middle"＞内容居中＜/td＞

　　＜/tr＞

　　＜tr＞

　　＜tdheight="40"width="146"valign="bottom"＞内容下对齐＜/td＞

　　＜/tr＞

　　＜/table＞

　　4、表格的背景色、背景图片，单元格的背景色、背景图片

　　背景色属性：

bgcolor="#"，背景图片属性：

background="#"。

　　代码如下：

　　＜tablewidth="450"border="1"bgcolor="#539996"bordercolor="#FFFFFF"height="90"＞＜tr＞

　　＜td＞＜/td＞

　　＜tdbackground="back01.gif"＞＜/td＞

　　＜/tr＞

　　＜tr＞

　　＜td＞＜/td＞

　　＜td＞＜/td＞

　　＜/tr＞

　　＜tr＞

　　＜tdbgcolor="#FF0000"＞＜/td＞

　　＜td＞＜/td＞

　　＜/tr＞

　　＜/table＞

　　说明：

在上例中，整个表格的背景色是bgcolor="#539996"，第一行第二列的单元格背景图片是background="back01.gif"，第三行第二列的单元格背景色是bgcolor="#FF0000",根据显示结果可以看出：

设置表格的背景色后再设置单元格的背景色或背景图片，将优先显示单元格的属性。

　　5、表格属性cellspacing、cellpadding

　　cellspacing属性用来指定表格各单元格之间的空隙。

此属性的参数值是数字，表示单元格间隙所占的像素点数。

　　我们来看下面的两个表格：

　　上面第一个表格的单元格之间没有空白距离，而第二个的单元格之间有很大的空白距离，我们来比较一下他们的源代码：

　　第一个表格的代码：

　　＜tablewidth="200"cellspacing="0"border="1"bordercolor="#000000"＞

　　＜tr＞

　　＜td＞＜/td＞

　　＜td＞＜/td＞

　　＜td＞＜/td＞

　　＜/tr＞

　　＜/table＞

　　第二个表格的代码：

　　＜tablewidth="200"cellspacing="8"border="1"bordercolor="#000000"＞

　　＜tr＞

　　＜td＞＜/td＞

　　＜td＞＜/td＞

　　＜td＞＜/td＞

　　＜/tr＞

　　＜/table＞

　　比较代码，上边两个表格中只有cellspacing的设置不同，一个为“0”，一个为“8”，显示的结果就是第一个表格的每个单元格之间的距离为0（在本例中由于我们为了显示的方便，将表格边框设为“1”，所以单元格的真实距离是“2”，若将表格边框设为“0”，则单元格的距离就是0了，第二个单元格同理），第二个表格的每个单元格之间的距离为8。

　　cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。

此属

　　性的参数值也是数字，表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。

我们先来看看这个例子:

　　我们来看下面两个表格：

　　第一个表格单元格的内容与单元格边界之间没有空白距离，而第二个表格单元格的内容与单元格边界之间有空白距离，我们来比较一下他们的源代码：

　　第一个表格的代码：

　　＜tablewidth="240"cellspacing="0"border="1"bordercolor="#000000"cellpadding="０"＞＜tr＞

　　＜tdwidth="120"＞网页陶吧＜/td＞

　　＜td＞＜/td＞

　　＜/tr＞

　　＜/table＞

　　第二个表格的代码：

　　＜tablewidth="240"cellspacing="0"border="1"bordercolor="#000000"cellpadding="15"＞＜tr＞

　　＜tdwidth="120"＞网页陶吧＜/td＞

　　＜td＞＜/td＞

　　＜/tr＞

　　＜/table＞

　　两个表格只有红色部分代码不同。

第一个表格中"网页陶吧"这几个字离它所在的单元格为0,那是因为设置了cellpadding（dw如何固定表格）

　　="0"的原因.第一个表格中的"网页陶吧"这几个字离它所在的单元格比较远，那是因为cellpadding="15",也就是说"网页陶吧"离它所在的单元格的边界的距离为20像素。

简单的说,cellpadding的值等于多少,那表格内的单元格从自身边界开始向内保留多少空白,单元格里的元素永远都不会进入那些空白里。

　　我们在以后的篇幅中会大量用到这两个属性，所以请大家不要弄混乱了,为了形象的理解，请参考下图：

　　篇二：

dreamweavercs5自学教程-第五课：

表格处理

　　第五课：

表格处理

　　5-1插入表格

　　1、在页面中插入表格的方式

　　在页面中需要添加表格的地方单击，选择“插入—表格”

　　或在常用面板中选择“表格”图标

　　2、表格设置项

　　表格宽度设置单位是像素时，表格的宽度是固定的；

　　单位是百分比时，表格的宽度与浏览器窗口的宽度保持设置的比例，随窗口变化。

　　3、单元格的边距和间距

　　边距就是单元格内部内容与单元格边框的距离

　　间距就是单元格边框与表格边框之间的距离

　　注：

如果添加表格式单元格边距和间距空白不填数字，那么系统默认的数字就是单元格边距为1，单元格间距为2。

　　单元格边距和单元格间距分别为0时，表格的边框最细。

　　5-2创建数据表格

　　页眉标题功能的设置可以自动加粗单元格内的字体

　　设置的辅助功能标题是表格在页面中的标题，摘要部分的内容不会显示在网页中。

　　5-3实例：

明星相册页

　　1

　　1、表格整体的属性设置

　　篇三：

dw代码大全

　　dw代码大全

　　一、、、：

　　定义和用法：

构成html文档的重要组成部分，缺一不可。

　　1、标签:

此元素可告知浏览器其自身是一个html文档。

与标签限定了文档的开始点和结束点。

　　2、标签:

定义文档的主体。

它包含文档的所有内容（比如文本、图像、颜色和图形等等。

）

　　3、标签:

用于定义文档的头部。

下面这些标签可用在head部分：

,,,以及。

　　二、,,,,：

　　1、标签：

此元素定义了当前文档与web集合中其他文档的关系。

　　如：

　　2、标签：

元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。

　　如：

　　3、标签：

定义一段诸如javascript的脚本。

　　如：

　　alert（"感谢您光临我的个人小站!

"）

　　4、标签：

常用在页面内定义css样式，但强烈建议使用link标签定义css样式。

　　如：

　　*{font-size:

13px;}

　　5、标签：

定义文档的标题。

通常把它放置在浏览器窗口的标题栏或状态栏上。

　　三、超链接标签：

　　·定义和用法：

标签可定义锚。

一个锚有两种用法。

　　1、通过使用href属性，创建一个到另外一个文档的链接。

如：

　　href=""target="_blank"title="XX">XX

　　2、通过使用name或id属性，创建一个文档内部的书签。

如：

定义锚点；指向锚点返回顶端

　　·标签常用属性：

　　1、href:

描述另一个文档的地址。

　　2、target:

指定文档在哪个窗口打开。

　　3、title:

指定链接的标题。

　　4、name:

定义锚点的名称。

　　四、--标签：

　　-标签可定义标题。

定义最大的标题。

定义最小的标题。

　　如：

　　这是标题一

　　这是标题二

　　这是标题三

　　这是标题四

　　这是标题五

　　这是标题六

　　五、　　标签：

可定义一个段落。

　　如：

　　　　这是第一段的内容。

　　　　这是第二段的内容。

　　六、

　　标签：

可插入一个简单的换行符。

　　如：

这是第一行。

　　这是第二行。

　　七、标签：

可定义一副图像。

即在网页指定位置插入图片。

　　如：

　　八、标签：

可插入一个水平线。

水平分隔线（horizontalrule）可以在视觉上将文档分隔成各个部分。

　　如：

　　九、、、、、标签：

　　1、标签可定义表格。

在标签内部，可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。

　　2、标签在表格中定义一行。

　　3、标签定义表格中的一个单元格。

标签属性：

colspan=合并列单元格；rowspan=合并行。

　　5、标签定义表格内的表头单元格。

此th元素内部的文本通常会呈现为粗体。

　　6、标签可定义一个表格标题。

caption标签必须紧随table标签之后。

您只能对每个表格定义一个标题。

通常这个标题会被居中于表格之上。

　　十、标签:

　　form元素可为用户输入创建表单。

表单可包含文本域，复选框，单选按钮等等。

表单用于向指定的uRl传递用户数据。

　　·使用方法：

　　·标签属性：

　　1、id、name：

用来标识表单的名称。

　　2、method：

提供和程序进行数据交换的方法。

取值为post和get。

　　3、action：

提供和程序进行交换的程序路径，即接口程序。

　　十一、标签：

　　标签可定义输入域，在其中用户可输入数据。

其中包括文本字段、多选列表、可单击的图像和提交按钮等。

此标签的type属性和name属性是必需的。

　　1、type的取值。

type属性用来区分不同的输入域。

它的取值分别为：

text（文本域）、password（密码域）、hidden（隐藏域）、checkbox（复选框）、radio（单选框）、image（图像按钮）、file（文件域）、submit（提交按钮）、reset（重置按钮）、button（普通按钮）。

　　十二、标签:

　　1、用法：

元素可创建单选或多选菜单。

　　2、格式：

　　张三

　　李四

　　王五

　　3、元素可定义下拉列表中的一个选项（一个条目）。

　　格式：

张三，其中selected属性表示默认选项。

　　十三、标签：

　　1、用法：

定义一个文本区域（一个多行的文本输入区域）。

　　2、格式：

请在此处输入留言内容

　　3、属性：

　　i、cols：

设置输入框的列数。

　　ii、rows：

设置输入框的行数。

　　十四、、、、标签：

　　以下的元素均是字体样式元素。

建议使用css来取代这些效果。

　　标签可定义下划线文本。

　　标签可定义加删除线文本定义。

　　标签可定义斜体。

　　标签可定义粗体。

　　十五、、标签：

　　1、标签可定义上标文本。

　　2、标签可定义下标文本。

　　3、说明：

和标签，常用在数学等式、科学符号和化学公式中。

　　十六、、、标签:

　　1、标签定义列表。

　　2、定义列表中的项目（即术语部分）。

　　3、可在定义列表中定义条目的定义部分。

　　十七、、、标签：

　　1、标签定义有序列表。

标签属性：

type="1/a/a/i/i"。

　　2、标签定义无序列表。

标签属性：

type="circle/disc/square"

　　3、标签定义列表项目。

标签可用在有序列表（）和无序列表（）中。

　　十八、标签：

　　1、可定义文档中的分区或节（division/section）。

标签可以把文档分割为独立的、不同的部分。

　　2、常用id或class来标记，这样可以方便控制其样式。

　　十九、标签：

　　1、标签被用来组合文档中的行内元素。

　　2、说明：

span没有固定的格式表现。

当对它应用样式时，它才会产生视觉上的变化。

　　二十、注释标签：

　　1、说明：

注释标签用来在源文档中插入注释。

注释会被浏览器忽略。