学习笔记 第九章 使用CSS美化表格

 

第9章  使用CSS美化表格

学习重点

  • 正确使用表格标签;
  • 设置表格和单元格属性;
  • 设计表格的CSS样式。

9.1 表格的基本结构

表格由行、列、单元格3部分组成,单元格时行与列交叉的部分。

在HTML中,表格由<table>标签来定义,每个表格均有若干行,行由<tr>标签定义,每行被分割为若干单元格,单元格由<td>标签定义。字母td表示表格数据(即单元格内容)。

9.1.1 早期表格的结构

略,什么实质内容都没有。

9.1.2 标准化的表格结构

设计表格相关标签的语义性与使用规则说明如下:

  • <table>:定义表格,在<table>标签内,放置其它标签。
  • <caption>:定义表格标题,紧随<table>标签之后,一个表格只能有一个标题。
  • <th>:定义表头单元格。
  • <tr>:定义一行。
  • <td>:定义一个单元格。
  • <thead>:定义表头结构。
  • <tbody>:定义表格主体结构。
  • <tfoot>:定义表格的页脚结构。
  • <col>:在表格中定义针对一个或多个列的属性值,只能在<table>或<colgroup>标签中使用。
  • <colgroup>:定义表格列的分组,可以对列组进行格式化,只能在<table>标签中使用。

9.2  创建表格

9.2.1 简单的表格

略,挺简单的。

9.2.2 包含表头的表格

在数据表格中,每列可以包含一个标题,在HTML中被称为表头单元格,使用th元素定义表头单元格。

9.2.3 包含标题的表格

<caption>title</caption>

9.2.4 结构化的表格

thead、tfoot和tbody元素可以对表格中的进行分组。

使用thead元素可以定义表格的表头,一般与tbody和tfoot元素结合使用。其中tbody元素对主题内容进行分组,而tfoot元素对HTML表格中的表注(页脚)内容进行分组。

注意:当使用thead、tbody和tfoot元素时,必须使用全部的元素,排列的顺序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚。

9.2.5 列分组的表格

col和colgroup元素可以对表格中的列进行分组。

使用<col>标签可以为表格中一个或多个列定义属性值。

使用<colgroup>标签也可以对表格中的列进行组合,以便对其进行格式化。

9.3  设置表格属性

表格标签包含大量属性,HTML5支持的<table>标签属性说明如下:

HTML5支持的<table>标签属性
属性说明
border定义表格边框,值为整数,单位为像素,值为0时,隐藏表格边框线
cellspacing定义数据表单元格的边界
cellpadding定义数据表单元格
width定义数据表的宽度
frame

设置数据表的外边框线显示。

取值有:void(不显示边框线)、above(顶端边框线)、below(底部)、hsides(顶部和底部)、lhs(左侧)、rhs(右侧)、vsides(左右两侧)、box(四边)、border(四边)

rules

设置数据表的内边线显示,对border属性的功能拓展。

取值有:none(不显示)、groups(仅显示分组内边线)、rows(显示每行的水平线)、cols(显示每列的垂直线)、all(显示所有行与列的内边线)

summary定义表格的摘要

9.3.1 设计单线表格

<table border="1" frame="hsides" rules="rows" width="100%">

通过frame属性定义表格仅显示上下框线,使用rulers属性定义表格仅显示水平内边线,从而设计出单行线数据表格效果。

9.3.2 设计井字表格

<table border="1" frame="void" cellpadding="6" cellspacing="16">

通过frame属性隐藏表格外框,使用cellpadding属性定义单元格内容的边距为6像素,单元格之间的间距为16像素。

9.3.3 设计细线表格

<table border="1" rules="all" width="100%">

9.3.4 设置表格说明

使用<summary>设置摘要,该属性的值不会显示,但是屏幕阅读器可以利用该属性,也方便机器进行表格内容检索。

<table border="1" rules="all" width="100%" summary="rules属性取值说明">

9.4  设置单元格属性

单元格标签(<td>和<th>)包含大量属性,HTML5支持的<td>和<th>属性说明如下:

HTML5支持的<td>和<th>标签属性
属性说明
abbr定义单元格中内容的缩写版本
align定义单元格内容的水平对齐方式。取值:right、left、center、justify(两端对齐)、char(对准指定字符)
axis对单元进行分类
char定义根据哪个字符来进行内容的对齐
charoff定义对齐字符的偏移量
colspan定义单元格可以横跨的列数
headers定义与单元格相关的表头
rowspan定义单元格可横跨的行数
scope定义将表头数据与单元格数据相关联的方法。取值:col(列的表头)、colgroup(列表的组头)、row(行的表头)、rowgroup(行组的表头)
valign定义单元格内容的垂直排列方式。取值:top、middle、bottom、baseline(基线对齐)

9.4.1 单元格跨列或跨行显示

colspan和rowspan分别用来定义单元格可跨列或跨行显示,取值为正整数,如果取值为0,则表示浏览器横跨到最后一列/行。

