第3章 HTML网页布局.ppt

第3章 HTML网页布局 3.1表格 表格以行与列的形式简明扼要地表达相关内容，结构严谨且效果直观。表格通常所含的信息量非常大，能够把许多相互关联的数字和信息集中起来。一张表格可以非常直观地表示出需要用大段文字描述的内容信息。另外，在制作网页时，表格除了组织和显示数据之外，还具有布局页面的作用。表格可以将文本和图片等元素按行、列排列，实现网页的布局要求。 3.1.1表格的基本概念与结构 表格是网页中常见的一种页面元素，由行和列组成。行和列交叉构成了表格的单元格，单元格中包含表格的数据，每个表格还有特定的标题。 创建表格主要用到4个标签：table、tr、th和td。在一个最基本的表格元素中，必须包含一组table标签、一组tr标签和一组td标签。 创建表格的语法格式如下： table tr td（th）第一行第一列单元格内容/td（/th） td（th）第一行第二列单元格内容/td（/th） …… td（th）第一行第n列单元格内容/td（/th） /tr tr td第二行第一列单元格内容/td td第二行第二列单元格内容/td …… td第二行第n列单元格内容/td /tr …… tr td第m行第一列单元格内容/td td第m行第二列单元格内容/td …… td第m行第n列单元格内容/td /tr /table （1）table…/table：该标签对用于定义整个表格，表格中的所有内容都必须位于table和/table之间。一个表格元素是由多个横行（tr）、单元格（td）和表头单元格（th）子元素组成的。 （2）caption…/caption：该标签对用于定义表格的标题，标题文本位于caption与/caption之间。表格标题标签不是必需的，但如果使用，就必须放置在table之后。 （3）tr…/tr：tr标签定义表格的行，必须位于table和/table之间，结束标签/tr可以省略，在一对tr…/tr标签内可建立一行表格，也可以包含多组由td或th标签所定义的单元格。表格有多少行就应该定义多少对tr标签。 （4）th…/th：该标签对用于定义表格的表头单元格，此单元格中的文字将显示为粗体。有多少个表头单元格就应该定义多少对th标签。表头单元格也可以省略。 （5）td…/td：该标签对用于定义表格列的单元格，一对td…/td标签将建立一个单元格。td标签必须放在tr标签内。单元格内的数据，必须位于td与/td之间，表格中有多少个单元格就应该定义多少对td标签。 3.1.2表格的基本属性 table标签的属性主要有border、bordercolor、width、height、align、bgcolor、background、cellspacing、cellpadding等，用于设置表格的边框、大小、背景颜色等。这些属性是可选的，也可以不设置属性值，而使用table标签的默认属性值。 1.设置表格边框和分隔线显示状态 如果不定义边框属性，表格将不显示边框，但大多数时候，需要显示边框。设置表格边框的语法格式如下： table border= 数值 border属性值为数字，表示表格边框宽度的像素数。例如，table border = 12表示表格的边框宽度为12个像素。如果不定义边框属性或border属性的值是0，表格将不显示边框。 1）设置边框显示状态 还可以将表格4个边框：左边框、右边框、上边框、下边框设置为显示或者隐藏。设置表格边框显示状态的语法格式如下： （1）显示整个表格边框： table frame=box （2）不显示表格边框： table frame=void （3）只显示表格的上下边框： table frame=hsides （4）只显示表格的左右边框： table frame=vsides （5）只显示表格的上边框： table frame=above （6）只显示表格的下边框： table frame=below （7）只显示表格的左边框：table frame=lhs （9）只显示表格的右边框：table frame=rhs 2）设置表格中的分隔线 表格中分隔线的显示效果同样可以进行设置。设置表格中分隔线的显示状态的语法格式如下： （1）显示所有分隔线：table rules=all （2）只显示组与组的分隔线：table rules=groups （3）只显示行与行之间的分隔线：table rules=rows （4）只显示列与列之间的分隔线：table rules=cols （5）不显示所有分隔线：table rules=none 2.设置表格边框的颜色 通过设置表