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＞