9.4.2 定义表头单元格

使用scope属性,可以把单元格与表头单元格联系起来。

  • 属性值为row,表示将当前行的所有单元格和表头单元格绑定起来;
  • 属性值为col,将当前列的所有单元格和表头单元格绑定起来;
  • 属性值为rowgroup,将单元格所在的行组(由<thead>、<tbody>或<tfoot>标签定义)和表头单元格绑定起来;
  • 属性值为colgroup,将单元格所在的行组(由<col>或<colgroup>标签定义)和表头单元格绑定起来。

不会在普通浏览器中产生任何视觉效果,故很难判断浏览器是否支持scope属性。

9.4.3 为单元格指定表头

使用header属性可以为单元格指定表头,属性值时一个表头名称的字符串,名称使用ID属性定义的不同表头单元格的名称。

 1 <table border="1" width="100%">
 2     <tr>
 3         <th id="name">姓名</th>
 4         <th id="E-mail">电子邮件</th>
 5         <th id="Phone">电话</th>
 6         <th id="Address">地址</th>
 7     </tr>
 8     <tr>
 9         <td headers="name">张三</td>
10         <td headers="E-mail">zhangsan@qq.com</td>
11         <td headers="Phone">13455555555</td>
12         <td headers="Address">北京</td>
13     </tr>
14 </table>
为单元格指定表头

9.4.4 定义单元格信息缩写

使用abbr属性可以为单元格中的内容定义缩写内容,无视觉效果方面的变化,主要为机器检索服务。

9.4.5 对单元格进行分类

使用axis属性可以对单元格进行分类,用于对相关的信息列进行组合。通过分类属性axis,可以快速检索特定信息。

目前,还没有浏览器支持该属性。

9.5  设计CSS样式

CSS为表格定义了5个专用属性,详细说明如下:

CSS表格属性列表

属性

取值

说明

border-collapse

separate(边分开)|collapse(边合并)

定义表格的行与单元格的边时合并还是分开

border-spacing

length

定义当表格边框独立时,行与单元格的边在横向和纵向上的间距

caption-side

top|bottom

 定义表格的caption对象位于表格的顶部或底部

 empty-cells

 show|hide

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

 table-layout

auto|fixed 

 定义表格的布局算法,可以通过该属性改善表格呈递性能。

如果设置fixed,会使IE以一次一行的方式呈递表格内容;

如果设置auto,则表格在每一单元格内所有内容读取计算之后才会显示出来

9.5.1 设计细线表格

使用CSS的border属性代替<table>标签的border属性定义表格边框,以提升设计效率,优化代码结构。

9.5.2 定义单元格间距和空隙

CSS定义了border-spacing属性,该属性能够分离单元格间距。取值包含1个或2个值。当定义一个值时,则定义单元格行间距和列间距都为该值,如:

table{ border-spacing:20px;}

如果分别定义行间距和列间距,就需要定义两个值,如:

table{border-spacing: 10px 30px;}

第一个值表示单元格之间的行间距,第二个值表示单元格之间的列间距,该属性值不可以为负值。定义间距后,空间由表格背景填充。

使用该属性应该注意:

  1. 早起IE浏览器不支持该属性,要定义相同效果的样式,需要结合传统<table>标签的cellspacing属性来设置。
  2. 使用cellspacing属性时,应确保单元格之间保持相互独立性,不能使用border-collapse:collapse;样式定义合并表格内单元格的边框。
  3. cellspacing属性不能够使用CSS的margin属性来代替。对于td元素来说,不支持margin属性。
  4. 可以为单元格定义补白,此时使用CSS的padding属性与单元格的cellpadding属性实现效果是相同的。

9.5.3 隐藏空单元格

如果表格单元格的边框处于分离状态(border-collapse:separate;),可以使用CSS的empty-cells属性设置空单元格是否显示。

  • 值为show时,显示空单元格;
  • 值为hide时,隐藏空单元格。

空单元格——没有可视内容的单元格。如果单元格的visibility属性值为hidden,即便单元格包含内容,也认为是无可视内容。而“&nbsp;”和其它空白字符为可视内容。ASCⅡ字符中的回车符(“\0D”)、换行符(“\0A”)、Tab键(“\09”)和空格键(“\20”)表示无可视内容。

如果表格行中所有单元格的empty-cells属性都为hide,且都不包含任何可视内容,那么整行就等于设置了display:none。

9.5.4 定义标题样式

使用CSS的caption-side属性可以定义标题的显示位置,该属性取值包括top、bottom、left(非标准)、right(非标准)。

如果要水平对齐标题文本,则可以使用text-align属性。对于左右两侧的标题,可以使用vertical-align属性进行垂直对齐,取值包括top、middle和bottom,默认top。

td元素的样式具有最大优先权,以此类推。

转载于:https://www.cnblogs.com/ailinzhijia/p/7911421.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值