dw如何在div中插入表格.docx
《dw如何在div中插入表格.docx》由会员分享，可在线阅读，更多相关《dw如何在div中插入表格.docx（5页珍藏版）》请在冰豆网上搜索。
dw如何在div中插入表格
竭诚为您提供优质文档/双击可除
dw如何在div中插入表格
篇一：
dreamweaver8系列diV+css教程表格一列布局
一列布局
web标准（div+css）》的一列布局，包含以下几种形式：
一列固定宽度一列固定宽度居中一列自适应宽度一列自适应宽度居中一列二至多块布局前一节我们回顾了xhtml基础和css基础部分，今天我们正式开始使用网页制作软件——adobe公司出品的dreamweaver来开始网页设计之旅。
相信之前您已经用过这个软件了，具体怎么使用我就不讲了。
为了照顾部分朋友，今天课程的css部分我们是以可视化生成方式，不过建议大家能手写的尽量还是手写，这样有助于提高效率。
一、一列固定宽度我们先看一下一列固定宽度，首先要新建一个页面：
注意：
这里的文档类型是过渡型，目前我们采用这种宽松验证方式。
接下来在页面中插入一个div
标签，我们可以点击工具栏的“插入diV标签”按钮，在打开的对话框中id项给这个div命一下名，我们给它起个名叫layout（名称根据自己需要命名）。
插入div后，在右侧的css样式面板中，定义id为layout的样式，确定后在打开的css编辑对话框的方框选项中设计宽度500，高度300。
为了看清楚起见，我们把这个div设置个背景色，这样就能预览出大小和位置了。
这里选择高级，然后在选择器中填写：
#layout，如果是选中div
后，再点击添加，它会自动添加上。
因为是定义id，所以前面需要加#，后面会有id和class的详细讲解
的margin:
auto;
时，可以让这个盒模型居中。
我们下边在css样式表中加上这个属性看看效果：
#layout{height:
300px;width:
400px;background:
#99FFcc;margin:
auto;}
在dreamweaver的设计视图中我们选中看看，是不是已经居中了，我们再在ie下预览一下，同样居中。
篇二：
如何用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="#FF000（dw如何在div中插入表格）0"＞＜/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
="0"的原因.第一个表格中的"网页陶吧"这几个字离它所在的单元格比较远，那是因为cellpadding="15",也就是说"网页陶吧"离它所在的单元格的边界的距离为20像素。
简单的说,cellpadding的值等于多少,那表格内的单元格从自身边界开始向内保留多少空白,单元格里的元素永远都不会进入那些空白里。
我们在以后的篇幅中会大量用到这两个属性，所以请大家不要弄混乱了,为了形象的理解，请参考下图：
篇三：
在dreamweaver制作可拖动表格
在dreamweaver中，给表格增加css定位，表格就变得象“层”一样可拖动。
1.在文档中插入一个表格。
插入一个表格
2.选中表格，在属性面板上，为表格设置一个id名称。
实例中输入f1。
表格设置一个id名称
3.打开css样式面板，单击“新建css样式”按钮。
打开css样式面板
4.在“新建css样式”对话框中，类型中选择“使用css选择器”，在选择器中，输入#加上id名称。
实例中输入#f1。
新建css样式
5.在“定义”类别中，选择定位类型为“绝对”，在“定位”框中，“左”和“上”输入数值。
按“确定”按钮完成css
设置。
定位类型为“绝对”
6.在文档中，表格变得象“层”一样可拖动。
表格象“层”一样可拖动
升级会员 