1. 单像素边框CSS表格

这是一个很常用的表格样式。

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#;
border-width: 1px;
border-color: #;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #;
background-color: #ffffff;
}
</style> <!-- Table goes in the document BODY -->

2. 带背景图的CSS样式表格

和上面差不多,不过每个格子里多了背景图。

cell-blue.jpg

cell-grey.jpg

1. 下载上面两张图,命名为cell-blue.jpg和cell-grey.jpg

2. 拷贝下面的代码到你想要的地方,记得修改图片url

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.imagetable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#;
border-width: 1px;
border-color: #;
border-collapse: collapse;
}
table.imagetable th {
background:#b5cfd2 url('cell-blue.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #;
}
table.imagetable td {
background:#dcddc0 url('cell-grey.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #;
}
</style> <!-- Table goes in the document BODY -->
<table class="imagetable">
<tr>
<th>Info Header </th><th>Info Header </th><th>Info Header </th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>

3. 自动换整行颜色的CSS样式表格(需要用到JS)

这个CSS样式表格自动切换每一行的颜色,在我们需要频繁更新一个大表格的时候很有用。

代码:

<!-- Javascript goes in the document HEAD -->
<script type="text/javascript">
function altRows(id){
if(document.getElementsByTagName){ var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr"); for(i = ; i < rows.length; i++){
if(i % == ){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
} window.onload=function(){
altRows('alternatecolor');
}
</script> <!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</style> <!-- Table goes in the document BODY -->
<table class="altrowstable" id="alternatecolor">
<tr>
<th>Info Header </th><th>Info Header </th><th>Info Header </th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
<td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
<td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table> <!-- The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->

4. 鼠标悬停高亮的CSS样式表格 (需要JS)

纯CSS显示表格高亮在IE中显示有问题,所以这边使用了JS来做高亮(由于csdn博客限制了js的使用,我会在近期将博客迁移放到自己的web主机上)。

有一点要小心的是,不要定义格子的背景色。

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.hovertable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#;
border-width: 1px;
border-color: #;
border-collapse: collapse;
}
table.hovertable th {
background-color:#c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.hovertable tr {
background-color:#d4e3e5;
}
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
</style> <!-- Table goes in the document BODY -->
<table class="hovertable">
<tr>
<th>Info Header </th><th>Info Header </th><th>Info Header </th>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>

最常见的几种CSS样式表格都在这了,希望对大家有帮助

原文:HTML Tables with CSS Styles

表格CSS样式美化的更多相关文章

  1. __x__(40)0909第五天__表格 table 的 css 样式 美化

    如果就向下面的代码那样,不写 tbody , 则浏览器自添加 tbody , 并将所有的 tr 移入 tbody 意味着 tr 并非 table 的子元素,而是 tbody 的子元素. 所以 以后编写 ...

  2. table <thead>表格css‘样式

    <table class="table table-bordered table-hover" id=""> <thead> <t ...

  3. html input[type=file] css样式美化【转藏】

    相信做前端的都知道了,input[type=file]和其他输入标签不一样,它的事件必须是在触发自身元素上,而不能是其他元素.所以不能简单的把input隐藏,放个button上去. <a hre ...

  4. css样式美化 下拉框 select 样式

    <span class="setleft wid80"><span class="fyhbx">*</span>入库类型 : ...

  5. 前端切图:一个好看的表格css样式

    <!DOCTYPE html><html>        <head>        <meta charset="UTF-8">  ...

  6. css样式 -- 表格不会因为字体过长导致字体溢出的问题

    常常碰到因为表格大小就麽大了,字体过长会爆炸溢出的问题,我们后端就用这个可以了,溢出的可以省略号 ... 代替好了. /* 在表格css样式加上这三个就可以了 效果就会变成 “abc...” */ { ...

  7. 美丽的表格样式(使用CSS样式表控制表格样式)

    按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...

  8. 漂亮的表格样式–>使用CSS样式表控制表格样式

    依照WEB2.0风格,设计了几个表格样式,希望大家喜欢.WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择.现在介绍使用CSS样式表来控制.美化表格的方法. ...

  9. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

随机推荐

  1. paip.提高效率---微信 手机app快速开发平台—微网络撬动大市场

    paip.提高效率---微信 手机app快速开发平台-微网络撬动大市场   手机app快速开发平台 尤其适合crm系统,呼叫中心等业务功能...    作者Attilax  艾龙,  EMAIL:14 ...

  2. paip.数组以及集合的操作uapi java php python总结..

    paip.数组以及集合的操作uapi 作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/att ...

  3. MySQL分库分表总结参考

    单库单表 单库单表是最常见的数据库设计,例如,有一张用户(user)表放在数据库db中,所有的用户都可以在db库中的user表中查到. 单库多表 随着用户数量的增加,user表的数据量会越来越大,当数 ...

  4. 使用vs自带的性能诊断工具

    visual studio是个强大的集成开发环境,内置了程序性能诊断工具.下面通过两段代码进行介绍. static void Main( string[] args) { Test1(); Test2 ...

  5. C#通过SQL 添加,删除,或者修改表名。

    这是我在 https://forums.asp.net/t/2106051.aspx?Create+Dynamic+table+in+SQL+using+C+ 的回复,如果其他人需要,可以参考 如果你 ...

  6. 解决.Net 4.0 A potentially dangerous Request.Form value was detected from the client 异常

    在web.config中加入 <httpRuntime maxRequestLength="22000" executionTimeout="43200" ...

  7. 使用LotusScript操作Lotus Notes RTF域

    Lotus Notes RTF域的功能也非常强大,除了支持普通的文本以外,还支持图片.表格.嵌入对象.Http 链接.Notes 链接.附件等等众多的类型.本文将介绍如何使用这些类来灵活操作富文本域. ...

  8. 如何选择开源许可证&如何修改项目使其符合某种开源许可证

    作者:zyl910 很多文章介绍了详细的解说了各种开源许可证及它们的区别.但是,具体该选择哪一种许可证?如何修改项目使其符合某种开源许可证?就很少见到指导了.于是本文探讨这两个问题. 一.如何选择开源 ...

  9. oreData的学习记录

    1.如果想创建一个带有coreData的程序,要在项目初始化的时候勾选中 2.创建完成之后,会发现在AppDelegate里多出了几个属性,和2个方法 <span style="fon ...

  10. ios7 UITableView 分割线在 使用selectedBackgroundView 选中时有些不显示

    UITableView  选中cell ,默认会有一个灰色的背景遮罩效果,这个灰色遮罩就是cell 自带的 selectedBackgroundView 我们可以设置selectedBackgroun ...