[第4章优化网页布局表格的使用.pptVIP

第4章 优化网页布局 这个章节主要介绍表格的使用，利用表格来设置网页的页面布局框架，目前的主要趋势。 一、新建表格 【插入表格】 【步骤1】“插入栏”-“常用”-“表格”按钮 或菜单“插入”-“表格” 一、新建表格 【插入表格】 【步骤2】设置表格属性，如下 一、新建表格 表格对话框属性设置 （1）行数：确定表格具有的行的数目。 （2）列数：确定表格具有的列的数目。 （3）表格宽度：整个表格的宽度 一、新建表格 表格对话框属性设置 （3）表格宽度：整个表格的宽度 1）以像素为单位。如下：表格宽度为200像素 2）按占“浏览器窗口宽度”的百分比指定表格的宽度。如下：占30%，229像素 一、新建表格 表格对话框属性设置 （4）边框粗细：指定表格边框的宽度（以像素为单位）。一般为1（建议：设置为0，用于网页排版） 如左下图，灰色部分为边框，即边框较宽 【注意】边框粗细可以为0，如下，通常会以虚线方式出现 一、新建表格 【说明】边框粗细设置为0，如果没有出现表格，选择菜单“查看”-“可视化助理”-“表格边框”。 一、新建表格 表格对话框属性设置 （5）单元格边距：确定单元格边框和单元格内容之间的距离（像素数）。 【例如】4张表格，单元格边距不同，文字离边框的距离越远 一、新建表格 表格对话框属性设置 （6）单元格间距：确定相邻的表格单元格之间的距离（像素数） 一、新建表格 表格对话框属性设置 【注意】 （1）大多数浏览器按“单元格边距”都设置为 1，“单元格间距”设置为 2。 （2）建议：将“单元格边距”和“单元格间距”设置为 0。确保浏览器不显示表格中的边距和间距。 一、新建表格 表格对话框属性设置 （7） 页眉：即表头（也称为“表格标题”） 【例如】选择“顶部”，则表格的第1行会自动采用“粗体”字体，以便阅读 一、新建表格 表格对话框属性设置 （8）辅助功能 1）标题：提供了一个显示在表格外的表格标题。 2）对齐标题：指定表格标题相对于表格的显示位置。 【例如】表格标题“学生信息表”，采用“右对齐”方式 3）摘要：给出了表格的说明。可以在代码中看到摘要文本，但是该文本不会显示在用户的浏览器中。 二、表格的HTML代码 【基本语法】 table.../table - 定义表格tr - 定义表行th - 定义表头td - 定义表元(表格的具体数据) 二、表格的HTML代码 【例如】带边框的表格 table border tr thFood/th thDrink/th thSweet/th tr tdA/td tdB/td tdC/td /table 二、表格的HTML代码 【例如】表格边框、尺寸设置 table border=10 width=170 height=100 tr thFood/th thDrink/th thSweet/th tr tdA/td tdB/td tdC/td /table 二、表格的HTML代码 【例如】单元格边距和单元格间距设置 table border cellpadding=3 cellspacing=50 tr thFood/th thDrink/th thSweet/th tr tdA/td tdB/td tdC/td /table 二、表格的HTML代码 【练习】利用代码，绘制如下表格 【要求】 表格宽100，高200。第2行只有2个单元格! 【答案】 table border width=100 height=200 tr thFood/th thDrink/th thSweet/th tr tdA/td tdC/td /table 二、表格的HTML代码 【表格标题 】基本语法 （1）c