Wie Sie eine Tabelle mit CSS gestalten, um maximale Wirkung zu erzielen und aufzufallen

Wie man eine Tabelle mit CSS so gestaltet, dass sie maximale Wirkung erzielt und bemerkt wird

Beim Umgang mit HTML (Hypertext Markup Language) und anderen Auszeichnungssprachen wie XML werden Sie auf viele Attribute und Tags stoßen. Tabellen sind Attribute, die Sie immer verwenden sollten, um es den Benutzern zu erleichtern, große Datenmengen zu durchsuchen, zu vergleichen und zu analysieren.

Mit Tabellen können die Benutzer die wichtigsten Punkte, Schlussfolgerungen oder Ergebnisse auf einen Blick erkennen, auch ohne den gesamten Artikel zu lesen. Sie können CSS verwenden, um das Erscheinungsbild Ihrer Tabellen zu gestalten und zu ändern.

Dies sind einige der Gründe, warum Sie eine Tabelle in Ihrer Anwendung gestalten müssen;

Verbessern Sie das visuelle Erscheinungsbild: Normale Tabellen können langweilig und schlicht sein. Die Gestaltung solcher Tabellen verbessert ihr Aussehen und macht sie für die Benutzer attraktiv.
Verbessern Sie die Zugänglichkeit: Durch die Gestaltung von Tabellen können Sie sie auch für Menschen mit Behinderungen zugänglich machen.
Verbessern Sie die Lesbarkeit: Sie können verschiedene Stylingtechniken verwenden, um den Benutzern das Überfliegen der in Ihren Tabellen dargestellten Daten zu erleichtern.
Markenbildung: Sie können Ihre Markenidentität verstärken, wenn Sie in Ihrer gesamten Anwendung einheitliche Schriftarten und Farben für Ihre Tabellen verwenden.
Gut für Suchmaschinen: Die Organisation Ihrer Daten in Tabellenformaten ist nützlich, wenn Sie Ihre Website in Suchmaschinen gut platzieren möchten.

Erstellen Sie eine einfache Tabelle mit HTML

Um zu demonstrieren, wie eine Tabelle in HTML funktioniert, erstellen wir einen Projektordner, navigieren in diesen Ordner und erstellen zwei Dateien: index.html, die unseren HTML-Code enthält, und styles.css, die unseren CSS-Code (Styling) enthält.

Wenn Sie mitmachen möchten, verwenden Sie diese Befehle, um loszulegen;

mkdir Styling-HTML-Tabellen

cd Styling-HTML-Tabellen

touch Styling-HTML-Tabellen

Sie haben nun den grundlegenden Projektordner, der Ihnen bei der Erstellung von HTML-Tabellen hilft. Ich möchte Ihnen nun verschiedene Programmiersprachen, ihre Anwendungsfälle und Beispiele von Unternehmen vorstellen, die diese Sprachen verwenden.

Um eine HTML-Tabelle zu erstellen, sollten alle Daten in den <table>...</table>-Tag eingeschlossen werden.

Erstellen Sie in Ihrer HTML-Datei die Grundstruktur eines HTML-Dokuments. Fügen Sie diesen Code innerhalb des <body>-Tags ein.

<table>

 <tr>

 <th>Sprache</th>

 <th>Gebräuchliche Anwendungen</th>

 <th>Unternehmen, die es verwenden</th>

 </tr>

 <tr>

 <td>Java</td>

 <td>Webanwendungen, Android-Anwendungen, Unternehmensanwendungen</td>

 <td>Google, Amazon, LinkedIn</td>

 </tr>

 <tr>

 <td>Python</td>

 <td>Datenwissenschaft, Webentwicklung, Automatisierung</td>

 <td>Google, Dropbox, Spotify</td>

 </tr>

 <tr>

 <td>JavaScript</td>

 <td>Web-Entwicklung, Front-End-Entwicklung, Browser-Scripting</td>

 <td>PayPal, Facebook, Netflix</td>

 </tr>

 <tr>

 <td>C </td>

 <td>Spielentwicklung, Systemprogrammierung, eingebettete Systeme</td>

 <td>Tesla, Microsoft, Adobe</td>

 </tr>

 <tr>

 <td>Schnell</td>

 <td>iOS Entwicklung, macOS Entwicklung</td>

 <td>Apfel</td>

 </tr>

 <tr>

 <td>PHP</td>

 <td>Web-Entwicklung, Server-seitiges Scripting, CMS</td>

 <td>WordPress, Wikipedia, Yahoo</td>

 </tr>

 </table&gt>

Wenn Sie sich diese Tabelle genau ansehen, werden Sie einige weitere Tags innerhalb des <table>-Tags entdecken: <tr>, <th> und <td>.

Diese Tags haben die folgende Funktion;

