第7章表格的应用剖析.ppt

网页设计与制作 第7章 表格的使用 本章内容 7.1 表格概述 7.2 使用Dreamweaver8创建表格 7.3 表格的基本操作 7.4 在表格中添加内容 7.5 制作细线表格 7.6 使用表格设计页面布局 7.1 表格概述 表格由不同行和列的单元格组成，常用于组织和显示数据信息，直观清晰。 表格可以实现网页的精确排版和定位。由于HTML的表格使用非常灵活，许多较复杂的页面布局也可利用表格来完成。 7.1 表格概述 一张表格（table）横向称为行（row），纵向称为列（column），行列交叉部分称作做单元格（cell）。一个单元格中的内容和此单元的边框之间的距离称作边距。一个单元格和相邻的单元格之间的距离称为间距。整张表格的边缘称作表格的边框（border）。 1.组织数据 使用 HTML 表格的最初目的是为了按行和列来组织数据。对于表格型数据，应该使用表格显示。 7.1.1 表格的作用 2.页面布局 通过设置表格宽度、高度、彼此之间的比例大小等，就可以把不同的网页部分要分别“框”在不同的单元格中以达到页面的平衡效果，从而突出网页的层次性和空间性。HTML 表格采用网格状的结构，可方便地对齐和放置内容。 7.1.1 表格的作用 HTML 表格包括行、列和单元格，这与其他程序中使用的表格相似。HTML中有多个与表格相关的标签，下表7.1只是列出常用的标签以及作用。 7.1.2 表格标签 HTML标签 作用 table 定义表格 caption 定义表格标题 tr 定义表格的表头 th 定义标题单元格 td 定义一个单元格 table width=393 height=166 border=1 caption 表格标题 /caption tr th width=114 scope=colTH1/th th width=131 scope=colTH2/th th width=126 scope=colTH3/th /tr tr td align=center TD1/td td align=center TD2/td td align=center TD3/td /tr tr td align=center TD4/td td align=center TD5/td td align=center TD6/td /tr tr td align=center TD7/td td align=center TD8/td td align=center TD9/td /tr /table 7.1.2表格标签—— 一个基本的表格结构 1.table标签 7.1.2 表格标签 与表格有关的参数(\表示无此属性) 属性 取值(代码) table表格 th表头 tr行 td单元格 align center 表格居中 文字居中 整行单元格文字居中 文字居中 left 表格居左 文字居左 整行单元格文字居左 文字居左 right 表格居右 文字居右 整行单元格文字居右 文字居右 border 数字 表格、单元格 \ colspan 数字 　\ 横向合并 \ 横向合并 rowspan 数字 　\ 纵向合并 \ 纵向合并 valign top 　\ 文字居顶 单元格文字居顶 文字居顶 bottom 　\ 文字居底 单元格文字居底 文字居底 middle 　\ 文字中间 单元格文字中间 文字中间 baseline 　\ 文字基线 单元格文字基线 文字基线 width 数字或百分比 表格宽 表头宽 横向表格宽=表格宽 单元格宽 height 数字或百分比 表格高 表头高 纵向表格高 单元格高 cellpadding 数字 单元格与内容间距 \ \ \ cellspacing 数字 表格与单元格间距 \ \ \ bgcolor 背景颜色 表格背景 表头背景 表格行背景 单元格背景 background 背景图片 背景图片 背景图片 背景图片 背景图片 表7.2 表格属性使用列表 7.1.2 表格标签 2. caption标签 标签caption和/caption用于建立表格的标题，并使用align属性定义标题的位置。align位置属性有4个值， top（标题放在表格的上方）、bottom（标题放在表格的下方）、left（标题放在表格的左上方）、right（标题放在表格的右上方）。一个表格只能有一个标题 7.1.2 表格标签 2. th标签 用于建立表头，表头是表格中行或列的标题，即表项的名称。使用th可以在表的第一行或第一列加表头，表头内容