中职 网页设计与制作案例教程第7章

中职网页设计与制作案例教程第7章工信版第7章

使用CSS设置表格样式37.1基础项目1：制作“通讯录”表格7.2知识库：表格的HTML标签和常用样式7.3基础项目2：制作“百度日历”页面7.4知识库：单元格的合并与拆分7.5提高项目：制作“NBA常规赛得分表”页面7.6拓展项目：制作“热门景点排行榜”页面目录7.1制作“通讯录”表格

45知识技能目标（1）掌握创建表格的方法。（2）掌握表格HTML标签的意义和用法。（3）初步掌握使用CSS样式美化表格的方法。7.1制作“通讯录”表格

6[!]

在传统的网页设计中表格一直占有比较重要的地位，曾用来对网页进行布局和显示数据，但因为布局繁琐且后期维护成本高，现在已经不常采用，而是多用于显示数据。7.2知识库：表格的HTML标签和常用样式77.2.1表格的HTML标签<table></table>标签对分别表示表格的开始和结束。表格的其他组成元素，如行、单元格等都包含在<table></table>标签对之中。表格标签<table>属性值描述width%、pixels规定表格的宽度。borderpixels规定表格边框的宽度。cellspacingpixels、%规定单元格之间的空白。cellpaddingpixels、%规定单元边框与其内容之间的空白。<table>可选的属性及含义8<tr></tr>标签对是表格的行标签。在<table></table>标签对中有多少<tr></tr>标签对，这个表格就有多少行。tr元素包含一个或多个

th

或

td

元素。

行标签<tr>7.2.1表格的HTML标签9<td></td>标签对定义表格中的标准单元格。HTML表单中有两种类型的单元格：表头单元格：包含表头信息（由th元素创建）标准单元格：包含数据（由td元素创建）单元格标签<td>7.2.1表格的HTML标签10单元格标签<td>7.2.1表格的HTML标签<td></td>标签对要包含在<tr>和</tr>标签对之中。一个表格被分为多行，每一行又被分为多个单元格。<td>可选的属性及含义属性值描述colspannumber规定单元格可横跨的列数。rowspannumber规定单元格可横跨的行数。alignleft、right、center、justify、char规定单元格内容的水平对齐方式。valigntop、middle、bottom、baseline规定单元格内容的垂直对齐方式。11<th></th>标签对定义表格中的表头单元格。在dreamweaver中创建表格时可以选择表头所在的位置（左侧、顶部或两者都有）。<th>标签常用的属性及含义与<td>相同。表头单元格标签<th>7.2.1表格的HTML标签12<caption></caption>标签对用来定义表格标题。caption标签必须紧随table标签之后。每个表格只能定义一个标题，通常这个标题会被居中于表格之上。标题标签<caption>7.2.1表格的HTML标签13

设置表格或单元格的宽度、高度的方法与网页上其它块元素的方法相同，用width属性设置表格或单元格的宽度，用height属性设置表格或单元格的高度。设置表格的宽度和高度7.2.2表格的常用CSS样式14语法格式：text-align:left|center|right;设置表格表格或单元格内容的水平对齐方式7.2.2表格的常用CSS样式15语法格式：vertical-align:middle|top|bottom;设置单元格内容的垂直对齐方式7.2.2表格的常用CSS样式普通单元格中内容的默认对齐方式是水平方向左对齐、垂直方向居中；表头单元格中内容的默认对齐方式是水平方向和垂直方向都居中。16

设置表格或单元格的文字属性和背景属性的方法与前面学过的如DIV、标题标签等其它网页元素的方法相同。设置表格或单元格的文字属性和背景属性7.2.2表格的常用CSS样式17语法格式：border:border-width|border-color|border-style;设置表格或单元格的边框7.2.2表格的常用CSS样式在设置表格边框时如果只给<table>标签设置边框属性，效果是给整个表格设置外边框，而各个单元格不受影响。如果希望每个单元格都显示边框，则要给<td>标签也设置边框属性。只给table标签设置了边框只给td标签设置了边框18语法格式：border-collapse:separate|collapse|inherit;设置表格边框双线合一7.2.2表格的常用CSS样式当使用CSS设置单元格边框时，如果给每个单元格都设置宽度为1像素的边框，那么相邻两个单元格的边框的实际宽度是1px+1px=2px，美观程度将受影响。此时可以使用border-collapse属性将表格相邻的边框双线合一。没有设置双线合一设置了双线合一197.3制作“百度日历”页面207.3制作“百度日历”页面知识技能目标（1）掌握合并单元格、拆分单元格操作的方法。（2）使用CSS样式进一步美化表格的方法。217.3制作“百度日历”页面制作结构部分227.3制作“百度日历”页面添加样式部分237.4知识库：单元格的合并与拆分

在Dreamweaver中要合并单元格可以先选中2个或以上的单元格，单击鼠标右键，在弹出的快捷菜单中选择【表格】菜单中的【合并单元格】247.4知识库：单元格的合并与拆分

拆分单元格先将光标移至要拆分的单元格中，单击鼠标右键，在弹出快捷菜单中选择【表格】菜单中的【拆分单元格】命