第四讲标准表格与布局表格的使用

标准表格与布局表格的使用4.1标准表格在信息世界中表格主要用于装载数据信息。由于表格能将单元格中的内容规划整齐后显示出来，表格属性能改变对象在浏览器中的显示效果，所以表格就成为网页中组织规划文字、图像等内容的排版工具。本节主要介绍表格的建立、对表格的一些基本操作和怎样利用表格来构造页面的整体框架。4.1.1建立表格table属性名＝属性值…caption属性名＝属性值…表格标题/captiontr属性名＝属性值…th属性名＝属性值…表头1/thtd属性名＝属性值…表项1/td/trtr属性名＝属性值…th属性名＝属性值…表头2/thtd属性名＝属性值…表项2/td/tr/table4.1.1建立表格表格标签table的常用属性有：width、height、border、align、cellpadding（表项内部空白）、cellspacing（表项间隙）、bordercolor、background、bgcolor标题标签caption的常用属性有：align、valign（标题在表格的上部或下部，值为bottom|top）。行标签tr、单元格标签td、表头标签th的常用属性有：width、height、align、valign、nowrap、bordercolor、background、bgcolor。此外跨多行属性colspan和跨多列属性rowspan，如：thcolspan=xrowspan=y表项/th4.1.1建立表格bodytablewidth=247height=129border=1caption学生成绩表/captiontrthrowspan=2学号/ththrowspan=2姓名/ththcolspan=3成绩/th/trtrthwidth=40数学/ththwidth=40语文/ththwidth=40外语/th/trtrtd040321/tdtd张三/tdtd78/tdtd88/tdtd90/td/trtrtd050833/tdtd李四/tdtd67/tdtd75/tdtd98/td/trtrtd067712/tdtd王五/tdtd90/tdtd56/tdtd70/td/tr/table/body4.1.1建立表格1.创建表格（1）插入表格①将光标定位在要插入表格的地方。②单击“插入”面板中“常用”选项卡上的插入表格按钮，弹出插入表格对话框上的按钮。③在打开的表格对话框中，设置表格行、列数及单元格边距、单元格间距、表格宽度等4.1.1建立表格使用Dreamweaver建立表格，通过“插入”面板或者“插入”菜单表格基本操作①添加表格内容②改变表格大小③添加行与列④删除行与列4.1.2编辑表格1．选择表格对象选择整个表格：单击表格左上角或右边框或底边框或状态条中的Table标签。选择一行或一列单元格：将鼠标指针置于一行的左边框上，或置于一列的顶端边框上，当选定箭头出现时单击。选择连续的几个单元格：在一个单元格中单击并拖动鼠标横向或纵向移至另一单元格。选择不连续的几个单元格：按住Ctrl键，单击欲选定的单元格、行或列。选择单元格中的网页元素：点击单元格中的网页元素。4.1.2编辑表格2．编辑表格外观表格属性面板行、列、一个或多个单元格的属性面板【例4-2】表格嵌套和代码在对表格多次设置同一属性时，单元格的属性优先于表格行的属性，表格行的属性优先于整个表格的属性。【例4-3】利用表格构造网页的整体框架3．表格数据排序（2）导入表格数据(直接导入和作为文本文件）可以很方便的导入excel表格数据。直接导入：原来表格所具有的格式将不被保留，而且导入过程中也不能设置格式。step1.执行“文件”＝》“导入”＝》“Excel文档”菜单命令，打开“导入excel文档“对话框，选中一个excel表格Step2.单击“打开”按钮，即可将其导入到dreamweaver中，如图所示：准备格式化数据使用MicrosoftOffice中excel打开一个电子表格文件，如图所示，然后单击“文件-〉另存为”菜单命令，在弹出的保存文件对话框中选择保存类型为“文本文件(制表符分割)(*.txt)”。作为文本文件导入的具体步骤：step1.选择“文件”菜单下的“导入”下的“表格式数据”命令，在出现的“导入表格数据”对话框中，选择要导入的、保存为.txt的数据文件。step2.单击“打开”按钮，返回到“导入表格式数据”对话框设置单元格边距、单元格间距、格式化首行、边框等参数，如图：step3.单击“确定”按钮，将表格数据导入到文档中。通过设计方案格式化表格Step1.选中上面导入的数据表格。Step2.选择“命令”＝》“格式化表格”菜单命令，打开“格式化表格”对话框，在对话框中选择“AltRows:Gree&Yello”方案。如图所示：Step3.单击“确定”按钮，将选定的格式化表格方案应用于表格，得到所示效果。制作细边框表格step1.插入一个3行4列宽度为400像素，边框粗细及单元格边距为0,单元格间距为1的表格。Step2.设置表格的属性面板，将表格的背景颜色设置为黑色。Step3.选中表格中的所有单元格，在单元格“属性”面板中设置单元格的背景颜色为白色。Step4.此时，表格有了黑色细线边框的效果。4.2布局表格利用布局表格制作复杂的网页布局，制作简单，但布局表格可设置的属性比标准表格少。利用布局表格布置复杂页面后，转换到标准表格设置属性。4.2.1绘制布局表格与布局单元格“布局表格”按钮，“布局单元格”按钮布局表格之间与布局单元格之间不能重叠页面中的灰色空间是不可用来添加网页元素的区域，必须在需要插入网页对象的地方插入一个布局单元格。4.2.2编辑布局表格与布局单元格1.调整布局表格与布局单元格的位置与大小。2.布局单元格的自动伸缩。3.设置布局表格与布局单元格的属性。【例4-4】应用布局表格重新制作的【例4-3】页面。