通过Dreamweaver CS学习HTML DIV CSS 表格与层.pptxVIP

会计学1通过Dreamweaver CS学习HTML DIV CSS 表格与层 7.1 基本操作前面介绍了表格的作用是使网页整齐明了。本节将介绍如何在网页中添加表格，以及简单设置表格的属性来适应网页设计的需要。第1页/共31页 插入表格了解了表格的用途之后，接下来了解如何把表格插入到网页中。具体步骤如下： 【表格】对话框 图 表格效果 第2页/共31页 输入数据插入表格之后，接下来介绍如何把数据输入到表格中，具体步骤如下：输入数据效果 第3页/共31页 调整表格尺寸在表格中输入数据后，如果数据内容较多，就需要调整表格的大小，以适应内容的需要。如何进行调整，具体步骤如下：选中表格效果 调整表格效果 第4页/共31页 表格对齐从上面的图中可以看出表格默认的对齐方式是左对齐，修改对齐方式的具体步骤如下：居中对齐效果 第5页/共31页 7.2 编辑表格 前面介绍了表格的基本操作，还有一些其他的对表格进行编辑的操作。例如，合并或拆分表格单元、添加或删除表格行或列、调整行高或列宽及设置表格标题等。第6页/共31页 表格标题一般情况下表格会有一行标题来说明表格的内容项。例如一张学生成绩表，有一行标题说明对应的成绩科目。在表格中，设置标题的具体步骤如下： 无表格标题效果 表格标题效果 第7页/共31页 表格列宽与行高当单元格中的内容较多时，需要调整表格单元的宽度和高度。Dreamweaver的可视化操作可以使此项操作变得简单方便，具体步骤如下： 原始效果 改变宽高效果 第8页/共31页 添加行或列在网页设计过程中，当表格的行或列不够时，就需要添加一行或一列。添加行或列的具体步骤如下： 原始表格效果 【插入行或列】对话框 第9页/共31页 添加行或列单击【确定】按钮，完成插入行，效果如图左所示选择【所选之前】单选按钮，然后单击【确定】按钮，完成插入列，效果如图右所示。 插入行效果 插入列效果 第10页/共31页 删除行或列了解了如何添加行或列，接下来介绍如何把多余的行或列删除，具体步骤如下：接着上一小节中的实例，保持插入行和列的效果。选中需要删除的行，可以同时选中多行。选中上小节中插入的行。保持光标在选中的行上，然后右击，弹出快捷菜单。单击【表格】|【删除行】命令，完成行的删除。第11页/共31页 合并单元格在表格的使用过程中，有的内容需要占两个或两个以上的单元格。此时需要把多个单元格合并成一个单元格，可以是合并同行的单元格，也可以是合并同列的单元格。具体步骤如下： 原始表格效果 合并单元格效果 第12页/共31页 拆分单元格上一小节介绍了如何合并单元格。既然有合并，当然也有拆分。拆分单元格的具体步骤如下：【拆分单元格】对话框第13页/共31页 7.3 表格外观表格的外观包括表格边框的粗细与颜色、单元格之间的距离（即间距）、表格内容的颜色与对齐方式、表格的背景颜色与背景图像，以及单元格的背景颜色与背景图像等。第14页/共31页 设置边框粗细边框的粗细可以为网页增添一些趣味。在插入表格时，默认边框为1像素。如何进行边框粗细的修改，具体步骤如下： 无边框效果图 无边框预览效果 第15页/共31页 设置边框粗细在【边框】文本框中输入5，按Enter键，效果如图左所示，预览如图右所示。 边框为5的效果 加边框预览效果 第16页/共31页 设置边框颜色在上一小节中，边框的默认颜色是灰色，如果总以灰色显示会很单调。下面将介绍设置边框的颜色，具体步骤如下： 边框颜色效果 单元格边框颜色效果 第17页/共31页 设置表格间距插入一个表格后，可以看到表格的边框之间有一个间隙，它就是表格的间距。默认的间距是2像素。如何进行表格的间距的设置？具体步骤如下：表格间距效果 第18页/共31页 表格填充表格填充是指单元格内容与单元格边框之间的距离。如何对其进行设