<tr>, sterben Tabellenzeile, befindet sich innerhalb des <table>-Elemente. Der <tr>-Tag kann ein oder mehrere <th>- und <td>-Elemente umschließen.
<th>, Tabellenkopf, ist im <tr>-Tag enthalten. Sein Inhalt ist standardmäßig fett gedruckt.
<td>, Tabellendaten, beschreibt den Inhalt der Daten in den Tabellenzellen.

Wenn Sie den Code, den wir oben geschrieben haben, rendern, werden wir dies in unserem Browser sehen;

CSS-Eigenschaften für die Gestaltung von Tabellen

Die Tabelle, die wir oben erstellt haben, ist voll funktionsfähig. Allerdings lässt sie viel zu wünschen übrig, da sie nicht gut gestylt ist. Um die gewünschten Stile zu erreichen und die Tabelle visuell ansprechend zu gestalten, werden wir CSS verwenden.

Erinnern Sie sich an die CSS-Datei, die wir erstellt haben? Es ist nun an der Zeit, sie zu verwenden. Allerdings müssen Sie Ihre CSS-Datei zunächst in Ihre HTML-Datei importieren, damit das Styling funktioniert. Wir haben unsere CSS-Datei styles.css genannt. Fügen Sie im Abschnitt <head> Ihres HTML-Dokuments Folgendes ein;

<link rel="stylesheet" href="styles.css">

Wir sind nun bereit, unsere Tabelle zu gestalten. Wir können sie wie folgt gestalten;

#1. Umrandung

Wir können einen Rahmen um die Zellen in unserer Tabelle hinzufügen. Dazu definieren wir eine Eigenschaft Grenze für die <th> und <td> Elemente. Wir können den Rahmen auf 2px einstellen.

th, td {

 border: 2px solid orange;

 }

Wir haben den Wert für den Rahmen auf 2 gesetzt und Orange als Farbe hinzugefügt.

Wenn Sie die neue Seite rendern, werden Sie Folgendes sehen;

#2. Rand einklappen

Wenn Sie sich den obigen Screenshot ansehen, werden Sie feststellen, dass zwischen den Rändern jeder Zelle Zwischenräume vorhanden sind. Die Eigenschaft border-collapse bestimmt, ob benachbarte Zellen in einer Tabelle einen gemeinsamen Rand haben sollen.

Wenn Sie möchten, dass die Zellen einen gemeinsamen Rand haben, fügen Sie diesen Code in Ihre CSS-Datei ein;

table {

 border-collapse: collapse;

}

Wenn Sie Ihre Seite rendern, können Sie sehen, dass die Zellen wie folgt einen gemeinsamen Rahmen haben;

Wenn Sie möchten, dass die Zellen unterschiedliche Ränder haben, fügen Sie dies zu Ihrer CSS-Datei hinzu;

table {

 border-collapse: getrennt;

}

Die gerenderte Seite sieht dann wie folgt aus;

#3. Abstand zwischen den Rändern

Mit der Eigenschaft border-space können wir einen kleinen Abstand zwischen den Zellen in unserer Tabelle einrichten. Wir legen die Regel innerhalb der Klasse table in unserer CSS-Datei fest.

Damit diese Eigenschaft funktioniert, müssen wir die Eigenschaft border-collapse: separate; verwenden.

Wir können unsere Tabellenklasse wie folgt gestalten;

table {

 border-collapse: separate;

 border-spacing: 3px;

 }

Die Ränder der Zellen haben einen Abstand von 3px.

Wenn Sie die Tabelle rendern, wird sie wie folgt aussehen;

#4. Tabellen-Layout

Die Eigenschaft Tabellen-Layout bestimmt die Art der Tabelle. Sie können Tabellen haben, die immer die gleiche Länge haben. Andererseits können Sie auch Tabellen erstellen, die sich je nach Inhalt ändern.

Wenn wir Zellen mit ähnlicher Größe haben möchten, können wir die Eigenschaft table-layout auf fixed setzen.

table-layout: fixed;

Unser endgültiger Code für die Klasse table lautet dann;

table {

 border-collapse: collapse;

 border-spacing: 3px;

 table-layout: fixed;

 }

Wenn wir möchten, dass sich die Zellen je nach Inhalt ändern, können wir die Eigenschaft table-layout auf auto ändern.

table-layout: auto;

Die endgültige Tabellenklasse in unserem CSS-Code wird sein;

Sehen Sie sich die letzte Zelle der Tabelle an und beachten Sie, dass ich diese Wörter hinzugefügt habe; MailChimp und vieles mehr.

Sie sehen nun, dass die Zellen in der letzten Zeile größer sind als der Rest, da das Tabellenlayout je nach Inhalt flexibel ist.

Das Styling, das wir bisher behandelt haben, bezog sich auf die gesamte Tabelle. Jetzt können wir uns auf einzelne Klassen konzentrieren, indem wir die Eigenschaften Hintergrundfarbe, Schriftart und Textausrichtung für Zeilen, Zellen oder Überschriften ändern.

