HTML - Table Styling

Hallo da, zukünftige Web-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt der HTML-Tabellenformatierung zu sein. Als jemand, der seit Jahren Informatik unterrichtet, kann ich Ihnen sagen, dass das Beherrschen der Tabellenformatierung so ist wie das Lernen zu malen - es beginnt mit dem Verständnis Ihres Canvas und Ihrer Werkzeuge. Also tauchen wir ein und lassen diese Tabellen erstaunlich aussehen!

Normal HTML Table

Bevor wir mit dem Styling unserer Tabellen beginnen, lassen Sie uns daran erinnern, wie eine grundlegende HTML-Tabelle aussieht. Hier ist ein einfaches Beispiel:

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Zeile 1, Zelle 1</td>
<td>Zeile 1, Zelle 2</td>
</tr>
<tr>
<td>Zeile 2, Zelle 1</td>
<td>Zeile 2, Zelle 2</td>
</tr>
</table>

Dieser Code erstellt eine grundlegende Tabelle mit zwei Spalten und drei Zeilen (einschließlich der Kopfzeile). Es ist funktional, aber ehrlich gesagt, ist es etwa so aufregend wie zuzusehen, wie Lack trocknet. Genau dort kommt das Styling ins Spiel!

HTML Table Styles

Nun lassen Sie uns über die verschiedenen Möglichkeiten sprechen, wie wir unsere Tabellen stylen können. Denken Sie daran als Pinsel und Farben in Ihrer Webdesign-Werkzeugkiste:

Eigenschaft	Beschreibung
border	Setzt den Rand um die Tabelle und Zellen
border-collapse	Bestimmt, ob Zellränder zu einem einzigen Rand zusammengefallen oder getrennt sind
width	Setzt die Breite der Tabelle
height	Setzt die Höhe der Tabelle
text-align	Ausrichtet den Text in den Zellen (links, rechts, zentriert)
vertical-align	Ausrichtet den Text vertikal in den Zellen (oben, mittig, unten)
padding	Setzt den Abstand zwischen dem Zellrand und seinem Inhalt
background-color	Setzt die Hintergrundfarbe der Tabelle oder Zellen
color	Setzt die Textfarbe
font-family	Setzt die Schriftart für den Text
font-size	Setzt die Größe des Textes

HTML Table Styling Examples

Lassen Sie uns diese Eigenschaften mit einigen Beispielen in die Tat umsetzen. Ich verspreche, bis zum Ende dieser Anleitung werden Sie Tabellen wie ein Profi stylen können!

Beispiel 1: Basic Table Styling

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>Name</th>
<th>Alter</th>
</tr>
<tr>
<td>Max Mustermann</td>
<td>30</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
</tr>
</table>

In diesem Beispiel haben wir einige grundlegende Stile hinzugefügt. Die Eigenschaft border-collapse: collapse verschmilzt die Zellränder, was ein saubereres Aussehen erzeugt. Wir haben die Tabellenbreite auf 100% ihres Behälters gesetzt, Ränder zu den Zellen hinzugefügt, etwas Abstand hinzugefügt und der Kopfzeile eine helle Grautönung verliehen. Es ist, als hätte Ihre Tabelle einen sauberen Haarschnitt und ein frisches Hemd bekommen!

Beispiel 2: Zebra Striping

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>Produkt</th>
<th>Preis</th>
</tr>
<tr>
<td>Apfel</td>
<td>$1.00</td>
</tr>
<tr>
<td>Banane</td>
<td>$0.75</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.90</td>
</tr>
</table>

Hier haben wir das Konzept der Zebra-Strukturierung eingeführt. Der Selector tr:nth-child(even) zielt auf ungerade Zeilen und gibt ihnen einen hellen Grauton. Dieses abwechselnde Farbschema macht es den Benutzern einfacher, Zeilen über die Tabelle hinweg zu verfolgen. Es ist, als hätte Ihre Tabelle einen schicken Streifenanzug bekommen!

Beispiel 3: Responsive Table

<style>
.responsive-table {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
min-width: 600px;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
@media screen and (max-width: 600px) {
th, td {
display: block;
}
tr {
margin-bottom: 15px;
}
th {
text-align: center;
}
}
</style>

<div class="responsive-table">
<table>
<tr>
<th>Name</th>
<th>Position</th>
<th>Büro</th>
<th>Alter</th>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemarchitekt</td>
<td>Edinburgh</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Buchhalter</td>
<td>Tokio</td>
<td>63</td>
</tr>
</table>
</div>

Dieses Beispiel führt Responsivität in unsere Tabelle ein. Auf größeren Bildschirmen verhält es sich wie eine normale Tabelle. Aber auf kleineren Bildschirmen (weniger als 600px breit) schaltet es in eine kartenartige Anordnung um, bei der jede Zelle als Block angezeigt wird. Es ist, als hätte Ihre Tabelle Yoga gelernt - es wird flexibel und passt sich verschiedenen Bildschirmgrößen an!

Conclusion

Und voilà, Leute! Wir haben unsere Tabellen von schlicht und langweilig zu stilvoll und responsiv gemacht. Denken Sie daran, das Styling von Tabellen dreht sich alles um Verbesserung der Lesbarkeit und Benutzererfahrung. Es geht nicht nur darum, Dinge hübsch zu machen (obwohl das auch Spaß macht)!

Während Sie Ihre Reise im Webdesign fortsetzen, experimentieren Sie weiter mit verschiedenen Stilen. Vielleicht probieren Sie Hover-Effekte für Zeilen aus, oder spielen Sie mit verschiedenen Farbschemata. Die Möglichkeiten sind endlos!

Genau wie eine gute Mahlzeit ohne die richtige Präsentation nicht vollständig ist, ist ein gut strukturiertes HTML-Dokument ohne ordnungsgemäß gestaltete Tabellen nicht vollständig. Also los, stylisieren Sie diese Tabellen! Und denken Sie daran, in der Welt der Webentwicklung macht Übung den Meister. Viel Spaß beim Coden!

Credits: Image by storyset