63表格代码基础.ppt

1、先区分“表格”和“单元格”。,6.3关于表格的基础知识及基础代码,在dreamweaver cs3中插入普通表格的两种方法： 一，在“设计”视图下使用常用工具栏的相关按钮插入表格。 二，在“代码”视图下编写代码进行表格的制作。,一，在“设计”视图下使用常用工具栏的相关按钮插入表格。,方法： 一，单击常用工具栏按钮，继续 单击“插入表格”图标，如图所示：,这个位置： 常用工具表格图标,由第一步可得到如下“表格”对话框。,假设我们要在网页中插入一个两行四列的表格，我们可将行数设置为2，列数设置为4，如左图所示，该表格的宽度为400px,当然这里我们也可以设置为“百分比”。关于“百分比”我们稍后讨论

2、。 点击“确定”按钮后我们可得到如下所示的表格。,以上是所生成的2行4列的表格，同时请同学们仔细查看该表格的“属性”面板，红色框所框区域是我们必须要熟练掌握的。,填充 属性 英文：cellpadding,间距 属性 英文：cellspacing,边框颜色 属性 英文：bordercolor,背景颜色 属性 英文：background-color 或：bgcolor,背景图像 属性 英文： Background-image 或：background,对齐 属性 英文：align (这里指水平方向的对齐）,边框 属性 英文：border,类 属性 英文：class,下面请看老师的演示，学会分辨上述

3、“属性”面板的几种属性，并能熟练使用这些属性，对表格进行相关设置。,通过老师的讲解，上述几种属性总结如下： 1，如果只设置该表格的边框为“1”，并设置边框颜色为黑色，将得到如下图所示效果：,边框（border) 值：1 边框颜色（bordercolor)属性值：黑色,该效果说明： 当表格边框不为0,，并且没有设置”间距“属性时，所得到的表格会有内外两层边框。,外侧边框,内侧边框,2，可以通过“属性”面板将该表格的内外两层边框设置为不同的颜色，如下图所示效果：,选中整个表格时，弹出的“属性”面板状态，此时，“边框颜色”属性指的是整个表格最外侧的边框的颜色。,在某一个单元格内单击鼠标所弹出的属性面

4、板状态，此时，“边框”属性的颜色是某一个单元格内侧边框的颜色。,单元格边框，即内侧边框,整个表格的边框，即外侧边框,“填充”(cellpadding)和“间距”（cellspacing)属性的不同效果。,通过观看老师的操作演示，同学们要明确“填充”属性的效果和“间距”属性的效果的不同之处，完全区分开两者，并能熟练掌握。 相关具体知识点请同学们自己练习。,表格的对齐方式 （表格的对齐 包含两部分）,一，整个表格的对齐方式 （整个表格的英文为：table). 注：当我们单击整个表格时，所弹出的属性面板中只显示“对齐”属性，如下图所示：,由上图所示，对于整个表格来说，它只能在水平方向进行对齐设置，分别为：左对齐（left)，居中对齐(center)，右对齐(right)。,表格的 左对齐方式,表格的 居中对齐方式,表格的 右对齐方式,二，表格中每一个单元格的对齐方式 注：当我们在表格中的某一个单元格内单击一下鼠标后，“属性”面板将变为如下图所示的状态：,由左图所示，对于表格内的每一个单元格来说，它可以在水平方向和垂直方向上进行对齐设置， 水平方向上： 左对齐（left) 居中对齐(c