W3C标准网页制作 主讲教师：张 涛.

Presentation on theme: "W3C标准网页制作 主讲教师：张 涛."— Presentation transcript:

1 W3C标准网页制作 主讲教师：张 涛

2 第10讲、使用表格 10.1.制作表格 行标记TR属性 单元格标记TD属性 10.4.表格嵌套

3 10.1.制作表格 前面已经讲过，链接是一个网站的灵魂。在这里要讲的是，表格是网页排版的灵魂。无论是使用简单的HTML语言编辑的网页，还是具备动态网站功能的ASP，JSP，PHP网页，都要借助表格进行排版。浏览网站，会发现几乎所有的网页都或多或少地采用表格。可以说，不能够很好地掌握表格，就等于没有学好网页制作。     表格是用于排列内容的最佳手段，在HTML页面中，绝大多数页面都是使用表格进行排版的。     在HTML的语法中，表格主要通过3个标记来构成，表格标记、行标记、单元格标记。。 标记描述 <TABLE>．．．</TABLE> 表格标记 <TR>…</TR> 行标记 <TD>…</TD> 单元格标记

4 10.1.制作表格 10.1.1  制作表格 基本语法   <table>       <tr>          <td>…</td>          ……       </tr>       <tr>          <td>…</td>           ……       </tr>       ……    </table>   语法解释     <TABLE>标记代表表格的开始，<TR>标记代表行开始，而<TD>和</TD>之间的就是单元格的内容。     这几个标记之间是从大到小，逐层包含的关系，由最大的表格，到最小的单元格。     一个表格可以有多少个<TR><TD>标记，分别代表多行和多个单元格。

5 10.1.制作表格 10.1.2  表格的边框属性BORDER 默认情况下，表格的边框为0，我们可以为表格设置边框线。 基本语法 <TABLE BORDER=value> 语法解释 通过BORDER属性定义边框线的宽度，单位为像素。 设定表格边框线的宽度。 10.1.3  表格的宽度和高度属性WIDTH，HEIGHT     默认情况下，表格的宽度和高度根据内容自动调整，我们可以手动设置表格的宽度和高度。 基本语法 <TABLE WIDTH=value HEIGHT=VALUE> 语法解释 通过WIDTH属性定义表格的宽度，HEIGHT属性定义表格的高度，单位为像素或百分比。如果是百分比，则可分为两种情况：如果不是嵌套表格，那么百分比是相对于浏览器窗口而言；如果是嵌套表格，则百分比相对的是嵌套表格所在的单元格宽度。详见后面章节的介绍。 设定表格的宽度和高度。

6 10.1.制作表格 10.1.4  表格的边框色属性BORDERCOLOR 为了美化表格，可以为表格设定不同的边框颜色。 基本语法 < table  Bordercolor=color_VALUE> 语法解释 定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。设定表格边框的颜色。 10.1.5  表格的亮边框色属性BORDERCOLORLIGHT     在表格中，可以单独定义左上边框的颜色，也可以定义单元格中右下边框的颜色，这两个位置的边框色我们称之为亮边框色。 基本语法 <table  Bordercolorlight=color_VALUE> 语法解释 定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。设定表格亮边框的颜色。 10.1.6  表格的暗边框色属性BORDERCOLORDARK     在表格中，可以单独定义右下边框的颜色，也可以定义单元格中左上边框的颜色，这两个位置的边框色我们称之为暗边框色。 基本语法 <TABle  Bordercolordark=color_VALUE> 语法解释 定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现 设定表格暗边框的颜色。

7 10.1.制作表格 10.1.7  表格的背景颜色属性BGCOLOR 通过BGCOLOR属性，可以设定表格的背景颜色。 基本语法 <table  bgcolor=color_VALUE> 语法解释 定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。 文件范例：10-7.htm 设定表格背景的颜色。 10.1.8  表格的背景图像属性BACKGROUND     除了背景颜色之外，我们还可以为表格设置背景图像，可以使用任何的GIF或者JPEG图片文件。 基本语法 < table  BACKGROUND=FILE_name> 语法解释 定义背景图像时，写下图片文件的完整路径或者相对路径。 文件范例：10-8.htm 设定表格的背景图像。

8 10.1.制作表格 10.1.9  单元格间距属性CELLSPACING 表格的单元格和单元格之间，可以设定一定的间距，这样可以使表格不会过于紧凑。 基本语法 <table  CellSpacing=value> 语法解释 单元格的间距以像素为单位。 文件范例：10-9.htm 设定表格的单元格间距。   单元格边距属性CELLPADDING 单元格边距是指单元格内容和边框之间的距离。 基本语法 < table   Cellpadding=value> 语法解释 单元格的边距以像素为单位。 文件范例：10-10.htm 设定表格的单元格边距。   表格的水平对齐属性ALIGN 在水平方向上，可以设定表格的对齐方式，分别有居左、居中、居右3种。 基本语法 <table   ALIGN=“LEFT”> <table   ALIGN=“CENTER”> <table   ALIGN=“RIGHT”> 语法解释 LEFT为居左，CENTER为居中，RIGHT为居右。 文件范例：10-11.htm 设定表格的水平对齐方式。

9 10.2.行标记TR属性 <TR>标记的属性和<TABLE>标记的属性非常相似，用于设定表格中某一行的属性，
属性描述 ALIGN 行内容的水平对齐 VALIGN 行内容的垂直对齐 BGCOLOR 行的背景颜色 BORDERCOLOR 行的边框颜色 BORDERCOLORLIGHT 行的亮边框颜色 BORDERCOLORDARK 行的暗边框颜色 

10 10.2.行标记TR属性 <TR>标记的属性和<TABLE>标记的属性非常相似，用于设定表格中某一行的属性，
属性描述 ALIGN 行内容的水平对齐 VALIGN 行内容的垂直对齐 BGCOLOR 行的背景颜色 BORDERCOLOR 行的边框颜色 BORDERCOLORLIGHT 行的亮边框颜色 BORDERCOLORDARK 行的暗边框颜色 

11 10.3.单元格标记<TD>属性 <TD>标记的属性和<TABLE>标记的属性非常相似，用于设定表格中某一单元格的属性。

12 10.4.表格嵌套    在页面中，排版是通过表格的嵌套来完成的。即一个表格内部可以套入另一个表格。原因如下： 首先，网页的排版有时会很复杂，在外部需要有一个表格控制总体布局。如果这时一些内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格制作带来困难。 其次，浏览器在解析网页的时候，是将整个表格的结构下载完毕之后才显示表格。如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到网页的内容。 出于这些原因，引入嵌套表格。由总表格负责整体的排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中。这样一来各司其职，互不冲突。如图10-28所示的就是一个非常典型的嵌套表格。

13 10.4.表格嵌套

14 谢谢!