（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 ...
随机推荐
- HDU 5573 Binary Tree【构造】
几天前模拟区域赛的一道题,今天发现在草稿箱里直接补个博客. 感觉这还是一道很有意思的构造题. 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5573 ...
- Flatten Binary Tree to Linked List (DFS)
Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 6 T ...
- B/S(WEB)系统中使用Activex插件调用扫描仪实现连续扫描并上传图像(IE文件扫描并自动上传)
IE浏览器下使用Activex插件调用客户端扫描仪扫描文件并山传,可以将纸质档案(如合同.文件.资料等)扫描并将扫描图像保存到服务器,可以用于合同管理.档案管理等. 通过插件方式调用扫描仪扫描并获取图 ...
- 我被C++开发欺辱的岁月
前言 人被压迫了,为什么不斗争?——鲁迅 作为一个C#开发者,我经历了,也见证了很多同行饱受C++开发的歧视和欺辱. 而且,这种行为,现在依然持续的发生在C#开发者的身上,就目前为止,绝大部分C#开发 ...
- [转]thrift系列 - 快速入门
原文: http://blog.csdn.net/hrn1216/article/details/51274934 thrift 介绍,入门例子. thrift 是一个RPC框架,实现跨语言 ---- ...
- OSWorkFlow流程配置文件具体解释
AbstractWorkflow>> osworkflow中有关工作流流转的全部核心代码都在AbstractWorkflow中.BasicWorkflow就是派生自它,只是这个BasicW ...
- soapUI系列之—-05 JDBC Request & Xpath Match
一.配置JDBC Connection String 1. 以Oracle为例,要使用JDBC数据库就要先下一个 oracle JDBC的驱动,下载成功后把它放到soapUI安装目录下的 bin/e ...
- 深刻理解Java中形參与实參，引用与对象的关系
声明:本博客为原创博客,未经同意.不得转载! 原文链接为http://blog.csdn.net/bettarwang/article/details/30989755 我们都知道.在Java中,除了 ...
- Camera 模组
http://wenku.baidu.com/view/89d8c21014791711cc7917d5.html http://wenku.baidu.com/view/0cec54d5c1c708 ...
- 李洪强iOS开发之性能优化技巧
李洪强iOS开发之性能优化技巧 通过静态 Analyze 工具,以及运行时 Profile 工具分析性能瓶颈,并进行性能优化.结合本人在开发中遇到的问题,可以从以下几个方面进行性能优化. 一.view ...