Share four very beautiful and practical CSS style tables

1. Single-pixel border CSS table

This is a very commonly used table style.

Source code:

<!-- 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 style table with background image

Similar to the above, but with an additional background image in each grid.

cell-blue.jpg

cell-grey.jpg

1. Download the two pictures above and name them cell-blue.jpg and cell-grey.jpg

2. Copy the code below to where you want, remember to modify the image 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:#333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
}
table.imagetable th {
	background:#b5cfd2 url(&#39;cell-blue.jpg&#39;);
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #999999;
}
table.imagetable td {
	background:#dcddc0 url(&#39;cell-grey.jpg&#39;);
	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. A CSS style table that automatically changes the color of the entire row (requires JS)

This CSS style table automatically switches the color of each row when we need it frequently Useful when updating a large table.

Code:

<!-- 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.onload=function(){
	altRows(&#39;alternatecolor&#39;);
}
</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>

<!--  The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->

---

4. CSS style table highlighted by mouse hover (requires JS)

There is a problem with pure CSS display table highlighting in IE, so JS is used here for highlighting (since the csdn blog restricts the use of js, I will migrate the blog to my own web host in the near future superior).

One thing to be careful about is not to define the background color of the grid.

<!-- 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 onmouseover="this.style.backgroundColor=&#39;#ffff66&#39;;" onmouseout="this.style.backgroundColor=&#39;#d4e3e5&#39;;">
	<td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor=&#39;#ffff66&#39;;" onmouseout="this.style.backgroundColor=&#39;#d4e3e5&#39;;">
	<td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor=&#39;#ffff66&#39;;" onmouseout="this.style.backgroundColor=&#39;#d4e3e5&#39;;">
	<td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor=&#39;#ffff66&#39;;" onmouseout="this.style.backgroundColor=&#39;#d4e3e5&#39;;">
	<td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor=&#39;#ffff66&#39;;" onmouseout="this.style.backgroundColor=&#39;#d4e3e5&#39;;">
	<td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>

---

The most common CSS style tables are here, I hope it will be helpful to everyone

The above is the detailed content of Share four very beautiful and practical CSS style tables. For more information, please follow other related articles on the PHP Chinese website!