教你从0开始学习制作网页.ppt

1、第8章：表格的应用,1. 建立表格,表格是HTML非常重要的一项功能，利用其多种属性能够设计出多样化的表格，进行网页排版。表格是网页排版的灵魂。 添加表格 -table， tr， td 表格一般通过三个标记来创建。分别是表格标记, 行标记和单元格标记,这三对标记是需要遵循一定的嵌套规则的, 文字1 文字2 文字3 文字4 ,文字1 文字2 文字3 文字4,说明： 标记和标记分别标志着一个表格的开始和结束。 标记和标记分别标志着表格中一行的开始和结束。因此标记对必须嵌套在标记对中。表格中有几组标记对，就表示表格有几行。 标记表示一个单元格的起始和结束，也即表示一行中有几列。因此标记对必须嵌套在标

2、记对中。,2. 表格的基本属性,表格宽度 width和高度 height 默认的情况下，表格的宽度和高度是与表格内的文字相关的。是根据内容自动调整的。如果想制定表格的宽度使用 width属性，制定表格的高度使用height属性。语法： 表格的宽度和高度可以使具体的数值（单位是像素）也可以是百分比。,表格的对齐方式 align 表格的对齐方式是整个表格在网页中的位置。 语法： 对齐方式包括 left，center和right三种。,练习：,在网页中创建如下表格,3. 表格的边框,除了可以设置基本属性外，表格还可以设置边框效果，包括颜色宽度等。 边框宽度 border 默认情况下，表格是不显示边框

3、的。为了使得表格更加清晰可以使用border参数设置边框的宽度。语法： ,边框的颜色 bordercolor 默认的情况下，边框的颜色是灰色的。设置边框颜色的前提是边框的宽度border不能设为0 语法： ,内框的宽度 cellspacing 表格的内框宽度是指表格各个单元格之间的宽度。 语法：,表格内文字与边的距离 cellpadding 默认情况下，表格内的文字会紧贴着表格的边框。有时可以使用cellpadding参数来调整这一距离。,练习,更改前一练习中表格的属性 设置颜色为#9933cc 设置边框宽度为2，设置内框宽度为10，设置文字与边框的距离为3 再修改内框宽度为0，体验一下修改后

4、的效果。,4. 设置表格背景,为了突出表格还可以为表格设置与页面不同的背景 设置背景颜色 bgcolor 语法：,设置表格的背景图像 除了为表格设置背景色外，还可以设置背景图像，语法： ,练习：,1.将前一练习中的表格背景颜色更改为#77ffee 2. 使用课件文件夹中的图片素材设置表格的背景图片。,5. 修改表格的行属性,设定了表格的整体属性后，还可以对单独的一行表格进行属性设置。 高度的控制 height 当遇到一些表格中某一行的高度和其他行不同时，就需要使用height参数。该参数只对这一行有效。 语法： ,边框的颜色 与表格相同，对表格的行来说，也可以单独设置其外框的颜色 语法： 行背景： 语法: ,行文字的水平对齐方式 align 语法: 行文字的垂直对齐方式valign 语法：,8. 调整单元格属性,水平跨度 colspan 在一些复杂表格中水平跨度属性特别有用。 单元格水平跨度是指某个单元格可以跨多少列。也可以说是一个单元格向右打通的列的个数。 语法：, 成绩表 赵一 87 90 77 钱二 67 78 76 孙三 89 88 83 ,垂直跨度 rowspan 单元格除了可以在水平方向跨列，还可以在垂直方向上跨行。语法：,举例：, 图书分类 类