分享4个漂亮的css表格样式

话不多说,直接上四个比较经典的漂亮css表格样式代码:

①第一个,浅灰色表和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;
}




	Info Header 1Info Header 2Info Header 3


	Text 1AText 1BText 1C


	Text 2AText 2BText 2C

②第二个配色蓝黄搭配

这个需要用到下面2张图片

先保存这两张图片然后使用下面代码

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;
}




	Info Header 1Info Header 2Info Header 3


	Text 1AText 1BText 1C


	Text 2AText 2BText 2C

③淡蓝色的css表格样式，可以配合js来实现自动换行

此样式对应代码（已包含自动换行的js代码）

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');
}




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;
}





	Info Header 1Info Header 2Info Header 3


	Text 1AText 1BText 1C


	Text 2AText 2BText 2C



	Text 3AText 3BText 3C


	Text 4AText 4BText 4C


	Text 5AText 5BText 5C

④依旧是淡蓝色风格，同时配合了js来实现表格行鼠标悬停高亮的功能

此样式对应的css和javascript代码均已包含其中

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;
}




	Info Header 1Info Header 2Info Header 3


	Item 1AItem 1BItem 1C


	Item 2AItem 2BItem 2C


	Item 3AItem 3BItem 3C


	Item 4AItem 4BItem 4C


	Item 5AItem 5BItem 5C

这都是一些经典的css表格样式，虽然现在的审美风格略有变化，但是在这些基础代码的框架下，对配色略作改动就可以实现想要的效果。

赞(4)

打赏 微信 支付宝 QQ 扫码打赏

css中表格有多余的边框 css表格样式 css