四个好看的table表格样式
2024-04-04 00:32:44
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:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
<!-- Table goes in the document BODY -->
<table class="gridtable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</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>
2.带背景图的CSS样式表格
<!-- 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:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.imagetable th {
background:#b5cfd2 url('cell-blue.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
table.imagetable td {
background:#dcddc0 url('cell-grey.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
</style>
<!-- Table goes in the document BODY -->
<table class="imagetable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</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样式表格（需要用到JSP）
<!-- 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 = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}
window.οnlοad=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:#333333;
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 1</th><th>Info Header 2</th><th>Info Header 3</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>
4.鼠标悬停高亮的CSS样式表格 (需要JSP)
<!-- 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:#333333;
border-width: 1px;
border-color: #999999;
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 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
<td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
<td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
<td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
<td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
<td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>
四个好看的table表格样式相关推荐
- 分享两种好看的CSS表格样式
分享两种好看的CSS表格样式,要的摘走,呵呵(如上图). 代码: <!DOCTYPE html><html><head><meta http-equiv=&q ...
- 好看的table css样式
漂亮的table表格样式css源码漂亮的table表格样式 css源码 <head><title></title><style type="text ...
- 普通table表格样式大全
普通table表格样式及代码大全(全) 普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse&q ...
- bootstrap 黑边框表格样式_设置Bootstrap Table表格样式并隔行变色
设置Bootstrap Table表格样式并隔行变色 设置bootstrap-table表格样式可以通过设置classess属性进行设置,官方默认支持黑色主题.隔行变色等样式,你也可以自定义样式把你的 ...
- 普通table表格样式及代码大全(全)(一)
普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...
- 普通table表格样式及代码大全(全)
普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...
- php中表格的美化,美化网页中的Table表格样式 - 文章教程
Table表格曾经是网页布局的霸主,可惜现在用的少了,主要还是用在表现表格结构化数据的布局,虽说用得少,但是表格用起来还是很方便的,至少有时候比DIV+CSS更方便,关于如何美化网页中的Table表格 ...
- Web前端开发笔记——第三章 CSS语言 第四节 CSS列表、表格样式
目录 一.CSS列表样式 (一)设计列表项前标志类型 (二)设计列表项前标志位置 (三)设计列表项图片 (四)设计整体列表属性 二.CSS表格样式 (一)设计表格大小 (二)设计表格边框 (三)奇偶选 ...
- html table的边框线怎么变圆角_css实现带有四个圆角的table表格 2019年9月6日
CSS制作一张带有四个圆角的表格 示例如下: 实例 星期星期一星期二星期三星期四星期五 上午 8:30~11:50语文数学英语政治历史语文数学英语政治历史语文数学英语政治历史下午 13:50~17:3 ...
- Element UI Table表格样式调整
调整Element UI Table表格的样式 最终效果: 单元格合并,样式调整 模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
最新文章
- # vue.js 之 对vue.js基础理解
- CKO将成为企业发展的军师－－转自世界名人网
- Ksusha and Array (vector)
- 数据库原理与应用（SQL Server）笔记 第十一章 游标
- 智能家居市场需求矛盾深层原因分析
- 万字长文丨1分36秒，100亿，支付宝技术双11答卷：没有不可能
- BDI Agent模型结构
- JavaScript基本类型和引用类型
- 如何自学成为设计师_如何成为平面设计师？平面设计师平时做什么？教你做好平面设计...
- 程序员遇到什么样的工作状态应该果断跳槽走人？
- C++ const，static，inline
- 微信浏览器视频自动播放
- [转载]Spring zuul日志配置
- ReentrantLock 源码简单分析
- DNA甲基化经CTCF和黏连蛋白复合体调节RNA可变剪切
- 指针的类型(即指针本身的类型)和指针所指向的类型是两个概念
- SqlServer中的Top * With Ties
- 图标字体的优缺点和使用
- 架构师工程攻城略地需要具备的八大核心能力
- linux 恶意软件检测,Linux恶意软件检测共享主机