四个好看的CSS样式表格

大家好，又见面了，我是全栈君，祝每个程序员都可以多学几门语言。

1. 单像素边框CSS表格

这是一个非经常常使用的表格样式。

四个好看的CSS样式表格

源码：

<!– CSS goes in the document HEAD or added to your external stylesheet –><br />
<style type=”text/css”><br />
table.gridtable {<br />
	font-family: verdana,arial,sans-serif;<br />
	font-size:11px;<br />
	color:#333333;<br />
	border-width: 1px;<br />
	border-color: #666666;<br />
	border-collapse: collapse;<br />
}<br />
table.gridtable th {<br />
	border-width: 1px;<br />
	padding: 8px;<br />
	border-style: solid;<br />
	border-color: #666666;<br />
	background-color: #dedede;<br />
}<br />
table.gridtable td {<br />
	border-width: 1px;<br />
	padding: 8px;<br />
	border-style: solid;<br />
	border-color: #666666;<br />
	background-color: #ffffff;<br />
}<br />
</style></p>
<p><!– Table goes in the document BODY –><br /><table class=”gridtable”><br /><tr><br />	<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th><br /></tr><br /><tr><br />	<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td><br /></tr><br /><tr><br />	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td><br /></tr><br /></table><br />

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

和上面差点儿相同，只是每一个格子里多了背景图。

四个好看的CSS样式表格

四个好看的CSS样式表格 cell-blue.jpg

四个好看的CSS样式表格 cell-grey.jpg

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

2. 拷贝以下的代码到你想要的地方，记得改动图片url

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

3. 自己主动换整行颜色的CSS样式表格（须要用到JS）

这个CSS样式表格自己主动切换每一行的颜色，在我们须要频繁更新一个大表格的时候非常实用。

四个好看的CSS样式表格

代码：

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

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

纯CSS显示表格高亮在IE中显示有问题，所以这边使用了JS来做高亮（因为csdn博客限制了js的使用，我会在最近将博客迁移放到自己的web主机上）。

四个好看的CSS样式表格

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

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

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

原文：HTML Tables with CSS Styles

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/118195.html原文链接：https://javaforall.net