《表格和页面布局》PPT课件

❖ 表格的三个基本元素：
（1）行（水平线的间隔，用<tr>…</tr>定义）
（2）列（垂直线的间隔）
（3）单元格（行和列的交叉元素，
用<td>…</td>定义）
精选课件ppt
2
创建表格
❖ 在网页中插入表格 （1）新建一个HTML文档。 （2）将光标空位在需要插入表格的位置，在 “插入”栏的“常用”选项卡中单击“插入 表格”按钮。（也可用菜单实现，或用快捷 键Ctrl+Alt+T） （3）在弹出的对话框中作相关设置。 （4）单击确定即可。
❖ 使用交替的颜色格式化表格 如果以前使用了交替的颜色格式化表格，在重新排序后，可 能会发生混乱。如果不选择“排序的行保留TR属性”复选 框，就可以避免这种情况的发生。
❖ 将第一行排序：在默认的情况下，Dreamweaver不对第一 行排序，如果表格中无标题行，选择“排序包含第一行”复 选框。
精选课件ppt
4
操作表格
❖ 选择表格及其元素 方法多种： （1）单击表格的左上角（光标呈十字型时），或 单击表格右边缘及下边缘或单元格内边框的平行光 标线单击。 （2）在单元格中单击，“修改”>“表格”>“选中 表格”。 （3）在状态栏中单击<table>标签，最常用。 （4）在单元格中单击，使用两次Ctrl+A。
添加或删除行（列）
❖ 添加行或列 （1）要添加行，单击“修改”>“表格”>“插入 行”。也可在右键的关联菜单中选择。（默认被插 入的行是在光标的上边） （2）同理，要添加列，只须把“插入行”改成 “插入列”。（默认被插入的列是在光标左边）
❖ 要一次插入多行和多列：可以使用“插入行或列” 命令。
❖ 小技巧：将光标定位在最后一行的最后的一个单元 格中，按下Tab 键可快速追回一行。
精选课件ppt
9
表格属性面板
精选课件ppt
10
对表格中的数据进行排序
❖ 具体步骤： （1）在网页中插入表格，填入数据项目。 （2）使用鼠标选择要重新排序的表格。 （3）打开“命令”菜单，选择“表格排序” 命令。打开如下对话框。 （4）在对话设置框中，可以选择多种排序方 式。还可以使用二级排序。
精选课件ppt
“对 THEAD 行（如果存在）进行排序” 指定使用与 body 行相同的条件对表格 thead 部分（如果 存在）中的所有行进行排序。（请注意，即使在排序后 thead 行仍将保留在 thead 部分中并仍显示在表格的顶 部。）
精选课件ppt
14
对表格中的数据进行排序
“对 TFOOT 行（如果存在）进行排序” 指定使用与 body 行相同的条件对表格 tfoot 部分（如果存 在）中的所有行进行排序。（请注意，即使在排序后 tfoot 行仍将保留在 tfoot 部分中并仍显示在表格的底部。）
“排序的行保留 TR 属性” 指定排序后表格行的属性（例如颜色）应该保持与相同内 容的关联。如果表格行使用两种交替的颜色，则取消选择 此选项以确保排序后的表格仍具有颜色交替的行。如果行 属性特定于每行的内容，则选择此选项以确保这些属性保 持与排序后表格中正确的行关联在一起。
精选课件ppt
15
注意事项
精选课件ppt
13
对表格中的数据进行排序
“再按”/“顺序” 确定在不同列上第二种排序方法的排序顺序。在“再按” 弹出式菜单中指定应用第二种排序方法的列，并在“顺序” 弹出式菜单中指定第二种排序方法的排序顺序。
“排序包含第一行” 指定表格的第一行应该包括在排序中。如果第一行是标题， 不应移动，则不选择此选项。
精选课件ppt
5
操作表格
❖ 选择表格的行或列 （1）将光标定位于行的左边缘或列的上端， 出现选择箭头时，单击即可。 （2）也可使用拖动鼠标的方法来实现选择多 行或多列。
❖ 选择单元格 在一个单元格中单击，按住Shift键，可选择 连续区域。按住Ctrl键，可以选择不连续的 单元格。
精选课件ppt
6
11
对表格中的数据进行排序
❖ 排序表格对话框
精选课件ppt
12
对表格中的数据进行排序
“排序方式” 确定哪个列的值将用于对表格的行进行排序。
“顺序” 确定是按字母还是按数字顺序以及是以升序（A 到 Z，小数字到大数字）还是降序对列进行排序。 当列的内容是数字时，选择“按数字顺序”。如 果按字母顺序对一组由一位或两位数组成的数字 进行排序，则会将这些数字作为单词进行排序 （排序结果如 1、10、2、20、3、30），而不是 将它们作为数字进行排序（排序结果如 1、2、3、 10、20、30）。
精选课件ppt
7
Biblioteka Baidu
添加或删除行（列）
❖ 删除行或列 在需要删除行或列的位置单击，执行下列操 作（教材中有误，请注意！） （1）删除行：“修改” >“表格” >“删除 行”。 （2）删除列：“修改” >“表格” >“删除 列”。
❖ 小技巧：在表格选中一整行或一整列，然后
按下Delete键。
精选课件ppt
精选课件ppt
3
插入表格对话框
❖ 边框（border）:输入表格线的像素宽度。如果不需要显示 表格线。则输入为0。
❖ 单元格填充（Cell Padding）:它表示输入单元格的内容与 单元格边线之间的像素数。单元格的上、下、左、右都是一 个值。
❖ 单元格间距（Cell Spacing）：它单元格之间的距离的像素 数。
8
拆分与合并单元格
❖ 拆分单元格具体步骤： （1）在要拆分的单元格中单击。 （2）“修改”>“表格”>“分割单元格”命令，或在属性中 单击分割单元格按钮。（左下角）（3）可以在弹出面板中， 选择“行”或“列”，还可以是多行或多列。
❖ 合并单元格具体步骤： 注：要合并的单元格必须是连续且是矩形。 （1）选中要合并的多个单元格。 （2） “修改”>“表格”>“合并单元格”命令，或在属性面 板中使用合并单元格按钮。 合并后每个单元格的内容都将放在一个单元格里面。
第三章
使用表格
精选课件ppt
1
表格的功能
❖ 无论用于对齐数据还是在页面上文本进行排版，表 格都体现了强大的功能。它几乎成了现在所有大型 网站排版的首选布局工具。
❖ 表格与层能互相转换。虽然层也能控制元素在页面 中的显示位置，但是层对老版本的浏览器的支持不 是很好。所以，我们要更好的运用表格来布局。