CSS: Tabellen verschönern

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.

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

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 (5)
  • Hilfreich (0)
  • Nicht gut (1)
  • Lustig 😀 (0)

von | Kategorie: Programmierung
Schlagwörter: // // //

Schreibe einen Kommentar

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

53 − = 51