如何用dw创建表格

《如何用dw创建表格》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、一、创建基本的表格　　一个表由＜table＞开始，＜/table＞结束，表的内容由＜tr＞,＜th＞和＜td＞定义。＜tr＞说明表的一个行，表有多少行就有多少个＜tr＞；＜th＞说明表的列数和相应栏目的名称，有多少个栏就有多少个＜th＞；＜td＞则填充由＜tr＞和＜th＞组成的表格。　　表格重要的基本标记不多，但每个标记都有很多的属性，考虑到一下子把这些属性都列出来，可能让初学者感到无从下手，所以我们还是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的属性。　　在讲解之前，我们先来看看表格的基本构造。下图是一个3行3列的表格。

2、　　这里面有两个概念要弄明白：表格与单元格。他们的关系是整体与局部的关系，如同砌墙的砖和砌好的墙一样。在上面3行3列的表格中一共有9个单元格。由于我们后面将提到的表格属性和单元格属性有很多是相同的，所以一定要分清楚。前面已经说过表格的最基本标记为＜table＞、＜tr＞、＜td＞，可以先树立这样一个概念：描述整个表格的属性标记放在＜table＞里，描述单元格的属性标记放在＜tr＞、＜td＞里。有这样一个概念后，我们学习起来就可能简单些。　　1、表格、单元格的大小,表格边框的宽度、颜色,单元格边框的颜色　　表格以及单元格的大小是用“wi

3、dth=#”和“height=#”属性说明，“width=#”表示宽，“height=#”表示高，，#是以象素或者百分比为单位的数字。表格边框的宽度是用“border=#”属性说明，，#为宽度值，单位是象素，表格边框的颜色是用“bordercolor="#"属性说明，#是16进制的6位数，格式为rrggbb，分别表示红、绿、兰三色的分量。或者是16种已定义好的颜色名称，参见文本颜色，单元格边框的颜色属性与表格的相同，但只适用于IE。下面是一个宽为300,高为80,边框宽为4,边框颜色为“FF0000”的一行两列表格，其中第一个单元格的

4、宽为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(右对齐),center(居中)。分别见下例，注意这三个表格与边界的

5、位置关系：左对齐center右对齐第三个表格的代码如下：＜tablewidth="80"border="1"align="right"height="30"＞＜tr＞＜td＞右对齐＜/td＞＜/tr＞＜/table＞　　3、单元格里内容的位置属性　　水平对齐方式，用align="#"属性说明，#为left(左对齐),right(右对齐),center(居中)；垂直对齐方式，用valign="#"属性说明，#为top(上对齐),bottom(下对齐),middle(居中)。分别见下例，注意单元格里的内容与边框的的位置关系：水平对齐方式：

6、内容左对齐内容居中内容右对齐代码如下：＜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"

7、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"bo

8、rder="1"bgcolor="#539996"bordercolor="#FFFFFF"height="90"＞＜tr＞＜td＞ ＜/td＞＜tdbackground="Back01.gif"＞ ＜/td＞＜/tr＞