（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 5695 Gym Class
拓扑排序. #include<cstdio> #include <iostream> #include<cstring> #include<cmath> ...
- HDU 1024 【DP】
题意: 给n个数将其分成连续的m组,使得这些组的数加和最大,组与组之间可以空数. /* dp[i][j]表示将前j个数分成i个组最大值 状态转移方程是: dp[i][j]=max(dp[i-1][0. ...
- jenkins节约硬盘空间的几个办法
jenkins真是费硬盘和内存,我们先聊聊硬盘问题怎么解决: 1.不要保留太多的构建记录.发布包数量 相关描述如下:取最先匹配进行执行 2.构建完,删除吧
- 基于51单片机的CAN通讯协议C语言程序
//-----------------------函数声明,变量定义-------------------------------------------------------- #includ ...
- hdu 1068 Girls and Boys（匈牙利算法求最大独立集）
Girls and Boys Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- hdoj 1533 Going Home 【最小费用最大流】【KM入门题】
Going Home Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...
- 再理解HDFS的存储机制
再理解HDFS的存储机制 1. HDFS开创性地设计出一套文件存储方式.即对文件切割后分别存放: 2. HDFS将要存储的大文件进行切割,切割后存放在既定的存储块(Block)中,并通过预先设定的优化 ...
- aspx后台引用不到服务器控件
从其他地方拷贝的页面到自己的项目,后台CS代码引用hidden时,提示找不到,百度,发现可能是网站项目和Web应用程序的区别,右键aspx转化为Web应用程序即可.
- http的session和cookie
1 http session和http请求之间的关系 http协议是无状态的,一次会话服务端需要处理多次http请求,就算是长连接,也是要发送多次请求的,由于http无状态所有每次的请求都是独立的,服 ...
- JDBC访问数据库查询信息的步骤（硬编码格式）
1 Class.forName()加载驱动 2 DriverManager获取Connect连接 3 创建Statement执行SQL语句 4 返回ResultSet查询结果 5释放资源 packag ...