4HTML_表格资料.ppt

使用表格 使用表格 学习要点： 制作表格 表格的标题与表头 行标记 单元格标记 表头标记 表格的结构标记 表格嵌套 表格 创建表格 TABLE标签的属性 table标签的属性 Frame的属性值及描述 表格的标题 CAPTION属性 表格标题的水平对齐属性 ALIGN (属性值LEFT,CENTER,RIGHT) 表格标题的垂直对齐属性 VALIGN(属性值为TOP,BOTTOM) 表格的对齐方式 行标签TR及属性 单元格标签TD 创建表格的实例 表格的表头 th标签 同td标签的用法类似227 设置表格表首 thead标签可定义一组表首行 可以放置一个或多个tr标签，定义统一的属性 举例说明 设置表格表主体 tbody标签 将表格分成一个单独的部分，将表格的一行或者几行合成一组，设置统一的属性 举例说明 设置表格的标注 tfoot标签 为表格定义一个标注。可以包括一个或多个tr标签 需要说明的几点 (1) tbody，thead，tfoot都是table的子标签 (2) tbody，thead，tfoot的显示顺序是从头到尾的，thead先于tbody，tbody先于tfoot 合并单元格(跨列) 合并单元格(跨行) 布局表格（补充） 使用布局表格的好处 － －手动绘制 怎样创建布局表格 （1）将常用插入栏切换到布局，选择布局模式 （2）首先绘制布局表格 （3） 在布局表格上绘制嵌套的布局单元格 布局表格（补充） 布局表格： 不能水平排列 只能垂直排列 不能在其中添加内容 布局单元格：可以实现垂直排列 可以在其中添加内容 通过表格实现网页布局 整个网页的布局需要借助于表格，使用表格才能把网页元素放置到网页中的合适位置。 用来进行网页排版的表格，边框一般设为0 注意事项 使用表格排版应注意的一点就是页面的打开速度 使用表格后，浏览器会等整个表格的内容都接受到以后才显示这个表格的内容。 为了解决网页打开速度慢的问题，我们应该将一个表格拆成若干个表格。 * * 强调表格的几个重要组成部分： 1）行 2）列 3）单元格 4）列标题（一般位于第一行或第一列，粗体显示），可选 5）表格标题，可选 1.先根据效果图：集体提问，表格是多少行多少列？ 回答：肯定是2行3列。 2.讲解代码：TABLE表示….TR表示…TD表示。 3.为了代码的可读性，象C语言写代码一样，为了显示层次关系， 建议学员写HTML代码时保持一定的缩进，如幻灯片的示例代码所示。 4.演示：TG5-Source文件夹中的“简单表格”用例。 讲解要点： 1）表格一般都需要标题，说明表格的内容主题。表格的标题由标签CAPTION设置 设置标题位于表格上方： 　　CAPTION align=top 表格标题 /CAPTION 设置标题位于表格下方： 　　CAPTION align=bottom表格标题/CAPTION 2）同理，表格的第一行或第一列，一般需要加粗突出显示，作为行或列的标题。 设置行或列的标题： TH行或列标题/TH 演示：TG5-Source文件夹中的“表格标题”用例。 讲解要点： 1）为了美观大方，表格中的数据一般需要设置对齐方式。 2）设置表格、行或列的对齐方式，修改align属性为right（右对齐），center（居中）或left（左对齐）就可以了，默认为“左对齐”。 本例效果：设置表格居中显示，姓名列“左对齐”，性别列居中，分数列“右对齐”。 演示：TG5-Source文件夹中的“表格对齐”用例。 讲解要点： 1）表格的颜色设置： 　　表格的背景色 TABLE bgcolor=颜色值 　　行的背景色　 TR bgcolor=颜色值 列的背景色 TH bgcolor=颜色值或 TD bgcolor=颜色值 颜色值可以采用 RGB（red/green/blue）红绿蓝十六进制值表示，如红色#FF0000, 或者是一些预定义色彩名称：red ，blue，yellow等。 2）表格的尺寸设置： TABLE width=n1 height=n2 其中，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。 例如： TABLE width=200 height=100表示一个长为200像素，宽为100像素的表格。 TABLE width=20% height=10%表示一个长为屏幕的20%，宽为屏幕的10%