网页设计之表格
HTML5网页设计与制作教学课件第七章使用表格
使用表格
第7章 使用表格
在生活中表格随处可见，如账表、明细表、成绩表 、数据表等，在网页中也是一样。制作网页的时候， <table>表格标签是最常用的，也是最必不可少的工具 。表格拥有特殊的结构和布局模型，能够比较醒目地 描述数据间的关系，如果借助 CSS设计表格样式，可 以帮助用户在阅读数据时更便捷、更轻松。
【拓展练习】
使用border-spacing属性分离单元格时，应该注意三个问题。
第一，早期版本的IE浏 览器不支持该属性，要定义 相同效果的样式，就需要同 时结合 HTML的cellspacing属性来设置。
第二，当使用border-spacing
属性时，应确保数据单元格之间的相
互独立性，不能再使用border-
【拓展练习】
利用CSS的padding属性可以更灵活地定制单元格补白区域的大小，也可以根据需要定义不同边 上的补白。使用padding属性还可以为表格定义补白，此时可以增加表格外框与单元格的距离。以上 面的示例为基础，重新定义内部样式表，在<head>标签内的<style type="text/css">标签中清除 其他表格样式，添加如下样式。
新建一个网页，保存为 test.html，在 <body>内使用 <table>、<tr>、<th>和<td>标签
设计一个简单的表格，然后使用HTML的colspan、rowspan属性合并相邻单元格中的相同项目，
代码如下所示。
7.1 设计表格结构
7.1.2 设计表格附加结构
【随堂练习 】
在IE浏览器中预览演示效果，如图7-4所示。
网页的版面设计使用表格布局
任务二（结合自己的网站主题设计页面）
❖ 1.新建一个网页，标题为“*****”； ❖ 2.插入表格布局版面，行数、列数
根据自己的需要来设定； ❖ 3.写上网站名称、制作导航栏； ❖ 4.给“导航栏”填充颜色； ❖ 5.在表格里插入图像。 ❖ 6.保存。
自我评价，梳理小结
❖ 本节课主要内容： ❖ 网页版面设计的步骤是：首先确定大概的页
教学目标
❖ 知识与技能：
❖ 1、认识到网页版面设计的重要性。 ❖ 2、掌握在网页中用表格来布局页面的方法。
❖ 过程与方法：
❖ 能根据
❖ 通过实践创作的过程，形成主动学习和利用信息技术、参与 信息作品创作的态度。
欣赏作品
❖ 比一比 ❖ 设问：哪个页面你更喜欢？
面布局，接着根据需求用单元格在里面细分， 最后进行图文编排。
课后拓展：搜一搜
❖ 搜索自己感兴趣的素材，以丰富自己网页的 内容。
想一想，动一动
❖ Word里是怎样插入表格的呢？
使用表格布局
❖ 插入表格： ❖ 菜单栏上的“插入” →“表格” ❖ 工具栏上的“表格”的图标
任务一
❖ 1、打开dreamweaver 新建一个网页，标题 改为“一起听音乐”；
❖ 2、插入表格：行数为4，列数为5，边框为1； ❖ 3、将第一列的第三、四行合并单元格； ❖ 4、在第五列的后面插入一列。
DreamweaverCS5网页制作第3章 使用表格布局页面PPT课件
3.1 表格的建立和编辑
3.1.4 实战演练：网站“行星大观”页眉导航部分制作
操作步骤： 6）光标移到第2行第1个单元格，在属性面板中设单元格的“宽”为270，“高”为24。鼠标 选中该行其它所有单元格，在属性面板中设单元格设为“宽”为100，水平、垂直方向均为 居中对齐。输入对应文字，如图所示。
（3）选取行或列 从一个单元格开始，拖动鼠标选中整行和整列的单元格，单元 格所在的行或列即被选中。或将鼠标停留在一行的左边框或一列的上边框，当选择行 或列的图标出现时，单击鼠标即可选择行或列。
3.1 表格的建立和编辑
3. 设定表格和单元格属性 （1）表格属性
当选中整个表格时，属性面板会自动变成表格的设置面板。可以通过这个面板 修改表格的行数、列数、大小等属性。表格的属性面板如下图所示。其中行、列、 宽、高、填充（即单元格边距）、间距、边框在创建表格时已经介绍过。
3.1 表格的建立和编辑
2. 选取表格元素 （1）选取整个表格 将鼠标指针移动到表格的边框线上单击鼠标左键选择整个表
格。或光标放在表格中时，点击菜单“修改”→“表格”→“选择表格”命令。也可以 将光标放在单元格中，在文档窗口的左下角的标签选择器中选择“Table”标签，选取 整个表格。
（2）选取单元格 将鼠标指针移动到某个单元格上，按住Ctrl键不放，再单击， 就可以选中这个单元格。按住Ctrl键，再逐个单击要选取的单元格，就可以选中不连 续的多个单元格。光标移到某个单元格中，按住Shift键鼠标点击另外一个单元格，则 这两个单元格之间的所有单元格将被选中，形成一个连续矩形区域。也可以通过鼠标 拖拽的方法可以选取连续的一片单元格。
3.1 表格的建立和编辑
3.1.1 案例制作：2006世界杯E组对阵表
网页设计中表格的应用
我们在使用Dreamweaver编辑网页的时候，经常需要插入一些图象什么的，假设要插入的图象很多，按照常规方法来操作就显得非常麻烦。我们可以利用拖放技巧来很好地解决这个问题。首先我们把Dreamweaver的操作窗口变成活动窗口，以腾出空间来显示Explorer窗口，找到要插入的图象文件后，把它们一一用鼠标拖动到网页的适当部位，Dreamweaver将自动把这些图象的url添加到文件的HTML代码中，当然这里要求被拖动的图象文件必须是gif、jpg等web图象格式的文件。对于已经在网页中的图象也是一样，直接拖过来就可以了。但如果被拖动的图象上有超级链接，就不可以再使用拖动技术了，因为那时拖过来的仅仅是超级链接地址。
2、活用Format Table命令
在复杂的网页设计中，表格的应用是最多的，因为利用表格可以自由地控制文本和图象在网页上出现的具体位置，从而使整个网页看上去紧凑统一。Dreamweaver在这方面也不甘落后，我们可以使用其中的“Format Table”(格式化表格)命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式，先将光标置于表格的任意一个单元格内，再选择“Command”→“Format Table”命令， 在随后出现的对话框中，从左边的列表中选择一个设计方案。按“Apply” 键来查看效果，如果不满意的话，还可以重新设置或者修改部分参数的值，如边界粗细，背景颜色等等。
10、善用快捷键
为了提高操作的效率，我们可以在Dreamweaver中使用快捷键，例如使用Ctrl-B或Ctrl-I来为文字应用黑体或斜体格式，也可以使用以下一些键盘快捷键来为选中的文本应用HTML格式:Ctrl-0: 无格式 Ctrl-T: 段落 Ctrl-1: 标题 1 Ctrl-2: 标题 2 Ctrl-3: 标题 3 Ctrl-4: 标题 4 Ctrl-5: 标题 5 Ctrl-6: 标题 6
网页制作第6单元-表格、图层、行为、时间轴
第6单元表格、图层、行为、时间轴课程目标：●掌握在网页中插入表格方法●掌握网页中细线表格、立体表格等制作方法●掌握层的使用建议学时：理论3学时，实践3学时。
6.1 表格表格在网页中是一种用途非常广泛的工具，这不仅表现在它可以有序地排列数据，还表现在它可以精确地定位文本、图像及其他网页中的元素，使这些元素的水平位置、垂直位置发生细小变化，这在网页版面布局方面是非常重要的。
对于网页的排版布局来说，表格是不可或缺的工具。
作为一名网页设计人员，表格运用得熟练与否直接影响作品外观的好坏，因上掌握网页表格是十分重要的。
6.1.1 表格的插入要在页面中插入表格，可按以下步骤操作。
（1）使用菜单【插入】|【表格】，或常用工具栏的【表格】工具。
（2）弹出【表格】对话框，如图6-1所示。
图6-1 表格对话框行数：设置表格的行数。
列数：设置表格的列数表格宽度：设置表格的宽度，可使用“像素值”为单位，也可以使用“百分比”作为单位，在嵌套表格中常使用百分比。
边框粗细：设置表格线宽度，单位是像素。
单元格边距：设置表格单元格内部和表格线的距离。
单元格间距：设置单元格之间的距离。
其它可使用默认设置，按下确定后，在页面出现插入的表格，表格下方的淡绿色线条及数据为表格的宽度数据。
图6-2 插入表格示例6.1.2 设置表格属性选中表格后，属性面板变为了表格的属性面板，可以在属性面板中直接设置表格的各项属性。
图6-3 表格属性面板①表格Id：设置表格的ID号，一般可不输入。
②行、列：设置表格行数、列数。
③宽、高：设置表格的宽度、高度，有百分比和像素值两种单位可选。
④填充、间距：填充栏用于设置单元格内部和表格线的距离，间距栏用于设置单元格之间的距离，单位是像素。
⑤对齐：设置表格的对齐方式，有左对齐、居中对齐、右对齐、默认方式为左对齐。
⑥边框：设置边框的宽度，单位是像素。
⑦类：使用CSS中定义的类（见有关CSS章节）⑧列宽控制、行高控制按钮组：上行包含有清除表格宽度、将宽度转换为像素值、将宽度转换为百分比三个按钮。
网页设计与制作项目四 布局表格
3.在“分类”列表框中选择“标题\编码”选项，在其右侧的“标题” 文本框中输入“幽幽博客”。
单击“属性”面板中“背景图像”选择右侧的“浏览文件”按钮，弹出 “选择图像选文件”对话框，找到要插入的图片，单击“确定”按钮 4.选择“跟踪图像”分类，在其右侧的“跟踪图像”文本框中输入 “yyou.png”，在“透明度”栏中调整透明度为“41%”，单击“确定按 钮”，如图所示。
5.选择【查看】\【表格模式】\【布局模式】命令或按“A1t+F6”组合键 切换到表格布局模式。
6.在“插入”栏的“布局”选项卡中单击“绘制布局单元格” 按钮。 7.将鼠标光标移动到如图所示的图像的左上角，按住鼠标左键 不放并向右下角拖动。
8.拖动到图像右下角时释放鼠标右键，完成布局单元格的绘制， 鼠标光标自动定位在该布局单元格中。
返回
（二）项目分析
项目活动目标：学会设置跟踪图像的方法和布局表格的 方法。
重点：在网页中设置跟踪图像的方法。 难点：布局表格的方法。
返回
（三）任务实施
为幽幽博客设置跟踪图像
【操作步骤】 1.新建网页文档并保存为“yyou.html”，按“Ctrl+j”组合键打开“页面属 性”对话框。，如下图
2.选择“外观”分类，在其右侧的“大小”下拉列表框中选择 “像素”选项，在“背景图像”文本框中输入“12”，在其后的下 拉列表框中选择“像素”选项，在“背景图像”文本框中输入 “3.jpg”， ，如图 所示
3） 再在图像透明度中设定跟踪图像的透明度。如图所示：
知识大串联：
4）在当前网页中定位各个网页元素的位置。
使用了跟踪图像的网页在用Dreamweaver编辑时不 会再显示背景图案，但当使用浏览器浏览时正好相反，跟 踪图像不见了，所见的就是经过编辑的网页（当然能够显 示背景图案）。
网页设计第9章Dreamweaver的表格和网页版面设计PPT课件
9.1 网页中的表格
9.1.4.5 调整表格大小和外观 ▪ 调整表格宽度或高度：选择表格，拖动选择框右边
或底边的控制点。 ▪ 同时调整表格的高度和宽度：选择表格拖动选择框
右下角的控制点。 ▪ 若要精确指定表格大小：选定表格，在属性检查器
的“宽”和“高”文本框输入数值，在其后的下拉 列表框选择值的单位。 ▪ 在表格的属性检查器中可以设置表格的背景颜色、 背景图像、边框颜色等等属性。
进入布局模式。如图。 ▪ 在布局模式里，“插入”栏的“布局”中有两个可
用的按钮,它们是“布局表格”按钮和“绘制布局单 元格”按钮。此时，标准模式下的“表格”按钮和 “绘制层”按钮均呈不可用状态。（在标准模式下， “布局表格”按钮和“绘制布局单元格”按钮是不 可用的）。
16
9.2 用表格布局网页
17
9.2.3 绘制布局表格 ▪ 在布局模式下单击“插入”工具栏“布局”类别中的“布局
表格”按钮，然后将十字形指针移至工作区，按住鼠标左键 拖动，即可绘制出一个布局表格。按住Ctrl键可连续绘制出 多个布局表格。
18
9.2 用表格布局网页
9.2.4 更改布局表格和布局单元格的属性 设置布局表格的属性——使用布局表格的属性检查器。 如图:
dreamweaverdreamweaver的表格和网页版面设计的表格和网页版面设计表格在网页中的作用表格在网页中的作用表格的创建与编辑表格的创建与编辑利用表格对页面进行布局利用表格对页面进行布局利用布局试图对页面进行布局利用布局试图对页面进行布局dreamweaverdreamweaver中框架的创建方法中框架的创建方法超链接框架目标的指定超链接框架目标的指定框架和框架页的基本操作框架和框架页的基本操作9191网页中的表格网页中的表格表格是现代网页制作的一个重要组成部分
网页设计表格知识点
网页设计表格知识点表格是网页设计中常用的一种元素，可以用于展示数据、呈现排版布局、创建表单等功能。
掌握表格的使用方法和相关知识点，对于提升网页设计的质量和效果至关重要。
本文将介绍一些常见的网页设计表格知识点，帮助你理解和运用表格来实现各种设计需求。
一、表格的基础结构在网页设计中，表格的基本结构由行和列组成。
行（Row）是表格中的水平行，用于放置数据或其他内容；列（Column）则是表格中的垂直列，用于对数据进行分类归纳。
表格的交点处形成的小方块被称为单元格（Cell），单元格是表格中的最小单位，用于储存和展示具体的数据。
二、表格的属性设置1. 表格大小和边框样式在网页设计中，我们可以通过CSS样式来设置表格的大小和边框样式。
通过设置width和height属性，可以调整表格的宽度和高度，使其适应不同的页面布局。
同时，也可以通过border属性来设置表格的边框样式，包括颜色、粗细、边框样式等。
2. 表头和表体设置表格通常包含表头和表体两部分。
表头（Table Header）用于呈现表格的标题或说明信息，可以使用<th>标签进行定义。
而表体（TableBody）则用于展示具体的数据内容，可以使用<td>标签进行定义。
通过设置表头和表体的样式，可以使表格看起来更加清晰易读。
3. 合并单元格在一些情况下，我们需要将相邻的单元格合并为一个单元格，以实现特定的设计需求。
在HTML中，可以通过使用rowspan和colspan属性来实现单元格的合并，达到更灵活的布局效果。
三、表格的样式设计1. 表格背景颜色和边框样式通过设置CSS样式，可以为表格添加背景颜色或背景图片，使其与页面整体设计相协调。
同时，还可以调整表格的边框样式，例如设置圆角边框或使用阴影效果，增加表格的美观性。
2. 表格文字和数字样式表格中的文字对于信息的传达非常重要，我们可以通过设置字体、大小、颜色等样式属性，使表格中的文字更加清晰易读。
网页设计表格实训心得体会
网页设计表格实训心得体会在进行网页设计表格的实训过程中，我收获了很多经验和体会。
下面我将根据自己的实际经历与感受，总结出以下几点心得体会。
首先，在进行网页设计表格的过程中，我深刻体会到了设计的重要性。
一个好看、美观的表格能够吸引用户的眼球，使用户愿意去花时间与其进行互动和操作。
因此，我在设计表格时注重整体布局的合理性，选用了合适的颜色、字体和图标，提高了用户体验。
同时，我也了解到设计不仅仅是美观，更要考虑到实用性和用户友好性。
例如，我在设计表格时，合理划分了行列，并且为不同的数据类型选择了不同的输入框，让用户能够更方便地填写和阅读表格。
其次，在进行网页设计表格的过程中，我发现了数据交互的重要性。
网页设计的最终目的是为了让用户得到所需的信息，并且能够方便地与之进行交互。
因此，在设计表格时，我充分考虑了用户的需求，并且通过合理的交互方式来实现数据的传递和处理。
例如，我在表格中加入了一些按钮和链接，实现了对数据的查询、编辑、删除等操作，提高了用户对数据的掌控能力。
同时，我也在表格中加入了一些提示信息和错误检测机制，帮助用户更好地输入和处理数据。
再次，在进行网页设计表格的过程中，我体会到了团队合作的重要性。
网页设计是一个复杂的过程，需要不同角色的人员共同参与和协作。
在实训过程中，我与同学们共同商议和讨论了表格的设计方案，并且分工协作，各负责不同的部分。
通过团队合作，我们互相学习和借鉴，共同讨论和解决问题，最终完成了一个功能完备且美观的表格设计。
这让我深刻认识到了团队合作在网页设计中的重要性，懂得了团队合作不仅仅是分工合作，更要积极沟通和分享。
最后，在进行网页设计表格的过程中，我也遇到了一些困难和挑战。
例如，对于表格的布局和样式的选择，我在一开始并不是十分确定，需要多次尝试和修改，才能找到一个最合适的方案。
另外，由于不同浏览器对网页的兼容性存在差异，我在测试表格时也遇到了一些兼容性问题，需要耗费一定时间去调试和解决。
网页设计表格
8.4.2 设置表格数据对齐方式
2、单元格数据垂直对齐 在<td>标签中使用valign属性，用于设定表格中某 一单元格数据的垂直对齐方式。可以设置表格的对 齐方式为：top、middle、bottom或baseline。 默认值为middle 。基本语法：
–
<td valign=” ”>…</td>
8.2.2 设置表格的背景图像
8.3表格大小
表格是网页布局中的重要元素，它有丰富的属性， 可以对其进行相关设置。
利用width和height属性指定像素值来设置表格及 单元格的宽度和高度，也可以通过表格宽度占浏览 器窗口的百分比值来设置表格的大小
8.3.1设置表格的宽度和高度
表格的宽度和高度
属性值为各种颜色代码（当border值不为0时设置此值有效）。
8.1.2设置表格的边框属性
<html> <head> <title>设置表格的边框属性</title> </head> <body> <table border=1> <tr><td>表格内容</td></tr> </table> <br>
–
默认情况下，表格的宽度和高度会根据内容自动调整。
基本语法：
–
<table
width=” ”
height=” ”>
8.3.1设置表格的宽度和高度
单元格的宽度和高度
–
width属性和height属性不但可以设置表格的大小，还 可以设置表格单元格的大小，为某一单元格设置width
网页设计与制作项目教程 单元4 表格与表格布局网页的制作
图4-15 设置tr、td标签属性后的表格
图4-16 插入图像后的表格
（6）合并第6行的1、2、3列。 使用“colspan”属性，合并第6行的1、2、3列后（注意：将6.2、 6.3的<td></td>都删除），接着，将6.1修改为“合计”。 代码为
<tr align="center"> <td colspan="3">合计</td> <td>3 423 243 243</td> <td>4 534 444 554</td> </tr>
（2）<thead></thead>：用于定义表格的头部，必须位于<table> </table>标记中，一般包含网页的logo和导航等头部信息。 （3）<tfoot></ tfoot >：用于定义表格的页脚，位于<table></table> 标记中<thead></thead>标记之后，一般包含网页底部的企业信息等。 （4）<tbody></tbody>：用于定义表格的主体，位于<table></table> 标记中<thead></thead>标记之后，一般包含网页中除头部和底部之 外的其他内容。
2．创建表格的基本语法 创建表格的基本语法格式如下：
<table> <tr> <td>单元格内的文字</td> …… </tr> …… </table>
网页设计 第三讲 表格的使用
你们准备好迎接Table的挑战了吗 你们准备好迎接Table的挑战了吗！！ 的挑战了吗！！
一、基本语法
1、表格的结构体： 表格的结构体：
<table> <tr> <td></td> </tr> </table>
2、表行：<tr></tr> 表行： 3、表项（单元格）：<td></td> 表项（单元格）： ）：<td></td> 一个表由<table>开始 </table>结束 表的内容由<tr>和 一个表由<table>开始，</table>结束，表的内容由<tr>和 开始， 结束， <td>定义和组成的 <tr>指明了表的一个行 <td>定义和组成的。<tr>指明了表的一个行，表有多少行就有 定义和组成的。 指明了表的一个行， 多少个<tr>；表有多少个“格子”就有多少个<td>。 多少个<tr>；表有多少个“格子”就有多少个<td>。 表格重要的基本标记不多，但每个标记都有很多的属性， 表格重要的基本标记不多，但每个标记都有很多的属性，考虑到一 下子把这些属性都列出来，可能让初学者感到无从下手， 下子把这些属性都列出来，可能让初学者感到无从下手，所以我们 还是从表格的外观(即浏览器中显示的表格的样式) 还是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的 属性。 属性。
二、格属性的定义
<table>标签属性： <table>标签属性： 标签属性 1、border：表格边框线粗细，值为数字，单位是像素。 border：表格边框线粗细，值为数字，单位是像素。 2、bordercolor：表格边框线颜色，值为颜色代码。例子六 bordercolor：表格边框线颜色，值为颜色代码。 3、bordercolorlight：表格亮边框颜色，值为颜色代码。例子二 bordercolorlight：表格亮边框颜色，值为颜色代码。 4、bordercolordark：表格暗边框颜色，值为颜色代码。例子二 bordercolordark：表格暗边框颜色， 值为颜色代码。 5、width：表格宽度，值为数字或百分比数字，单位是像素或百分比。 width：表格宽度，值为数字或百分比数字，单位是像素或百分比。 6、height：表格高度，值为数字或百分比数字，单位是像素或百分比。 height：表格高度，值为数字或百分比数字，单位是像素或百分比。 7、align：表格放置的位置，值为Left、Center、Right。例子五或六 align：表格放置的位置，值为Left、Center、Right。 8、bgcolor：表格背景颜色，值为颜色代码。例子六 bgcolor：表格背景颜色，值为颜色代码。 9、background：表格背景图像，值为图像存放的路径。 background：表格背景图像，值为图像存放的路径。 10、cellspacing：表项与表项之间的空白，值为数字。例子三 10、cellspacing：表项与表项之间的空白，值为数字。 11、cellpadding ：表项中的内容与表项边框之间的空白，值为数字。例子四 11、 表项中的内容与表项边框之间的空白，值为数字。
网页布局设计中的核心工具“表格”
从 网络 的发展 来看 ，网页 设计 从无 到有 ，从低 级到 高级 ， 是基于技 术的原 因而 受到客观 的限制的 ， 因为受 传输带宽的 限 制， 最早的 网页是纯字 母和数字的 ， 没有 图片和声音更别说是动 画 了，只能将 占用空 间很小 的数字和字母来进行传输 。 由此看 来 网页最 初就是 在功 能性 的基础 之上 发展 起来 的 。 到今天同样上网也离不开使用它的功能 ， 所以网页的审美就首先 要考虑其功能的要素 。 么从功 能出发来看待 网页设 计 ， 那 我们就 必须考虑 ，使 用者如何从 网页 中得到功 能 ，如 何更好的得 到功 能。 就需 要站在使用者的 角度 来看 待网页设计 ， 能使 自己做 这 才 出的 网页 受欢迎 ， 从而达到基本 的 目的。有的 网页设计 师说 ：我 是设计师 ， 我站得 比普 通人高 ， 赏水 平也比他们高 ， 欣 应该 引导 潮流 ， 应该 引导 他们 学会欣赏美的 网页 。 作为设计师 引导潮流没 有错 ， 但是不应该采 用居 高临下的方式 ， 而是要 贴近 自己的使用 对象 ， 他们 所想 ，急他们所急 ，方便他们的使用 ，适时的将 自 想 己的设计风格融入到作 品中去 ， 接受他们的检验 ， 只有经得起考 验 的设计才是 好的设计 。而不是所 谓的阳春 白雪 ，成为孤 家寡 人， 不适用 。 作为设计师来说 ， 就是要把 自己的网页做得美一些 。 网页 能融 合文字 、图片 、 声音 动画于一身实现的基础上才能 谈 得上 设计的美 。 为 了使网页更美 观 ，可利 用表格控制 复杂的 网页布局 。在 复杂 的网页设 计中 ， 表格的应用是最 多的。 这一方面是 因为表 格 的信息量大 ， 它用最简洁的形式表达 了繁 杂的内容 ， 另一方面 它 还可以用来控制文本和 图像在页面上 出现的位 置， 把文字和 图像 规范地按 照行或列对齐 ， 使整个页面看上去 紧凑而统 一。 这对于 复杂版面的 网页排版来说 ， 有很大的帮助 。 于一个网页设计者 对 来说 ， 如果能够 灵活地应用表格 ， 就会让你的 网页看上 去井井有 条、美观 大方且具 有吸 引力 。 在 网页设计 中 ，版面的 设计是重 中之 重 ，如 果整体上 的版 面 没设计好 ，那么这个 网页 可以说是失败 的。利 用表格进行 分 栏 ，可以达到整齐排版 的 目的 ，美化你的网页外观 。所谓分栏 ， 就是让你 的网页变成一个大表格 ， 然后根据你 的版 面设计和内容 安排 ， 再将这个 表格分成不同的行和列 ， 调整 各个行和列 的宽 度 和高度 ，以达 到你排版的要求 。当然 了 ， 你还可以在表格之 中再 嵌套表格 ，以达 到更加 复杂的排版需要 。 住了 ， 了不让表格 记 为 边框线 出现在你的 网页 中 ，必须把边框线的粗细设 置为 ０ 在设 ， 计过程中你还以根据排版 的需要灵活设置单元格边距和单元格间 距的数值 。
华师大版《网页制作-表格的应用》说课稿
《网页制作——表格的应用》说课稿1．教材分析：《网页制作-表格的应用》是华中师范大学出版社出版的中小学信息技术教材初中版•第三册第二章《创建“我们的班集体”——网页制作》中第四节的内容。
它是教材“因特网基础知识Internet”进一步的延伸，是形成学生“了解熟悉——技巧掌握——综合运用”这一合理知识链的必要环节。
教材目的是让学生学会使用Word 这个办公软件来建立网页、申请和发布个人主页的方法，重点是掌握用Word制作网页的方法、及网页的申请和发布方法。
这一部分学习内容的重点是：编辑属于自己的信息，发布具有自己特色的信息。
主要涉及：文本信息的处理、信息素材的整理、对象的插入设置、网页效果的浏览及网页发布等相关方面的内容。
这章是属于在综合运用以前所学知识的基础上进一步提高、学习。
2．学生分析：教学对象是初二年级学生。
学生通过前面各章节内容的学习，对文本、图形、图像、声音、动画等多媒体信息的处理技术有了一定的使用经验，掌握了一些信息的搜集、整理、加工等方面实际处理能力，特别是通过对Internet相关知识的介绍及大量网站的浏览，对网页内容、结构、效果等设计的优劣都有了一定的感性认识，并且有了一定的分析、评判的能力，基本上完成了知识和能力的积累。
新的教育理念告诉我们，学生的需要就是我们教学的动力，基于此点，我设计了这一课时，目的在于进一步让学生掌握利用FrontPage办公软件制作网页的方法，同时培养学生的自我创新能力，进而唤起学生的生活体验，激发其灵感，因此这节课是基于网络环境下整合的教学提高课。
单就内容而言，对于已经掌握了Internet基础知识应该和Word相关操作技能的初二年级学生来说并不难，而且能把自己的制作的东西放在网上供别人浏览也是学生非常感兴趣的东西，因此在课堂上只需坚持精讲多练的原则，重难点知识让学生借助课本或老师提供的多媒体学习课件，或通过学习交流中心大家一起讨论解决，或教师作适当个别指导帮助解决。
《网页设计与制作》教案-第7讲 布局技术之一-表格一
第7讲布局技术之一-表格一1.1教学目标：◆知识目标1.掌握表格的基本操作2.掌握表格各项属性设置的作用◆技能目标能合理运用表格进行页面布局，能合理设置表格属性◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：掌握表格的插入和表格属性的设置。
1.3 教学难点理解表格进行页面布局的好处和表格各属性的作用。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题表格是网页设计制作时不可缺少的重要元素。
无论是用于对齐数据还是在页面上对文本进行排版，表格都体现出强大的功能。
它以简洁明了和高效快捷的方式将数据、文本、图像、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。
对于使用表格绘制页面布局，而非着重文字数据编排的设计来说，手动绘制表格布局是最佳方法，虽然这种方法极其容易建立表格，但不容易掌握尺度，因为其手动操作的特性，所以非常适合于制作网页版面，但对于内容的编排，就不如标准模式的标准那么方便。
标准表格是表格应用的另一种方法，它以几行几列的方式插入到页面，然后将图像、文字等内容插入表格，即可定位和编排这些内容。
二、使用表格在Dreamweaver MX 2004中，可以导入外部数据文件，还可以将网页中的数据表格导出为纯文本的数据文件。
表格的格式控制能力使设计者可以使用表格来构造网页的框架。
先用较大的表格对网页的版面进行大致的控制，再使用嵌套的表格对细节进行刻画。
使用表格排版的页面在不同的平台、不同的分辨率的浏览器里都能保持布局，所以表格是网页中常用的版面控制和制作模板的强有力的工具。
0.1插入表格Dreamweaver MX 2004提供了强大的工具进行表格编辑，使网页设计者可以对几乎所有的表格属性进行控制。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
表格
【表格或单元格的大小】 表格或单元格的大小】
格式如下： 格式如下： <table width="size" height="size"> size：可用像素或用占浏览器显示区域的百分比值。 ：可用像素或用占浏览器显示区域的百分比值。 <td width="size" height="size">
表格
【表格行、列或单元格的填充色】 表格行、列或单元格的填充色】
格式如下： 格式如下：
<table bgcolor="blue"> <tr bgcolor="#0000ff"> <td bgcolor="rgb(0,0,255) "> <th bgcolor="rgb(0%,0%,100%)">
表格
格式如下： 格式如下： 跨列合并： 跨列合并： <td colspan="value"> value值为要合并的列数 值为要合并的列数
表单 其他HTML 标记 1
表格
超链接 图像
跨行合并： 跨行合并： <td rowspan="value"> value值为要合并的行数 值为要合并的行数
例子
表格的作用
表格
【表格边框的属性】 表格边框的属性】
border ：设置表格的边框粗细，如果值为 （默认值），则不显 设置表格的边框粗细，如果值为0（默认值）， ），则不显 示表格边框 。
单元格间距， • cellspacing：设置单元格间距，即单元格边框线之间的距离。 ：设置单元格间距 即单元格边框线之间的距离。
表格
【表格的概念】 表格的概念】
什么是表格
表格
1 超链接 图像
表格将文本与图片按 行、列来排列，使得页 面更规则、更整齐，并 使条目更清晰。
表单
其他HTML 标记
表格
【表格的结构】 表格的结构】
表格标记<table>…</table>的格式如下： 的格式如下： 表格标记 的格式如下
<table> <tr> <td>第一行第一单元格 第一行第一单元格</td> 第一行第一单元格 <td>第一行第二单元格 <td>第一行第二单元格</td> 第一行第二单元格</td> <td>第一行第三单元格 第一行第三单元格</td> 第一行第三单元格 </tr> <tr> <td>第二行第一单元格 第二行第一单元格</td> 第二行第一单元格 <td>第二行第二单元格 第二行第二单元格</td> 第二行第二单元格 <td>第二行第三单元格 第二行第三单元格</td> 第二行第三单元格 </tr> </table>
表格
【表格边框的属性】 表格边框的属性】
• Cellpadding：设置单元格边距，即单元格中的文本离单元 ：设置单元格边距， 格边框的距离。 格边框的距离。
• align：整个表格的对齐方式，其值可为 、right和 ：整个表格的对齐方式，其值可为left、 和 center <table border="0" cellspace="10" cellpadding="5" align="center">
表格
【单元格中内容的对齐方式】 单元格中内容的对齐方式】
格式如下： 格式如下： <td align="alignment" valign="alignment"> align： 水平对齐方式，其值可以为：left、center和 right。 ： 水平对齐方式，其值可以为： 、 和 。 valign：垂直对齐方式，其值可以为：top、middle和 ：垂直对齐方式，其值可以为： 、 和 bottom。 。
表格
【表格外框属性frame】 表格外框属性 】
<table frame="value"> value值可以为：box、above、below、hsides、 vsides 、 值可以为： 值可以为 、 、 、 、 lhs、rhs和void。 、 和 。
above
below
hsides
vsides
lhs void
rhs
例子
表格
【表格内框属性rules】 表格内框属性 】
<table rules="value"> value值可以为：all、rows、cols、none 值可以为： 、 值可以为 、 、
rows
cols
none 背景表 格例子
表格
【表格中单元格的合并】 表格中单元格的合并】
【表格边框的颜色】 表格边框的颜色】
有三个属性描述表格边框线的颜色 : bordercolor：边框颜色 ： bordercolordark：暗边框 ： bordercolorlight：亮边框 ：
Bordercolor=“blue”
Bordercolorlight=“red”
Bordercolordark=“black”
表格
超链接 图像
1
表单
其他 HTML标 记
例子
表格
;这个标签来告诉电脑，这是一个表格； 这个标签来告诉电脑，这是一个表格； 利用 这个标签来告诉电脑 一组<TR></TR>是设定一横列的开始； 是设定一横列的开始； 一组 是设定一横列的开始 一组<TD></TD>则是设定一个栏位； 则是设定一个栏位； 一组 则是设定一个栏位 文字就是要摆在<TD></TD>这里面。 这里面。 文字就是要摆在 这里面
【数据的输入】 数据的输入】
【表格特效】 表格特效】
【网页的布局】 网页的布局】
为单元格指定的尺寸有时与浏览器中显示的不符， 为单元格指定的尺寸有时与浏览器中显示的不符，因为 会受到整表大小和其他单元格大小的影响。 会受到整表大小和其他单元格大小的影响。
表格
【标题单元格】 标题单元格】
如果单元格是标题单元格，可以用 标记取代<td>标记， 标记， 如果单元格是标题单元格，可以用<th>标记取代 标记取代 标记 <th>单元格中的内容会以粗体居中的格式显示。如下行所示： 单元格中的内容会以粗体居中的格式显示。如下行所示： 单元格中的内容会以粗体居中的格式显示 <th>table header appear bold and centered</th> 也可以在<table>和</table>标记之间添加 和 标记之间添加<caption>标记 也可以在 标记之间添加 标记 定义表格的标题，其格式如下： 定义表格的标题，其格式如下： <caption align="top"> 标题文字 </caption> align：“top”或“bottom”，“top”指定标题在表格正上方 ： 或 ， 指定标题在表格正上方 并居中显示， 指定标题显示在表格的正下方。 并居中显示，“bottom”指定标题显示在表格的正下方。 指定标题显示在表格的正下方