表格代码基础.ppt

先区分“表格”和“单元格”。 6.3关于表格的基础知识及基础代码 在dreamweaver cs3中插入普通表格的两种方法： 一，在“设计”视图下使用常用工具栏的相关按钮插入表格。 二，在“代码”视图下编写代码进行表格的制作。 一，在“设计”视图下使用常用工具栏的相关按钮插入表格。 方法： 一，单击常用工具栏按钮，继续 单击“插入表格”图标，如图所示： 由第一步可得到如下“表格”对话框。 以上是所生成的2行4列的表格，同时请同学们仔细查看该表格的“属性”面板，红色框所框区域是我们必须要熟练掌握的。 下面请看老师的演示，学会分辨上述“属性”面板的几种属性，并能熟练使用这些属性，对表格进行相关设置。 通过老师的讲解，上述几种属性总结如下： 1，如果只设置该表格的边框为“1”，并设置边框颜色为黑色，将得到如下图所示效果： 2，可以通过“属性”面板将该表格的内外两层边框设置为不同的颜色，如下图所示效果： “填充”(cellpadding)和“间距”（cellspacing)属性的不同效果。 通过观看老师的操作演示，同学们要明确“填充”属性的效果和“间距”属性的效果的不同之处，完全区分开两者，并能熟练掌握。 相关具体知识点请同学们自己练习。 表格的对齐方式 （表格的对齐 包含两部分） 一，整个表格的对齐方式 （整个表格的英文为：table). 注：当我们单击整个表格时，所弹出的属性面板中只显示“对齐”属性，如下图所示： 二，表格中每一个单元格的对齐方式 注：当我们在表格中的某一个单元格内单击一下鼠标后，“属性”面板将变为如下图所示的状态： 网页中表格的基本代码 * * * * * * * * * 这个位置： 常用工具—表格图标 假设我们要在网页中插入一个两行四列的表格，我们可将行数设置为2，列数设置为4，如左图所示，该表格的宽度为400px,当然这里我们也可以设置为“百分比”。关于“百分比”我们稍后讨论。 点击“确定”按钮后我们可得到如下所示的表格。 填充 属性 英文：cellpadding 间距 属性 英文：cellspacing 边框颜色 属性 英文：bordercolor 背景颜色 属性 英文：background-color 或：bgcolor 背景图像 属性 英文： Background-image 或：background 对齐 属性 英文：align (这里指水平方向的对齐） 边框 属性 英文：border 类 属性 英文：class 边框（border) 值：1 边框颜色（bordercolor)属性值：黑色 该效果说明： 当表格边框不为0,，并且没有设置”间距“属性时，所得到的表格会有内外两层边框。 外侧边框 内侧边框 选中整个表格时，弹出的“属性”面板状态，此时，“边框颜色”属性指的是整个表格最外侧的边框的颜色。 在某一个单元格内单击鼠标所弹出的属性面板状态，此时，“边框”属性的颜色是某一个单元格内侧边框的颜色。 单元格边框，即内侧边框 整个表格的边框，即外侧边框 由上图所示，对于整个表格来说，它只能在水平方向进行对齐设置，分别为：左对齐（left)，居中对齐(center)，右对齐(right)。 表格的 左对齐方式 表格的 居中对齐方式 表格的 右对齐方式 由左图所示，对于表格内的每一个单元格来说，它可以在水平方向和垂直方向上进行对齐设置， 水平方向上： 左对齐（left) 居中对齐(center) 右对齐(right) 垂直方向上 顶端对齐(top) 纵向居中对齐(middle) 底端对齐(bottom) * * * * * *