Wir können diese Eigenschaften wie folgt gestalten;

#5. Hintergrundfarbe

Wir können den Hintergrund unserer obersten Zeile in gelb-grün ändern. Wir können den :first-child Pseudoklassen-Selektor verwenden, um unser Ziel zu erreichen.

Fügen Sie diesen Code zu Ihrem CSS-Code hinzu;

tr:first-child {

 background-color: yellowgreen;

 }

Der endgültig angezeigte Code sieht dann wie folgt aus;

#6. Schriftart

Wir können den Schriftstil oder die Schriftgröße für bestimmte Zeilen, Spalten oder Zellen in unserer Tabelle ändern.

Wir werden den Inhalt der letzten Spalte auf unserer Seite (Unternehmen mit) auswählen, um den Schriftstil zu ändern.

Wir werden alle Inhalte in dieser Spalte kursiv machen, indem wir den Klassenselektor td:last-child anvisieren. Sie können den folgenden Code in Ihre CSS-Datei einfügen;

td:last-child {

 font-style: italic;

}

Die endgültige Ausgabe sieht wie folgt aus, wenn Sie die gerenderte Seite neu laden;

Wir können auch die Schriftfarbe und -größe der ersten Spalte ändern, um sie einzigartig zu machen.

Fügen Sie den folgenden Code in Ihre CSS-Datei ein;

tr td:first-child {

 color: red;

 font-size: x-large;

 font-weight: bolder;

 }

Wenn Sie Ihre Seite rendern, werden Sie folgendes feststellen: Die Inhalte in der ersten Spalte (Sprache) haben eine größere Schriftgröße, sind rot und fetter.

Wie Sie die Tabelle responsiv machen

Die Tabelle, die wir erstellt haben, ist möglicherweise nicht für kleine Bildschirme geeignet. Sie können die Developer Tools von Chrome oder ein externes Tool wie dieses verwenden, um zu testen, ob Ihr Code ansprechbar ist.

Es gibt mehrere Ansätze, die Sie wählen können, aber wir werden nur einen behandeln.

Befolgen Sie diese Schritte;

Legen Sie die Breite des <table>-Elemente in Ihrem Code fest;

table {

 width: 100%;

 border-collapse: collapse;

 table-layout: fixed;

}

Setzen Sie bei td und th einen Wortumbruch, um lange Wörter in der Zelle zu erzeugen.

th, td {

 border: 2px solid orange;

 word-break: break-word;

 }

Best Practices für die Gestaltung von Tabellen

CSS kann einmal Spaß machen, vor allem, wenn Sie es beherrschen. Im Folgenden finden Sie einige der besten Praktiken, um sicherzustellen, dass Sie beim Styling Ihrer Tabellen das Beste herausholen;

Verwenden Sie ein externes Stylesheet: Wir hatten die Möglichkeit, ein Inline-Styling zu verwenden, aber wir haben uns für ein externes Blatt entschieden. Wir konnten unser Styling für verschiedene Tabellen wiederverwenden und so die Entwicklungszeit verkürzen.
Halten Sie es einfach: Sie könnten sich dazu hinreißen lassen, Ihre Tabellen zu sehr zu stylen. Behalten Sie jedoch immer ein einfaches Design bei und sorgen Sie dafür, dass Ihre Tabellen überschaubar und lesbar sind.
Fügen Sie den Rahmen zu Ihren Tabellen hinzu: Ein Rahmen macht eine Tabelle leichter lesbar und übersichtlicher.
Verwenden Sie einheitliche Farben: Wenn Sie mehrere Tabellen auf Ihren Webseiten haben, achten Sie darauf, dass Sie einheitliche Farben und Schriftarten verwenden. Die Verwendung Ihrer Markenfarben kann die Sichtbarkeit Ihrer Marke verbessern.
Gestalten Sie Ihre Tabellen responsive: Sie kennen die Bildschirmgröße der Endnutzergeräte nicht.
Verwenden Sie Beschriftungen, um Ihre Tabellen zu beschreiben: Die Beschriftung beschreibt kurz, worum es in der Tabelle geht.
Verwenden Sie Leerzeichen, um Ihre Tabellen zu trennen: Wenn mehrere Tabellen aufeinander folgen, fügen Sie etwas Leerraum hinzu und beschriften Sie entsprechend.

Fazit

Ich glaube, Sie können jetzt eine einfache HTML-Tabelle erstellen und gestalten. Wir haben vielleicht nicht alles abgedeckt, denn HTML und CSS sind sehr umfangreich. Sie können kleinere oder größere Tabellen erstellen, je nach Art der Daten, die Sie erfassen möchten.

Schauen Sie sich die CSS-Spickzettel an, wenn Sie mehr über CSS erfahren möchten und wie Sie es zur Verbesserung Ihrer Benutzeroberfläche einsetzen können.

Titus Kamunya

Autor