CSS: Tabellen verschönern

10. Juli 2016 von | Kategorie(n): Programmierung
Schlagwörter: // // //

Die reinen HTML-Tabellen sind ja nicht so geil. Daher kann man ein bisschen CSS ansetzen und fertig ist das! 😀

[the_ad id=“1113″]

Schon mal fĂŒr den Vorgeschmack (:D): Mit CSS kann man sogar eine Zebra-Tabelle machen. Auch das siehst du hier.

<html>
<head>
	<title> Tabellen mit CSS </title>
	<style type="text/css">
		table {
			background: #ccc;
			/* Schrift schön machen */
			font-family: Arial;
			color: #222;
			/* Abstand zwischen den Zellen entfernen */
			border-spacing: 0;
		}
	
		/* jede 2. Reihe */
		tr:nth-child(2n) {
			background:#ddd;
		}
		
		th, td {
			margin: 0;
			padding: 5px;
			/* Text zentrieren */
			text-align: center;
		}
		
		th {
			background: #333;
			color: #eee;			
		}
		
	</style>
</head>
<body>
<h2> Super Tabelle </h2>
<table>
	<tr>
		<th> Platz </th>
		<th> Name </th>
		<th> Punkte </th>
	</tr>
	<tr>
		<td> 1 </td>
		<td> Rick </td>
		<td> 28 </td>
	</tr>
	<tr>
		<td> 2 </td>
		<td> Daryl </td>
		<td> 25 </td>
	</tr>
	<tr>
		<td> 3 </td>
		<td> Michonne </td>
		<td> 18 </td>
	</tr>
</table>
</body>
</html>

Ansehen

Eigentlich gibt es hier wenig neue Dinge. Du merkst bestimmt schon, dass CSS aus „Bausteinen“ besteht, die auf (fast) alle HTML-Objekte anwendbar sind. Aus diesem Grund kann ich die ErklĂ€rung an dieser Stelle kurz halten. 😉tabelle-css

ErklĂ€rung: Die einzelnen Elemente der Tabelle werden in CSS mit th, td, tr (usw.) angesprochen.. also mit den selben Namen wie in HTML :D. Neu ist hier jedoch :nth-child(2n). Dies sorgt fĂŒr diesen Zebra-Look, welchen ich extrem nice finde. Nicht immer, aber meistens 😀

Das war’s auch schon. Mehr gibt’s nicht zu sagen. Schau dir das Beispiel am besten selber an und spiele ein bisschen rum, dann wirst du sehen, wie sich was verĂ€ndert. 😉

 

Senf dazugeben ? Unten ! 😀

<Tim Poerschke />

 

Was denkst du ĂŒber diesen Post?
  • Gut (0)
  • Hilfreich (0)
  • Nicht gut (0)
  • Lustig 😀 (0)
Diesen Post teilen:
Facebooktwittergoogle_plusredditpinterestlinkedinmail

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

5 + 5 =