Teilen Sie vier sehr schöne und praktische Tabellen im CSS-Stil

1. CSS-Tabelle mit Einzelpixelrahmen

Dies ist ein sehr häufig verwendeter Tabellenstil.

Quellcode:

<!-- 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-Stil mit Hintergrundbild Der Die Tabelle

ähnelt der obigen, es gibt jedoch in jedem Raster ein zusätzliches Hintergrundbild.

cell-blue.jpg

cell-grey.jpg

1. Laden Sie die beiden Bilder oben herunter und benennen Sie sie cell-blue.jpg und cell-grey.jpg

2. Kopieren Sie den Code unten an die gewünschte Stelle. Denken Sie daran, die Bild-URL zu ändern

<!-- 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. CSS-Stiltabelle, die automatisch die Farbe der gesamten Zeile ändert (erfordert JS)

Diese CSS-Stiltabelle ändert automatisch die Farbe jeder Zeile, in unserem Dies ist nützlich, wenn eine große Tabelle häufig aktualisiert werden muss.

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-Stiltabelle mit Mouseover-Hervorhebung (erfordert JS)

Es gibt ein Problem mit der reinen CSS-Anzeigetabellenhervorhebung im IE, daher wird hier JS zur Hervorhebung verwendet (da der csdn-Blog die Verwendung von js einschränkt, werde ich den Blog in naher Zukunft auf meinen eigenen auf dem Webhost migrieren ).

Eine Sache, auf die Sie achten sollten, ist, die Hintergrundfarbe des Rasters nicht zu definieren.

<!-- 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>

---

Die gängigsten CSS-Stiltabellen finden Sie hier. Ich hoffe, dass sie für alle hilfreich sind.

Das obige ist der detaillierte Inhalt vonTeilen Sie vier sehr schöne und praktische Tabellen im CSS-Stil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!