（8）css表格
用css设置表格样式
*<table></table> 标签定义 HTML 表格。
* tr 元素定义表格的行；th 元素定义表格的表头；td 元素定义表格中的单元格；caption元素定义表格的标题；cellpadding元素定义单元格内文字与边框的距离；cellspacing元素定义单元格之间的距离；
*每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）；一个<tr>...</tr>标记表示一行；一个<td>...</td>标记表示一列。
1、下面做一个普通的月考成绩表，代码：
<!doctype html>
<html >
<head>
<title>学生成绩记录</title>
</head>
<body>
<table border="1" cellpadding="4" cellspacing="1" bgcolor="#FAEBD7"> <caption>月考成绩表</caption> <tr>
<th>姓名</th> <th>语文</th> <th>数学</th> <th>英语</th> <th>总分</th>
</tr>
<tr>
<th>小红</th> <td>80</td> <td>70</td> <td>90</td> <td>240</td>
</tr>
<tr>
<th>小明</th> <td>90</td> <td>80</td> <td>70</td> <td>240</td>
</tr>
<tr>
<th>小丽</th> <td>70</td> <td>80</td> <td>90</td> <td>240</td>
</tr>
<tr>
<th>小兵</th> <td>70</td> <td>90</td> <td>80</td> <td>240</td>
</tr> </table>
</body>
</html>
效果图：
以上是单纯的html语言，并没有css的修饰。
接下来将对单纯的html语言结构进行css的修饰：
简单案例1：
<style type="text/css">
.ways{
font: 15px 宋体;
border:2px #777 solid;
text-align:center;
background-color:#FAEBD7 /*颜色：古董白*/
border-collapse:collapse; /*边框折叠*/
width:500px;
} .way td{
border:1px #777 dashed;
}
.way th{
border:1px #777 solid;
}v
</style>
效果图：
上图中的最外面的粗线框是整个表格的边框，里面的每一个单元格都有自己的边框，th和td 可以分别设置各自的边框的样式，例如这里th为像素的实线，td为1个像素的虚线。使用border-collapse属性设置为collapse值来消除每个单元格之间的空隙。
border-collapse:collapse ; /*相邻边框合并*/
border-collapse:separate; /*相邻边框分离*/
2、加 thead（表头），tbody（表体）和tfoot（表尾）的table表格是更加标准的表格写法，一个正常标准的表格都包含表头，表体，表尾。
这几个标记主要是用于提高table标签的加载以及显示的。
使用css来格式表格时，通过这三个标记可以更方便地选择要设置样式的单元格。
简单案例2：
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>产品目录</title>
<style type="text/css">
table{
border: 1px #333 solid;
font: 12px arial;
width: 500px
} table caption {
font-size: 24px;
line-height:36px;
color:white;
background-color:#777;
} tbody tr{
background-color: #CCC;
} td,th{
padding: 5px;
border: 2px solid #EEE;
border-bottom-color: #666;
border-right-color: #666;
} thead tr,tfoot tr{
background:white;
}
</style>
</head> <body>
<table cellspacing="0">
<caption>Product List</caption>
<thead>
<tr>
<th >产品</th>
<th >ID</th>
<th >国家</th>
<th >价格</th>
<th >颜色</th>
<th >重量</th>
</tr>
</thead>
<tbody>
<tr >
<th >电脑</th>
<td>C184645</td>
<td>China</td>
<td>$3200.00</td>
<td>Black</td>
<td>5.20kg</td>
</tr>
<tr>
<th >电视</th>
<td>T 965874</td>
<td>Germany</td>
<td>$299.95</td>
<td>White</td>
<td>15.20kg</td>
</tr>
<tr >
<th >电话</th>
<td>P494783</td>
<td>France</td>
<td>$34.80</td>
<td>Green</td>
<td>0.90kg</td>
</tr>
<tr>
<th >录音机</th>
<td>R349546</td>
<td>China</td>
<td>$111.99</td>
<td>Silver</td>
<td>0.30kg</td>
</tr>
<tr >
<th >洗衣机</th>
<td>W454783</td>
<td>Japan</td>
<td>$240.80</td>
<td>White</td>
<td>30.90kg</td>
</tr>
<tr>
<th >冰箱</th>
<td>F783990</td>
<td>China</td>
<td>$191.68</td>
<td>blue</td>
<td>32.80kg</td>
</tr>
</tbody>
<tfoot>
<tr>
<th >总计</th>
<th colspan="5">6种产品</th>
</tr>
</tfoot>
</table>
</body>
</html>
效果图：上图中加了 thead（表头），tbody（表体）和tfoot（表尾）三个标记只是为了可以更方便地选择要设置样式的单元格。
3、隔行变色的表格
当一个表格中的行和列都很多的时候，并且数据很大的时候，为避免单元格采用相同的背景颜色会使浏览者感到凌乱~~发生看错行的情况。这时候就需要修改一下表格，修改成方便浏览者观看的表格---隔行变色的表格。
在css中实现隔行变色的方法十分简单，只要给偶数行的<tr>标记都添加上相应的类型，然后后对其进行css设置即可。 （1）继续引用上面的 “简单案例2”，首先在html中，给所有的tbody中偶数行的<tr>标记增加一个“even”类别，如下：
<tr class="even">
<th >电视</th>
<td>T 965874</td>
<td>Germany</td>
<td>$299.95</td>
<td>White</td>
<td>15.20kg</td>
</tr>
设置“.even”与其他单元格的不同的样式，如下：
tbody tr.even{
background-color: #AAA;
}
效果图：
上图中是交替的两种颜色不但可以使表格更美观，而且更重要的是当表格的行列很多的时候，可以使查看者不易看错行。 4、设置鼠标指针经过时整行变色提示的表格 为了让浏览者方便观看拥有多行、列的表格，后来出现了鼠标指针经过时整行变色提示的表格，只因为了改善用户体验！接下来继续引用上面的 “简单案例2”：
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>产品目录</title>
<style type="text/css">
table{
border: 1px #333 solid;
font: 12px arial;
width: 500px
} table caption {
font-size: 24px;
line-height:36px;
color:white;
background-color:#777;
} tbody tr{
background-color: #CCC;
} td,th{
padding: 5px;
border: 2px solid #EEE;
border-bottom-color: #666;
border-right-color: #666;
} thead tr,tfoot tr{
background:white;
}
/***************************/
tbody tr:hover td,
tbody tr:hover th{
background:aqua;
border: 2px solid aqua;
}
/**************************/
</style>
</head> <body>
<table cellspacing="0">
<caption>Product List</caption>
<thead>
<tr>
<th >产品</th>
<th >ID</th>
<th >国家</th>
<th >价格</th>
<th >颜色</th>
<th >重量</th>
</tr>
</thead>
<tbody>
<tr >
<th >电脑</th>
<td>C184645</td>
<td>China</td>
<td>$3200.00</td>
<td>Black</td>
<td>5.20kg</td>
</tr>
<tr>
<th >电视</th>
<td>T 965874</td>
<td>Germany</td>
<td>$299.95</td>
<td>White</td>
<td>15.20kg</td>
</tr>
<tr >
<th >电话</th>
<td>P494783</td>
<td>France</td>
<td>$34.80</td>
<td>Green</td>
<td>0.90kg</td>
</tr>
<tr>
<th >录音机</th>
<td>R349546</td>
<td>China</td>
<td>$111.99</td>
<td>Silver</td>
<td>0.30kg</td>
</tr>
<tr >
<th >洗衣机</th>
<td>W454783</td>
<td>Japan</td>
<td>$240.80</td>
<td>White</td>
<td>30.90kg</td>
</tr>
<tr>
<th >冰箱</th>
<td>F783990</td>
<td>China</td>
<td>$191.68</td>
<td>blue</td>
<td>32.80kg</td>
</tr>
</tbody>
<tfoot>
<tr>
<th >总计</th>
<th colspan="5">6种产品</th>
</tr>
</tfoot>
</table>
</body>
</html>
效果图：
（8）css表格的更多相关文章
- 第 18 章 CSS 表格与列表
学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式 表格有五 ...
- HTML 学习笔记 CSS(表格)
CSS 表格属性可以帮助您极大的改善表格的外观 表格边框 如需在CSS中设置表格的边框 请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td ...
- Bootstrap css栅格 + 网页中插入代码+css表格
设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...
- 第七十五节，CSS表格与列表
CSS表格与列表 学习要点: 1.表格样式 2.列表样式 3.其他功能 一．表格样式 表格有五种独有样式,样式表如下: 属性 值 ...
- CSS 表格实例
CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性 描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...
- CSS表格(未完成)
CSS 表格 使用 CSS 可以使 HTML 表格更美观. 表格边框 指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框:
- CSS：CSS 表格
ylbtech-CSS:CSS 表格 1.返回顶部 1. CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkis ...
- css 表格
1.给元素的display属性添加为以下值 table : <table> table-caption :<caption> table-cell : <td> t ...
- 3月23.CSS表格布局
360表格布局: CSS定义标签: @charset "utf-8";/* CSS Document */.bt1{ border:#309 solid 1px; height:1 ...
- HTML学习笔记 CSS表格及轮廓案例 第八节 （原创）参考使用表
#tb, tb1, tr, th, td { border: 5px solid blue; /*加边框*/ padding: 5px; /*内边距*/ } #tb1 { border-collaps ...
随机推荐
- ARM PPC 交叉编译环境搭建
ARM: 1,下载cross-3.4.1.tar.bz2 2,在/usr/local目录下建立arm目录 3,将cross-3.4.1.tar.bz2拷贝到arm目录下 4,tar jxvf cros ...
- 高清（200万像素）多灯红外防水枪型网络摄像机 DH-IPC-HFW5200-IRA
DH-IPC-HFW5200-IRA-0722A http://download.dahuatech.com/instruction_download.php?classOne=3907&cl ...
- 通过k8s(Kubernetes）搭建jmeter的压测环境master-slave架构，实现弹性伸缩
在k8s上部署jmeter的mater和slave,根据压测需求动态增减master和slave节点数量,即可以完成压测任务,又可以是资源利用最大化 https://blog.kubernauts.i ...
- C++设计模式之适配器模式(二)
3.Socket网络通信的设计与实现------类适配器 除了对象适配器模式之外.适配器模式另一种形式.那就是类适配器模式,类适配器模式和对象适配器模式最大的差别在于适配器和适配者之间的关系不同,对象 ...
- [React] Extend styles with styled-components in React
In this lesson, you will learn how to extend styles from one styled-component to another in a React ...
- 非计算机专业的伟伯是怎样拿到阿里Offer的。求职励志!！!
写在前面: 2015 年 7 月初.參加阿里巴巴校招内推, 8 月 15 日拿到研发project师 JAVA 的 offer .我的专业并不是计算机,也没有在互联网公司实习过,仅仅有一些学习和面试心 ...
- 《Java设计模式》之訪问者模式
訪问者模式是对象的行为模式.訪问者模式的目的是封装一些施加于某种数据结构元素之上的操作.一旦这些操作须要改动的话,接受这个操作的数据结构则能够保持不变. 分派的概念 变量被声明时的类型叫做变量的静态类 ...
- c语言学习-指针探究
1:指针定义格式:格式:变量类型 *变量名用途:指针变量用于储存地址(only),也就是根据地址值,访问对应的存储空间. 注意.int *p 只能指向int类型的数据: 例: int a = 20; ...
- Linq To Entities中的动态排序
换了工作有一个月了,一样的工作.一样的代码.一样的体力活仍就…… Linq To Entityes 也是不新玩意了,近半年来也一直与之打交道,但一直也没对其深究过.今天新加的功能要对所有列支持排序,这 ...
- [IT学习]GIT 学习
最近开始了解GIT.有一些不错的资源记录在下面: 1.GIT for teams A book about teams cooperation. 2.GIT https://learngitbranc ...