Table CSS剖析.docx

Table CSS剖析.docx

《Table CSS剖析.docx》由会员分享，可在线阅读，更多相关《Table CSS剖析.docx（40页珍藏版）》请在冰点文库上搜索。

TableCSS剖析

第4章利用Table+CSS组织显示网页数据

学习目标

本章所介绍的表格（Table）是网页制作中使用最多的技术之一。

表格可以清晰明了地展现数据之间的关系，使对比分析更容易理解。

在很多情况下，也可以使用表格对网页进行排版布局。

值得注意的是表格布局在CSS标准布局的强大攻势下已是强弩之末，实际上标准布局下表格主要功能是组织和显示数据，但当数据很多时，密密麻麻排在一起会影响视觉浏览，因此可以应用CSS来改善数据表格的版式，以方便浏览者快速、准确地浏览。

通过本章学习，您将达到以下学习目标。

Ø熟悉表格的基本概念

Ø熟悉表格的常用元素和属性

Ø掌握Table+CSS显示网页数据的方法

Ø掌握Table+CSS网页布局的方法

4.1表格基础

4.1.1基本概念

表格是由行和列组成的，并且根据行和列的个数决定形状。

行和列交叉形成的矩形区域，即表格中的一个矩形单元称为单元格。

在表格中可以合并或拆分多个单元格。

右侧是3行3列的表格形状。

通过右侧的表格可以再明确行、列和单元格的概念。

如图4-1所示。

图4-1表格的基本概念

行从左到右横过表格，而列则是上下走向；单元格是行和列的交界部分，它是用户输入信息的地方，单元格会自动扩展到与输入的信息相适应的大小。

4.1.2常用的表格元素

定义一个表格，在

表格元素包括数据项、行和列的表头、标题，每一项都有自己的修饰标签。

按照从上到下，从左到右的顺序，可以为表格中的每列定义表头和数据。

可以将任意元素放在HTML的表格单元格，包括图像、表单、分隔线、表头，甚至是另一个表格。

浏览器将每个单元格作为一个窗口处理，让单元格的内容填满空间，当然在这个过程中会有一些特殊的格式规定和范围。

如表4-1所示。

表4-1表格基本标签

标签名称

说明

定义一个表格

在表格的行

定义表格的页眉

定义表格的主体

定义表格的页脚

定义用于表格列的属性

定义表格列的组

例如定义一个简单的无边框的两行三列的表格。

具体代码如下：

运行效果如图4-2所示。

图4-2无边框的两行三列的表格

4.1.3常用的表格属性

为了使表格的外观更加符合要求，还可以对表格的属性进行设置，比较常用的表格属性包括背景、宽高、对齐方式、单元格间距、文本与边框间距等。

（1）table元素常用属性

表4-2table元素的常用属性

表格属性

说明

width

表格的宽度，单位用像素或百分比

height

表格的高度，单位用像素或百分比

border

设置表格边框

cellspacing

设置单元格之间的距离

cellpadding

设置单元格内的内容与边框的距离

说明：

其中cellspacing属性和cellpadding属性区别如图4-3所示。

图4-3表格的cellpadding属性和cellspacing属性

（2）tr元素常用属性

表4-3tr元素的常用属性

表格属性

说明

align

水平对齐方式，有left（左对齐）、right（右对齐）和center（居中对齐）

valign

垂直对齐方式，有top（上对齐）、middle（中对齐）和bottom（底对齐）

（3）th元素和td元素常用属性

表4-4th元素和td元素的常用属性

表格属性

说明

align

水平对齐方式，有left（左对齐）、right（右对齐）和center（居中对齐）

valign

垂直对齐方式，有top（上对齐）、middle（中对齐）和bottom（底对齐）

colspan

单元格水平合并，值为合并的单元格的数目

rowspan

单元格垂直合并，值为合并的单元格的数目

（4）其它常用属性

表4-5其它的常用属性

表格属性

说明

border

设置表格边框

bgcolor

设置表格背景颜色

background

设置表格背景图片

4.1.4与表格相关的CSS属性

表4-6与表格相关的CSS属性

CSS属性

取值

说明

border-collapse

separate（边分开）|

collapse（边合并）

定义表格的行和单元格的边是合并一起还是按照标准的HTML样式分开。

border-spacing

length

定义当表格边框独立（如当border-collapse属性等于separate时），行和单元格的边在横向和纵向上的边距，该值不可以取负值。

caption-side

top|right|bottom|left

定义表格的caption对象位于表格的哪一边。

应与caption对象一起使用。

empty-cells

show|hide

定义当单元格无内容时，是否应显示该单元格的边框。

table-layout

auto|fixed

定义表格的布局算法，可以通过该属性改善表格呈递性能，如果设置fixed属性值，会使IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度；如果设置为auto属性值，则表格在每一单元格内所有内容读取计算之后才会显示出来。

speak-header

once|always

定义当表格通过语音发生器说话时，数据单元格与表格表格之间的关联。

如果设置once属性值，则表示表格标题在一系列单元格之前发声一次。

如果设置always，则标题在每一个与之关联的单元格前发声。

4.2操作演练：

效果图切片导出网页

