（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 ...
随机推荐
- 洛谷——P1038 神经网络
P1038 神经网络 题目背景 人工神经网络(Artificial Neural Network)是一种新兴的具有自我学习能力的计算系统,在模式识别.函数逼近及贷款风险评估等诸多领域有广泛的应用.对神 ...
- 洛谷——P1551 亲戚
题目背景 若某个家族人员过于庞大,要判断两个是否是亲戚,确实还很不容易,现在给出某个亲戚关系图,求任意给出的两个人是否具有亲戚关系. 题目描述 规定:x和y是亲戚,y和z是亲戚,那么x和z也是亲戚.如 ...
- 从 modCount 看 java集合 fail-fast 机制
一.背景 在常见的Java的非线程安全集合类中(如HashMap.ArrayList),经常可以在一些修改结构的操作(如Add)中看到实例变量 modCount++ ,来统计集合的修改次数. 从注释也 ...
- java课堂测试—根据模板完成一个简单的技术需求征集系统
课堂上老师发布了一个页面模板要求让我们实现一个系统的功能,模仿以后后端的简单工作情况. 然后在这个模板的基础上,提供了一个注册的网页模板,接着点击注册的按钮,发现register里面调用了zhu/zh ...
- Tomcat可以实现Session共享方案
说明:原来Tomcat也是可以实现Session共享的,这样大大减少的硬编码的实现,并且前面用Nginx分流时不用考虑Session的问题,因为是Web容器提供了Session共享的支持. 1.在每个 ...
- DRBD原理知识
DRBD(Distributed Relicated Block Device 分布式复制块设备), 可以解决磁盘单点故障.一般情况下只支持2个节点. 大致工作原理如下图: 一般情况下文件写入磁盘的步 ...
- CSDN-markdown基本的语法说明
文件夹 概述 简介Markdown CSDN Markdown的功能支持 标题 Setext形式 atx形式 区块引用 分隔线 强调 列表 无序列表 有序列表 注意事项 链接 自己主动链接 普通文本链 ...
- awk基本使用方法简单介绍
之前说过sed, 今天来说awk, 它也是一个文本处理器. 是linux下的一个命令, 比sed更强大. 搞linux开发, 尤其是后台开发, 这个命令差点儿必需要用到. awk这三个字母分别代表其三 ...
- Android中的动画具体解释系列【2】——飞舞的蝴蝶
这一篇来使用逐帧动画和补间动画来实现一个小样例,首先我们来看看Android中的补间动画. Android中使用Animation代表抽象的动画类,该类包含以下几个子类: AlphaAnimation ...
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1)：格式化数字字符串 小程序开发之图片转Base64（C#、.Net） jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
Visual Studio 2017中使用正则修改部分内容 最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效 ...