网页设计与制作课件第7章.ppt

案例说明本案例将通过制作2018年世界杯亚洲区预选赛分组表,来学****表格的创建、与表格相关的HTML标签,及使用CSS美化表格的方法(如设置单元格高度、宽度、颜色和边框等)。案例一创建2018世界杯亚洲区预选赛40强分组表——构建和美化表格相关知识表格(Table)是由一个或多个单元格构成的集合,表格中横向的多个单元格称为行(在HTML语言中以<tr>标签开始,</tr>标签结束),垂直的多个单元格称为列(以<td>标签开始,</td>标签结束),行与列的交叉区域称为单元格,网页中的元素就放置在这些单元格中。一、,并新建一个网页文档。首先在文档页面中要插入表格的位置单击,以确定插入点位置。步骤01单击“插入”面板“HTML”类别中的“Table”按钮,打开“Table”对话框,设置各项参数后,单击“确定”按钮,即可插入表格。步骤02表格宽度:设置表格宽度值,如不设置该值,表格宽度将随其中内容而改变。在Dreamweaver中,最常用的单位是像素和百分比。边框粗细:是指整个表格边框的粗细,标准单位是像素。整个表格外部的边框叫外边框,表格内部单元格周围的边框叫内边框。单元格边距:也叫单元格填充,是指单元格内部的文本或图像与单元格边框之间的距离,标准单位是像素。单元格间距:是指相邻单元格之间的距离,标准单位是像素。标题:设置表格有无标题单元格(又叫表头)及标题单元格位置,标题单元格与普通单元格在设计视图中看不出有什么区别,但在代码界面中是用不同的标签表示的,普通单元格是用td表示,标题单元格是用th表示。辅助功能区域的“标题”:用于设置表格的标题文字。<tablewidth="70%"border="0"cellspacing="0"cellpadding="0"><tr><thscope="col">&nbsp;</th><thscope="col">&nbsp;</th></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table>二、表格的HTML标签与其他HTML元素一样,表格也是由标签组成的。例如,以下HTML代码是一个包含3行2列,其中第一行为标题行的表格HTML结构。<table></table>标签对为表格的主体标签,表格的其他组成元素,如行标签、单元格标签等都包含在<table></table>标签对之间。<table><tr></tr>标签对为表格的行标签,表格有多少行,就有多少个<tr></tr>标签对。在每行中可以包含多个单元格。<tr><td></td>标签对为表格的单元格标签,其包含在<tr></tr>标签对中。单元格用于存放表格要显示的内容,可以是任意的HTML内容,这些内容位于<td></td>标签对之间。在表格的一行中可以包含多个单元格。<td><th></th>标签对为表格特有的表示表头单元格的标签,前面在Dreamweaver的设计界面中创建表格时,曾在“表格”对话框中选择表头所在位置(“标题”设置项)。<th><caption></caption>标签对为table表格特有的表示标题的标签,同<th>标签不同的是,<caption>标签不需要合并,它本身就只有一列,同时<caption>标签的位置是默认居中的。<caption>三、使用CSS设置表格和单元格属性同任何HTML元素一样,使用CSS也可以设置表格和单元格属性,包括边框、大小和颜色等。使用CSS设置单元格内文字颜色,以及表格或单元格背景的方法与在项目五中学****的设置文字颜色和网页元素背景的方法相同。例如,可以使用color属性设置单元格内文字颜色;使用background-color属性设置单元格、行或表格背景颜色;使用background-image属性设置表格、行或单元格背景图像。,与在项目五中学****的设置图像和其他块元素的方法相同。例如,可以使用width属性设置整个表格或单元格宽度;使用height属性设置整个表格或行的高度;使用border属性设置表格或单元格的边框。如代码table{border:1pxsolidred;},表示设置整个表格的边框粗细为1像素,实线,红色。需要注意的是,如果使用CSS只设置了表格(<table>标签)的边框,则设置的是整个表格的外边框,此时各单元格并不会受到影响,因此还需要单独为单元格设置相应的边框。