在PhotoshopCS5中将网页效果图制作完成后，就可以将其切片保存为网页文档了。

效果图的切片和切片的导出就完成了，回到桌面即可看到桌面上多了一个“allTitle.html”文件和“Images”文件夹。

用鼠标双击“allTitle.html”文件即可浏览。

如图4-4所示。

图4-4对“查看所有选题”页面切片（共18个切片）

采用同样的方法，依次对“后台登录”页面进行切片如图4-5所示。

图4-5对“后台”页面切片（共11个切片）

4.3操作演练：

“查看所有选题”页面数据表格

内容提要

标准布局下表格主要功能用来组织和显示数据，但当数据很多时，密密麻麻排在一起会影响视觉浏览效果，因此可以应用CSS来改善数据表格的版式，以方便浏览者快速、准确地浏览。

本节将介绍表格重要的排版属性以及利用CSS控制表格样式的方法等。

主要内容如下。

Ø熟悉网页表格中重要的排版属性

Ø掌握利用CSS控制表格边框的方法

Ø掌握利用CSS改善数据表格的视觉效果技巧

任务

现要求根据爱上设计网效果图要求，完成以下任务。

（1）利用Table+CSS制作“查看所有选题”页面数据表格

4.3.1表格中重要的排版属性

要合并表格的行或者列，只需在表格的标签或者标签中设置rowspan或colspan属性的属性值就可以了，它们的默认值为1。

其中，colspan属性表示要合并的列数，如colspan=“2”表示这一单元格需要将两列合并为一列显示；rowspan属性表示要合并的行数，如rowspan=“2”则表示这一单元需要将两行合并为一列显示。

例如

table{

border-collapse:

collapse;

border:

solid#006699;

border-width:

1px;

}

th,td{border:

1pxsolid#006699;padding:

2px;}

学生基本信息

成绩

计算机应用

C语言

运行效果如图4-6所示。

图4-6合并表格行列的示例

4.3.2CSS控制表格边框

默认情况下，表格将不显示边框。

但大多数情况下，为了网页布局的美观性都需要为表格设置边框。

1．

在

其中，border属性来设置

例如上例中：

table{

border-collapse:

collapse;

border:

solid#006699;

border-width:

1px;

}

2．

处，删除该处图像，设置表格单元格属性宽度：

694px高度：

282px。

修改后网页代码如下：

（2）鼠标光标定位到该单元格标签内，执行菜单“插入”“表格”命令，弹出“表格”对话框。

在该对话框的“行数”文本框输入“10”，“行数”文本框输入“7”。

在“表格宽度”文本输入“660”，单位像素。

“标题”组中设置表格表头为“顶部”，如图4-15所示。

然后单击“确定”按钮关闭该对话框。

图4-15在“表格”对话框中设置所插入表格的参数

（3）鼠标光标定位到表格单元格标签内，输入表格文字内容。

如图4-16所示。

图4-16输入表格文字内容

2．改善数据表格的视觉效果

标准布局下表格主要功能用来组织和显示数据，但当数据很多时，密密麻麻排在一起会影响视觉浏览效果，因此可以应用CSS来改善数据表格的版式，以方便浏览者快速、准确地浏览。

一般情况下，网页设计师可以通过添加边框、背景色，设置字体属性，调整单元格间距，定义表格宽度和高度等措施使数据更具可读性。

也可以综合使用各种属性来排版数据表格，使其既有可读性，又具有观赏性。

（1）改善表格框架结构

如图4-15所示表格是传统布局中所惯用的结构，不符合标准网页所提倡的代码简练性和准确性原则，数据表格的标题、表头信息与主体数据信息混合在一起，不利于浏览器的解析与检索。

我们需要对上面显示的表格框架进行改善，尽可能体现语义化，以便适宜机器阅读。

改进后代码如下：

--定义第1行为表头区域-->

课题ID

--定义列标题-->

课题名称

--定义列标题-->

指导老师

--定义列标题-->

选题说明

--定义列标题-->

课题类别

--定义列标题-->

适合专业

--定义列标题-->

--定义列标题-->

--定义第2行到结尾为主体区域-->

--增加隔行变色行类-->

--增加隔行变色行类-->

--增加隔行变色行类-->

--增加隔行变色行类-->

（2）改善表格样式布局

用CSS来改善数据表格的显示样式，使其更适宜阅读。

建议遵循以下设计原则：

Ø标题行与数据行要有区分，让浏览者能够快速地分出标题行和数据行，对此可以通过分别为主标题行、次标题行和数据行定义不同的背景色来实现；

Ø标题与正文的文本显示效果要有区别，对此可以通过定义标题与正文不同的字体、大小、颜色、粗细等文本属性来实现；

Ø为了避免阅读中出现的读错行现象，可以适当增加行高，或添加行线，或交替定义不同背景色等方法来实现；

Ø为了在多列数据中快速找到某列数据，可以适当增加列宽，或增加分列线，或定义列背景色等方法来实现。

根据上面的设计原则，下面显示详细CSS代码：

.table1{/*定义表格样式*/

border-collapse:

collapse;/*合并相邻边框*/

width:

665px;/*定义表格宽度*/

font-size:

12px;/*定义表格字体大小*/

border:

solid1px