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

第8章：表格的应用 1. 建立表格 表格是HTML非常重要的一项功能，利用其多种属性能够设计出多样化的表格，进行网页排版。表格是网页排版的灵魂。 添加表格 -table， tr， td 表格一般通过三个标记来创建。分别是表格标记table/table, 行标记tr/tr和单元格标记td/td 这三对标记是需要遵循一定的嵌套规则的 说明： table标记和/table标记分别标志着一个表格的开始和结束。 tr标记和/tr标记分别标志着表格中一行的开始和结束。因此tr标记对必须嵌套在table标记对中。表格中有几组tr…/tr标记对，就表示表格有几行。 td/td标记表示一个单元格的起始和结束，也即表示一行中有几列。因此td标记对必须嵌套在tr标记对中。 2. 表格的基本属性 表格宽度 width和高度 height 默认的情况下，表格的宽度和高度是与表格内的文字相关的。是根据内容自动调整的。如果想制定表格的宽度使用 width属性，制定表格的高度使用height属性。语法： table width=表格宽度 height=表格的高度 表格的宽度和高度可以使具体的数值（单位是像素）也可以是百分比。 表格的对齐方式 align 表格的对齐方式是整个表格在网页中的位置。 语法：table align=“对齐方式” 对齐方式包括 left，center和right三种。 练习： 在网页中创建如下表格 3. 表格的边框 除了可以设置基本属性外，表格还可以设置边框效果，包括颜色宽度等。 边框宽度 border 默认情况下，表格是不显示边框的。为了使得表格更加清晰可以使用border参数设置边框的宽度。语法： table border=边框的宽度 边框的颜色 bordercolor 默认的情况下，边框的颜色是灰色的。设置边框颜色的前提是边框的宽度border不能设为0 语法： table border=边框的宽度 bordercolor=“边框颜色” 内框的宽度 cellspacing 表格的内框宽度是指表格各个单元格之间的宽度。 语法：table cellspacing=内框宽度 表格内文字与边的距离 cellpadding 默认情况下，表格内的文字会紧贴着表格的边框。有时可以使用cellpadding参数来调整这一距离。 练习 更改前一练习中表格的属性 设置颜色为#9933cc 设置边框宽度为2，设置内框宽度为10，设置文字与边框的距离为3 再修改内框宽度为0，体验一下修改后的效果。 4. 设置表格背景 为了突出表格还可以为表格设置与页面不同的背景 设置背景颜色 bgcolor 语法：table bgcolor=颜色代码 设置表格的背景图像 除了为表格设置背景色外，还可以设置背景图像，语法： table background=“背景图片的地址” 练习： 1.将前一练习中的表格背景颜色更改为#77ffee 2. 使用课件文件夹中的图片素材设置表格的背景图片。 5. 修改表格的行属性 设定了表格的整体属性后，还可以对单独的一行表格进行属性设置。 高度的控制 – height 当遇到一些表格中某一行的高度和其他行不同时，就需要使用height参数。该参数只对这一行有效。 语法： tr height=行的高度 边框的颜色 与表格相同，对表格的行来说，也可以单独设置其外框的颜色 语法： tr bordercolor=“颜色代码” 行背景： 语法: tr bgcolor=“颜色代码” tr background=“图片地址” 行文字的水平对齐方式 align 语法: tr align=对齐方式 行文字的垂直对齐方式valign 语法：tr valign=对齐方式 8. 调整单元格属性 水平跨度 colspan 在一些复杂表格中水平跨度属性特别有用。 单元格水平跨度是指某个单元格可以跨多少列。也可以说是一个单元格向右打通的列的个数。 语法：td colspan=跨的列数 垂直跨度 rowspan 单元格除了可以在水平方向跨列，还可以在垂直方向上跨行。语法：td colspan=跨的行数 举例： 单元格对齐方式 语法：td align=“水平对齐方式” valign=“垂直对齐方式” 单元格的背景 语法：td bgcolor=“#背景颜色” td background=“图片地址” 单元格边框的颜色 语法：td bordercolor=“#颜色代码” * * table tr td文字1/td td文字2/td /tr tr td文字3/td td文字4/td /tr /table 文字1 文字2 文字3 文字4 table width=350 height=200 tr align=cent