《如何用DW创建表格》由会员分享，可在线阅读，更多相关《如何用DW创建表格（5页珍藏版）》请在金锄头文库上搜索。
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、表格、单元格的大小、表格、单元格的大小,表格边框的宽度、颜色表格边框的宽度、颜色,单元格边框的颜色单元格边框的颜色表格以及单元格的大小是用“width=#”和“height=#”属性说明，“width=#”表示宽， “height=#”表
3、示高，#是以象素或者百分比为单位的数字。表格边框的宽度是用 “border=#”属性说明，#为宽度值，单位是象素，表格边框的颜色是用 “bordercolor=“#“属性说明，#是 16 进制的 6 位数，格式为 rrggbb，分别表示红、 绿、 兰三色的分量。或者是 16 种已定义好的颜色名称，参见文本颜色，单元格边框的颜色 属性与表格的相同，但只适用于 IE。下面是一个宽为 300,高为 80,边框宽为 4,边框颜 色为“FF0000”的一行两列表格，其中第一个单元格的宽为 200,高为 80，第二个单元格 的边框颜色为“0000FF”。 代码如下：table border=“4“ wid
4、th=“300“ height=“80“ bordercolor=“#FF0000“tr td width=“200“ height=“80“ /tdtd bordercolor=“#0000FF“ /td/tr/table2、表格的水平摆放位置、表格的水平摆放位置表格的水平摆放位置是用 align=“#“ 属性说明的，#为 left(左对齐), right(右对齐), center(居中)。分别见下例，注意这三个表格与边界的位置关系：左对齐center右对齐第三个表格的代码如下： table width=“80“ border=“1“ align=“right“ height=“30“tr
5、td右对齐/td/tr/table3、单元格里内容的位置属性、单元格里内容的位置属性水平对齐方式，用 align=“#“属性说明，#为 left(左对齐), right(右对齐), center(居 中)；垂直对齐方式，用 valign=“#“属性说明，#为 top(上对齐), bottom(下对齐), middle(居中)。分别见下例，注意单元格里的内容与边框的的位置关系：水平对齐方式： 内容左对齐内容居中内容右对齐代码如下：table width=“450“ border=“1“trtd width=“150“div align=“left“内容左对齐/div/tdtd width=“15
6、0“div align=“center“内容居中/div/tdtddiv align=“right“内容右对齐/div/td/tr/table垂直对齐方式 内容上对齐内容居中内容下对齐代码如下：table width=“150“ border=“1“trtd height=“40“ width=“146“ valign=“top“内容上对齐/td/trtrtd height=“40“ width=“146“ valign=“middle“内容居中/td/trtrtd height=“40“ width=“146“ valign=“bottom“内容下对齐/td/tr/table4、表格的背景色
7、、背景图片，单元格的背景色、背景图片、表格的背景色、背景图片，单元格的背景色、背景图片背景色属性：bgcolor=“#“ ，背景图片属性：background=“#“。见下例： 代码如下： table width=“450“ border=“1“ bgcolor=“#539996“ bordercolor=“#FFFFFF“ height=“90“trtd /tdtd background=“Back01.gif“ /td/trtrtd /tdtd /td/trtrtd bgcolor=“#FF0000“ /tdtd /td/tr/table说明：说明：在上例中，整个表格的背景色是 bgcol
8、or=“#539996“ ，第一行第二列的单元格背景图片是 background=“Back01.gif“ ，第三行第二列的单元格背景色是 bgcolor=“#FF0000“ ,根据显示结果可以看出：设置表格的背景色后再设置单元格的背景 色或背景图片，将优先显示单元格的属性。5、表格属性、表格属性 cellspacing、cellpaddingcellspacing 属性用来指定表格各单元格之间的空隙。此属性的参数值是数字，表 示单元格间隙所占的像素点数。 我们来看下面的两个表格：上面第一个表格的单元格之间没有空白距离，而第二个的单元格之间有很大的空 白距离，我们来比较一下他们的源代码：第一个
9、表格的代码：table width=“200“ cellspacing=“0“ border=“1“ bordercolor=“#000000“tr td /tdtd /tdtd /td/tr/table第二个表格的代码：table width=“200“ cellspacing=“8“ border=“1“ bordercolor=“#000000“trtd /tdtd /tdtd /td/tr/table比较代码，上边两个表格中只有 cellspacing 的设置不同，一个为“0”，一个为“8”， 显示的结果就是第一个表格的每个单元格之间的距离为 0(在本例中由于我们为了显示 的方便，将表
10、格边框设为“1”，所以单元格的真实距离是“2”，若将表格边框设为“0”，则 单元格 的距离就是 0 了，第二个单元格同理)，第二个表格的每个单元格之间的距离 为 8。cellpadding 属性用来指定单元格内容与单元格边界之间的空白距离的大小。此属 性的参数值也是数字，表示单元格内容与上下边界之间空白距离的高度所占像素点数 以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。我们先来看看这个 例子:我们来看下面两个表格：网页陶吧 网页陶吧 第一个表格单元格的内容与单元格边界之间没有空白距离，而第二个表格单元格 的内容与单元格边界之间有空白距离，我们来比较一下他们的源代码：第一个表格的代
11、码：table width=“240“ cellspacing=“0“ border=“1“ bordercolor=“#000000“ cellpadding=“tr td width=“120“网页陶吧/tdtd /td/tr/table第二个表格的代码：table width=“240“ cellspacing=“0“ border=“1“ bordercolor=“#000000“ cellpadding=“15“tr td width=“120“网页陶吧/tdtd /td/tr/table两个表格只有红色部分代码不同。第一个表格中“网页陶吧“这几个字离它所在的单 元格为 0,那是因为设置了 cellpadding=“0“的原因.第一个表格中的“网页陶吧“这几个字 离它所在的单元格比较远，那是因为 cellpadding=“15“,也就是说“网页陶吧“离它所在的 单元格的边界的距离为 20 像素。简单的说,cellpadding 的值等于多少,那表格内的单元 格从自身边界开始向内保留多少空白,单元格里的元素永远都不会进入那些空白里。我们在以后的篇幅中会大量用到这两个属性，所以请大家不要弄混乱了, 为了形 象的理解，请参考下图：
