《WEB前端开发实用案例教程》单元5 通讯录分组表—表格构建网页.pptx

《WEB前端开发实用案例教程》 第五单元 通讯录分组表 ——表格构建网页 常用表格对网页中元素定位，将复杂的元素有条理的分布到网页各个位置，当我们把表格的宽度定位固定像素值后，还能保证网页布局不会随浏览器窗口的大小变化而变化，当我们在表格输入文字时，可以让文字满格后自动换行，方便对文字的编辑。 教学目标： 掌握使用表格布局网页 灵活掌握表格调整的方法 能够合理利用表格对网页进行布局和规划 目录页/Contents 01 任务 1 月历制作——表格标签的灵活应用 02 任务 2 用户信息统计页面——CSS设置边框及内外边距 知识储备 01 任务1 月历制作——表格标签的灵活应用 【知识储备】 1. 表格的HTML标签 与其他HTML元素一样，表格也是由标签组成的。 1）表格主体标签<table> <table></table>标签对为表格的主体标签，表格的其他组成元素，如行标签、单元格标签等都包含在<table></table>标签对之间。 2）行标签<tr> <tr></tr>标签对为表格的行标签，表格有多少行，就有多少个<tr></tr>标签对。在每行中可以包含多个单元格。 3）单元格标签<td> <td></td>标签对为表格的单元格标签，其包含在<tr></tr>标签对中。单元格用于存放表格要显示的内容，可以是任意的HTML内容，这些内容位于<td></td>标签对之间。在表格的一行中可以包含多个单元格。 任务1 月历制作——表格标签的灵活应用 【知识储备】 4）表头标签<th> <th></th>标签对为表格特有的表示表头单元格的标签，在Dreamweaver的设计界面中创建表格时可以选择表头所在的位置。scope为<th>标签的属性，表示定义表头，"col"为属性值，表示将当前列的所有单元格和表头单元格联系起来。 5）标题标签<caption> <caption></caption>标签对为table表格特有的表示标题的标签，同<th>标签不同的是，<caption>标签不需要合并，它本身就只有一列，同时<caption>标签的位置是默认居中的。 任务1 月历制作——表格标签的灵活应用 【知识储备】 2. 合并和拆分单元格 要合并单元格，可先选中要合并的多个单元格，然后单击属性检查器中的“合并单元格”按钮；要拆分单元格，可将插入点置于要拆分的单元格中，然后单击属性检查器中的“拆分单元格”按钮，在弹出的对话框中选择需要拆分为的单元格类型，并输入要拆分为的行数和列数，然后单击“确定”按钮即可。 在Dreamweaver的设计界面中，在要选择的单元格上拖动鼠标可选中相应的单元格；按住Ctrl键依次单击要选择的单元格，也可同时选中多个单元格；单击网页文档底部状态栏中的相应标签 ，可选中整个表格，或选中插入点所在的行或单元格，应用见图5-1所示的表格属性。