web 静态网页设计.ppt

第6章 表 格 主要内容 6.1表格简介 表格在网站应用中非常广泛，几乎所有的HTML页面中都或多或少地采用表格，表格可以方便灵活地实现对网页的排版，可以把相互关联的信息元素集中定位，使浏览页面的人一目了然，赏心悦目。所以说要制作好网页，就要学好表格，熟练掌握和运用表格的各种属性。 6.2.1表格基本标记 在HTML语法中，表格主要通过3个标签来构成：table、tr、td。 基本语法： table tr td…/td … /tr tr td…/td … /tr … /table 语法说明： （1）table:代表表格的开始， /table标记代表表格的结束。 （2）tr：代表行的开始，/tr标记代表行的结束。 （3）td:td标记之间是单元格的内容，可以是文字，也可以是其他标记，如一个按钮等。 （4）在一个表格中，tr的个数代表表格的行数，没对tr…/tr之间td的个数代表该行的单元个数。 表格标记 table…/table 用于定义一个表格的开始和结束 tr…/tr 定义一组行标记，一组行标记内可以建立多组由td标记所定义的单元格 td…/td 定义单元格标记， td标记必须放在tr标记内。 6.2.1表格基本标记 6.2.1表格基本标记 6.2.1表格基本标记 6.2.2表格标题 表格标题，就是对表格内容的简单说明，用caption标签实现。 基本语法： caption…/caption 语法说明： caption标记之间就是标题的内容。 6.2.2表格标题 6.2.2表格标题 6.2.3表格表头 表头，指表格的第一行，文字样式为居中、加粗显示，通过th标签实现。 基本语法： table tr th…/th … /tr tr td…/td … /tr … /table 6.2.3表格表头 6.2.3表格表头 6.2.4设置划分结构的表格 为了清楚区分表格结构，将一个表格分三个部分在网页上显示出来，HTML语言规定了thead、tbody、tfoot3个标签分别对应于表格的表首、表主体和表尾。 基本语法： thead…/thead tbody…/tbody tfoot…/tfoot 6.2.4设置划分结构的表格 6.2.4设置划分结构的表格 6.2.4设置划分结构的表格 6.3表格修饰 表格是网页布局中的重要元素，它有丰富的属性，可以对其进行相关设置。 6.3.1设置表格的边框属性 默认情况下表格边框为0，可以通过给表格添加属性及属性值，实现为表格设置边框线以及美化表格的目的，常见属性如表6-3所示。 基本语法： table border=” ” bordercolor=” ” bordercolorlight=” ” bordercolordark=” ” 语法说明： border属性用于设置边框的宽度，单位为像素；定义边框颜色的时候可以使用颜色的英文单词或6位十六进制颜色值。 6.3.1设置表格的边框属性 6.3.2设置表格的宽度和高度 默认情况下，表格的宽度和高度会根据内容自动调整。 基本语法： table width=” ” height=” ” 语法说明： （1）width和height的属性值可以是像素或百分比。 （2）对于非嵌套表格，百分比表示的是表格应该占据的浏览器窗口的百分比；对于嵌套表格，百分比表示的是相对嵌套表格所在的单元格宽度。 6.3.2设置表格的宽度和高度 6.3.2设置表格的宽度和高度 6.3.3 设置表格背景 表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表格背景颜色，以增加视觉效果。 基本语法： table bgcolor=” ” 6.3.3 设置表格背景 6.3.4 设置表格的背景图像 表格背景图像可以是GIF、JPEG或PNG三种图像格式。 基本语法： table backgruond=” ” 6.3.4 设置表格的背景图像 6.3.5 设置边框样式 在前面我们使用border属性时，每个单元格之间以及表格本身会出现边框，我们可以利用frame属性控制应该显示哪些表格边框，利用rules属性控制应该显示哪些内部边框。 基本语法： table frame=” ” rules=” ” 6.3