Table+CSS.doc

第4章 利用Table+CSS组织显示网页数据 学习目标 本章所介绍的表格（Table）是网页制作中使用最多的技术之一。表格可以清晰明了地展现数据之间的关系，使对比分析更容易理解。在很多情况下，也可以使用表格对网页进行排版布局。值得注意的是表格布局在CSS标准布局的强大攻势下已是强弩之末，实际上标准布局下表格主要功能是组织和显示数据，但当数据很多时，密密麻麻排在一起会影响视觉浏览，因此可以应用CSS来改善数据表格的版式，以方便浏览者快速、准确地浏览。通过本章学习，您将达到以下学习目标。 熟悉表格的基本概念 熟悉表格的常用元素和属性 掌握Table+CSS显示网页数据的方法 掌握Table+CSS网页布局的方法 4.1 表格基础 4.1.1 基本概念 表格是由行和列组成的，并且根据行和列的个数决定形状。行和列交叉形成的矩形区域，即表格中的一个矩形单元称为单元格。在表格中可以合并或拆分多个单元格。右侧是3行3列的表格形状。通过右侧的表格可以再明确行、列和单元格的概念。如图4-1所示。 图 4-1 表格的基本概念 行从左到右横过表格，而列则是上下走向；单元格是行和列的交界部分，它是用户输入信息的地方，单元格会自动扩展到与输入的信息相适应的大小。 4.1.2 常用的表格元素 定义一个表格，在table标签和/table结束标签之间包含所有元素。表格元素包括数据项、行和列的表头、标题，每一项都有自己的修饰标签。按照从上到下，从左到右的顺序，可以为表格中的每列定义表头和数据。 可以将任意元素放在HTML的表格单元格，包括图像、表单、分隔线、表头，甚至是另一个表格。浏览器将每个单元格作为一个窗口处理，让单元格的内容填满空间，当然在这个过程中会有一些特殊的格式规定和范围。如表4-1所示。 表4-1 表格基本标签 标签名称 说明 table 定义一个表格 caption 定义一个表格的标题 th 定义表格的表头 tr 在表格的行 td 定义表格的单元 thead 定义表格的页眉 tbody 定义表格的主体 tfoot 定义表格的页脚 col 定义用于表格列的属性 colgroup 定义表格列的组 例如定义一个简单的无边框的两行三列的表格。具体代码如下： table tr td第1行中的第1列/td td第1行中的第2列/td td第1行中的第3列/td /tr tr td第2行中的第1列/td td第2行中的第2列/td td第2行中的第3列/td /tr tr td第3行中的第1列/td td第3行中的第2列/td td第3行中的第3列/td /tr /table 运行效果如图4-2所示。 图 4-2 无边框的两行三列的表格 4.1.3 常用的表格属性 为了使表格的外观更加符合要求，还可以对表格的属性进行设置，比较常用的表格属性包括背景、宽高、对齐方式、单元格间距、文本与边框间距等。 （1）table元素常用属性 表4-2 table元素的常用属性 表格属性 说明 width 表格的宽度，单位用像素或百分比 height 表格的高度，单位用像素或百分比 border 设置表格边框 cellspacing 设置单元格之间的距离 cellpadding 设置单元格内的内容与边框的距离 说明：其中cellspacing属性和cellpadding属性区别如图4-3所示。 图 4-3 表格的cellpadding属性和cellspacing属性 （2）tr元素常用属性 表4-3 tr元素的常用属性 表格属性 说明 align 水平对齐方式，有left(左对齐)、right(右对齐)和center(居中对齐) valign 垂直对齐方式，有top(上对齐)、middle(中对齐)和bottom(底对齐) （3）th元素和td元素常用属性 表4-4 th元素和td元素的常用属性 表格属性 说明 align 水平对齐方式，有left(左对齐)、right(右对齐)和center(居中对齐) valign 垂直对齐方式，有top(上对齐)、middle(中对齐)和bottom(底对齐) colspan 单元格水平合并，值为合并的单元格的数目 rowspan 单元格垂直合并，值为合并的单元格的数目 （4）其它常用属性 表4-5 其它的常用属性 表格属性 说明 border 设置表格边框 bgcolor 设置表格背景颜色 background 设置表格