第4章利用TableCSS组织显示网页数据
学习目标
本章所介绍的表格(Table)是网页制作中使用最多的技术之一。表格可以清晰明了地展现数据之间的关系,使对比分析更容易理解。在很多情况下,也可以使用表格对网页进行排版布局。值得注意的是表格布局在CSS标准布局的强大攻势下已是强弩之末,实际上标准布局下表格主要功能是组织和显示数据,但当数据很多时,密密麻麻排在一起会影响视觉浏览,因此可以应用CSS来改善数据表格的版式,以方便浏览者快速、准确地浏览。通过本章学习,您将达到以下学习目标。
熟悉表格的基本概念熟悉表格的常用元素和属性掌握TableCSS显示网页数据的方法掌握TableCSS网页布局的方法
41表格基础
411基本概念表格是由行和列组成的,并且根据行和列的个数决定形状。行和列交叉形成的矩形区域,
即表格中的一个矩形单元称为单元格。在表格中可以合并或拆分多个单元格。右侧是3行3列的表格形状。通过右侧的表格可以再明确行、列和单元格的概念。如图41所示。
图41表格的基本概念
行从左到右横过表格,而列则是上下走向;单元格是行和列的交界部分,它是用户输入信息的地方,单元格会自动扩展到与输入的信息相适应的大小。
412常用的表格元素定义一个表格,在table标签和table结束标签之间包含所有元素。表格元素包括数据项、行和列的表头、标题,每一项都有自己的修饰标签。按照从上到下,从左到右的顺序,可以为表格中的每列定义表头和数据。可以将任意元素放在HTML的表格单元格,包括图像、表单、分隔线、表头,甚至是另一个表格。浏览器将每个单元格作为一个窗口处理,让单元格的内容填满空间,当然在这个过程中会有一些特殊的格式规定和范围。如表41所示。
表41表格基本标签
标签名称
说明
table
定义一个表格
captio
定义一个表格的标题
fthtrtdtheadtbodytfootcolcolgroup
定义表格的表头在表格的行定义表格的单元定义表格的页眉定义表格的主体定义表格的页脚定义用于表格列的属性定义表格列的组
例如定义一个简单的无边框的两行三列的表格。具体代码如下:
tabletrtd第1行中的第1列tdtd第1行中的第2列tdtd第1行中的第3列tdtrtrtd第2行中的第1列tdtd第2行中的第2列tdtd第2行中的第3列tdtrtrtd第3行中的第1列tdtd第3行中的第2列tdtd第3行中的第3列tdtr
table运行效果如图42所示。
图42无边框的两行三列的表格
413常用的表格r