Table CSS剖析.docx
- 文档编号:27441786
- 上传时间:2023-07-01
- 格式:DOCX
- 页数:40
- 大小:1.33MB
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表格基本标签
标签名称
说明
定义表格的表头 | ||||||
---|---|---|---|---|---|---|
定义表格的单元 定义表格的页眉 |
第1行中的第1列 | 第1行中的第2列 | 第1行中的第3列 |
第2行中的第1列 | 第2行中的第2列 | 第2行中的第3列 |
第3行中的第1列 | 第3行中的第2列 | 第3行中的第3列 |
运行效果如图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表格中重要的排版属性
要合并表格的行或者列,只需在表格的
其中,colspan属性表示要合并的列数,如colspan=“2”表示这一单元格需要将两列合并为一列显示;rowspan属性表示要合并的行数,如rowspan=“2”则表示这一单元需要将两行合并为一列显示。
例如
table{
border-collapse:
collapse;
border:
solid#006699;
border-width:
1px;
}
th,td{border:
1pxsolid#006699;padding:
2px;}
姓名 | 性别 | 专业 | 课程 | 分数 |
张三 | 男 | 68 | ||
王晓 | 女 | 89 |
运行效果如图4-6所示。
图4-6合并表格行列的示例
4.3.2CSS控制表格边框
默认情况下,表格将不显示边框。
但大多数情况下,为了网页布局的美观性都需要为表格设置边框。
1.
或者 | 标签边框设置 为表格 | 或者 | 标签设置边框,其设置方法与
运行效果如图4-8所示。 图4-8使用rules属性来显示行与行的分隔线 5.常用各类边框设置 (1)细线框表格 设计1px粗细表格边框,样式代码如下: .table1{border-collapse: collapse;} .table1td{border: 1pxsolid#cc0000;} 运行效果如图4-9所示。 图4-91px粗细表格边框 (2)粗边框的细线表格 通过为table和td元素分别定义边框,可以设计出粗边框的细线表格。 样式代码如下: .table2{ border-collapse: collapse; border: 1pxsolid#cc0000; } .table2td{border: 1pxsolid#cc0000;} 运行效果如图4-10所示。 图4-10粗边框的细线表格 (3)虚线表格 样式代码如下: .table3{border-collapse: collapse;} .table3td{border: 1pxdashed#cc0000;} 运行效果如图4-11所示。 图4-11虚线表格 (4)双线表格 样式代码如下: .table4{border-collapse: collapse;border: 5pxdouble#cc0000;} .table4td{border: 1pxdotted#cc0000;} 运行效果如图4-12所示。 图4-12双线表格 (5)宫字表格 样式代码如下: .table5{border-spacing: 10px;} .table5td{border: 1pxsolid#cc0000;} 运行效果如图4-13所示。 图4-13宫字表格 (6)单线表格 样式代码如下: .table6{border-collapse: collapse;border-bottom: 1pxsolid#cc0000;} .table6td{border-bottom: 1pxsolid#cc0000;} 运行效果如图4-14所示。 图4-14单线表格 4.3.3制作“查看所有选题”页面数据表格 启动DreamweaverCS5软件,打开“第4章素材\查看所有选题页面排版\起点文件”文件夹下由切片生成的allTitle.html网页文件,完成以下操作。 1.插入表格 (1)单击“文档”工具栏上“拆分”按钮,切换到“拆分”视图,将鼠标光标定位到如下代码: 处,删除该处图像,设置表格单元格属性宽度: 694px高度: 282px。 修改后网页代码如下: (2)鼠标光标定位到该单元格标签内,执行菜单“插入”“表格”命令,弹出“表格”对话框。 在该对话框的“行数”文本框输入“10”,“行数”文本框输入“7”。 在“表格宽度”文本输入“660”,单位像素。 “标题”组中设置表格表头为“顶部”,如图4-15所示。 然后单击“确定”按钮关闭该对话框。 图4-15在“表格”对话框中设置所插入表格的参数 (3)鼠标光标定位到表格单元格标签内,输入表格文字内容。 如图4-16所示。 图4-16输入表格文字内容 2.改善数据表格的视觉效果 标准布局下表格主要功能用来组织和显示数据,但当数据很多时,密密麻麻排在一起会影响视觉浏览效果,因此可以应用CSS来改善数据表格的版式,以方便浏览者快速、准确地浏览。 一般情况下,网页设计师可以通过添加边框、背景色,设置字体属性,调整单元格间距,定义表格宽度和高度等措施使数据更具可读性。 也可以综合使用各种属性来排版数据表格,使其既有可读性,又具有观赏性。 (1)改善表格框架结构 如图4-15所示表格是传统布局中所惯用的结构,不符合标准网页所提倡的代码简练性和准确性原则,数据表格的标题、表头信息与主体数据信息混合在一起,不利于浏览器的解析与检索。 我们需要对上面显示的表格框架进行改善,尽可能体现语义化,以便适宜机器阅读。 改进后代码如下: --定义第1行为表头区域--> --定义列标题--> --定义列标题--> --定义列标题--> --定义列标题--> --定义列标题--> --定义列标题--> --定义列标题--> --定义第2行到结尾为主体区域--> 22 | online影视网 | 方芳 | 本项目适合3人一组... | 企业网站设计 | 计算机应用技术 | 详情 | --增加隔行变色行类--> 办公自动化系统 | 高佳 | 本项目适合2人一组... | 企事业信息系统设计 | 各专业 | 详情 | 24 | 电子商务平台 | 黄珊 | 本项目适合3人一组... | 企业网站设计 | 各专业 | 详情 | --增加隔行变色行类--> 室内效果图设计 | 严智勇 | 本项目适合3人一组... | 三维动画设计 | 计算机多媒体技术 | 详情 | 26 | 洪秀全故居片头 | 吴雨彤 | 本项目适合3人一组... | 影视动漫设计 | 软件技术 | 详情 | --增加隔行变色行类--> 图书管理系统 | 李海滨 | 本项目适合3人一组... | 企事业信息系统设计 | 软件技术 | 详情 | 28 | 博客管理系统 | 徐子淇 | 本项目适合3人一组... | 企事业信息系统设计 | 计算机应用技术 | 详情 | --增加隔行变色行类--> 365网上社区系统 | 李梓维 | 本项目适合3人一组... | 企业网站设计 | 计算机应用技术 | 详情 | 30 | Android手机游戏 | 薛思琪 | 本项目适合3人一组... | Android应用设计 | 网络技术 | 详情 | (2)改善表格样式布局 用CSS来改善数据表格的显示样式,使其更适宜阅读。 建议遵循以下设计原则: Ø标题行与数据行要有区分,让浏览者能够快速地分出标题行和数据行,对此可以通过分别为主标题行、次标题行和数据行定义不同的背景色来实现; Ø标题与正文的文本显示效果要有区别,对此可以通过定义标题与正文不同的字体、大小、颜色、粗细等文本属性来实现; Ø为了避免阅读中出现的读错行现象,可以适当增加行高,或添加行线,或交替定义不同背景色等方法来实现; Ø为了在多列数据中快速找到某列数据,可以适当增加列宽,或增加分列线,或定义列背景色等方法来实现。 根据上面的设计原则,下面显示详细CSS代码: .table1{/*定义表格样式*/ border-collapse: collapse;/*合并相邻边框*/ width: 665px;/*定义表格宽度*/ font-size: 12px;/*定义表格字体大小*/ border: solid1px
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文
copyright@ 2008-2022 冰点文档网站版权所有 经营许可证编号:鄂ICP备2022015515号-1 |
---|