Bessere HTML-Tabellen erstellen

Seltsamerweise ist eine der schwierigsten zu beherrschenden Web-Technologien eine der ersten, die für den Browser nach Text und Bildern verfügbar ist. Das Problem ist heute noch größer, da so viele verschiedene Gerätetypen berücksichtigt werden müssen.

Perfekte Tabellen sind fast unmöglich zu erstellen, es sei denn, sie enthalten so wenige Elemente, dass wahrscheinlich keine Probleme ausgelöst werden. Zu den möglichen Fehlern gehören:

  • Textumbruch falsch
  • Rechtfertigungsfehler
  • Tabellen-Rendering außerhalb des Bildschirms
  • Probleme beim Blättern
  • Zeilenhöhenfehler
  • Spaltenbreitenfehler
  • Allgemeine Hässlichkeit oder Unordnung

In diesem Artikel erfahren Sie, wie Sie derartige Probleme vermeiden, damit Ihre Tische die besten Chancen haben, einen guten Eindruck zu erzeugen.

Vermeidungsstrategien zu vermeiden

Da Tische so schwer zu bekommen sind, versuchen manche Leute, sie nicht zu verwenden. Einige gängige Strategien verwenden CSS zum Erstellen einer falschen Tabelle und ein Bild der Datentabelle, ohne diese in Code zu implementieren.

Beide Vermeidungsstrategien weisen Mängel auf und sollten vermieden werden. Bei der Verwendung von CSS zum Imitieren einer Tabelle fehlt die semantische Struktur, die einer Tabelle innewohnt, was zu Problemen bei der Verwendbarkeit und der Zugänglichkeit führen kann.

Ein Bild einer Tabelle leidet nicht unter den Problemen, die in der Einführung aufgeführt sind, beeinträchtigt jedoch Ihr SEO-Potenzial und kann nicht einfach geändert werden, wenn Ihre Daten aktualisiert werden müssen. Es führt auch Probleme mit der Benutzerfreundlichkeit und Zugänglichkeit ein.

Frameworks sind deine Freunde

Übliche Frameworks wie Bootstrap und Foundation enthalten viele zeitsparende Tools. Tabellen bilden dabei keine Ausnahme. Das Erstellen eines klassisch aussehenden Tisches in Bootstrap ist nicht schwierig, bringt jedoch einige Einschränkungen mit sich, wenn Sie nur das Rack aufbauen, ohne Ihren Bemühungen eine maßgeschneiderte Anpassung hinzufügen zu müssen.

Sieht nicht alles aus

Da Inhalt und Stil immer unabhängig sein sollten, kann es sinnvoll sein, Ihre Tabelle zunächst in reinem HTML zu erstellen, um sicherzustellen, dass sie gut aussieht, bevor ein spezielles Tabellen-Styling angewendet wird.

Dies kann auch hilfreich sein, um Sie daran zu erinnern, dass eine gute Tischkonstruktion mehr erfordert, als nur den Tisch gut aussehen zu lassen. Es sollte auch ein nützliches Informationsbereitstellungssystem sein. Wenn das Ziel der Tabelle nicht darin besteht, Informationen zu übermitteln, sollten Sie keine Tabelle für das verwenden, was Sie gerade tun.

Ziel ist die Erreichbarkeit

Einige Leute haben Schwierigkeiten, gedruckten Text zu sehen und zu lesen, daher ist es eine gute Idee, Tabellen für sie zugänglich zu machen. Hier erfahren Sie alles, was Sie wissen müssen, um Ihre Tische besser zugänglich zu machen WebAIM.

Erwägen Sie, den Tabellenkomponenten ID-Werte zu geben

Für die maximale Kontrolle über jeden Teil der Tabelle (Zeilen, Zellen) können Sie in Betracht ziehen, ihnen individuelle ID-Werte zuzuweisen. Wenn Sie auch Klassenwerte hinzufügen, erhalten Sie noch mehr Flexibilität.

Wenn Sie diese Dinge tun, wird Ihnen viel mehr Arbeit abverlangt. Daher ist es nur praktisch, wenn Sie einen Artikel anhand der Referenz fein abstimmen müssen. Wenn Sie sich dafür entscheiden, können Sie jedes Tabellenelement direkt mit JavaScript und CSS bearbeiten.

Eine der Schwierigkeiten bei der Tabellenerstellung besteht darin, dass wir Zeilen deklarieren, aber keine Spalten. Die Spalten werden dynamisch erstellt und entsprechend der Anzahl der Datenelemente berechnet, die Sie in jeder Zeile platzieren. Deshalb erhöhen Tabellen die Ladezeit Ihrer Seite.

Das bedeutet, dass Spalten nur in einem abstrakten Sinn existieren, bevor die Seite gerendert wird. Sie können ihnen also keinerlei Referenz geben. Wenn Sie dem ersten TD-Element in einer Zeile eine Klasse von beispielsweise "firstCol" zuweisen, können Sie direkt auf eine Spalte verweisen.

Kompakte Tische sind am besten

Es ist Mode geworden, alles mit großen, gut sichtbaren Komponenten zu bauen. Aus Sicht der Zugänglichkeit ist dies wunderbar. In Sachen Benutzerfreundlichkeit ist dies jedoch nicht immer der beste Weg, da dies zu Problemen führen kann.

Die Entwickler von Bootstrap experimentierten mit responsiven Tabellen, aber Tabellen und Reaktionsfähigkeit passen nicht gut zusammen. Wenn Sie Ihre Tische von Anfang an so gestalten, dass sie im Hochformat auf einen mobilen Bildschirm passen, ist dies ein kluger Schachzug.

Tabellen sollten immer scrollbar sein

Es ist empfehlenswert, den Überlaufwert einer Tabelle immer auf "auto" festzulegen, jedoch nicht für die Tabelle selbst. Wickeln Sie die Tabelle stattdessen in ein div ein, etwa wie folgt:

Dann gibt es eine Menge PHP-Code, der den Tabellenkörper aufbaut und damit schließt:

Der Teil, der die Aufgabe hat, die Tabelle durchlauffähig zu machen, befindet sich in der ersten Zeile, in der dem Tabellenumbruch div eine feste Höhe zugewiesen wird und der Überlaufwert auf auto gesetzt ist. Wenn Sie dies für die Tabelle selbst tun, anstatt zu einem Wrapper um die Tabelle herum, kann dies unbeabsichtigte Auswirkungen haben.

Rufen Sie die schweren Schläger an, wenn Sie müssen

Für einfache Tabellen ist dies ein Overkill. Wenn Sie jedoch eine Tabelle mit Vorteilen wie einstellbare Spaltenbreiten und Spaltensortierung benötigen, gibt es einige leistungsstarke jQuery-Anwendungen, die beim Erstellen komplexer Tabellen erstellt wurden.

Das größte und wahrscheinlich beste ist Flexigrid. Dies hat ein ähnliches Aussehen wie eine Java-Swing-Tabelle und funktioniert auf ähnliche Weise.

Die Funktionen von Flexigrid sind möglicherweise zu viel für das, was Sie benötigen. In diesem Fall könnten Sie dies in Betracht ziehen TableSorter, das ist ein bisschen einfacher.

Die Funktionen dieser Tools können zwar aufregend sein, aber es ist wichtig, dass sie die Ladezeit Ihrer Seite noch mehr erhöhen. Es ist am besten, solche Dinge aufzubewahren, wenn Sie es wirklich brauchen.

Automatische Konvertierungswerkzeuge liefern normalerweise keine besten Ergebnisse

Es gibt CMS-Plug-Ins, mit denen Sie Dokumenttabellen in HTML-Tabellen konvertieren können. Diese sind nicht annähernd so gut wie der manuelle Aufbau des Tisches. Wenn Sie also bessere Ergebnisse erzielen möchten, ist eine Automatisierung dieser Art nicht der richtige Weg.

Ihre eigene hausgemachte Automatisierung ist jedoch in Ordnung

Die Verwendung von PHP zum Erstellen Ihrer Tabellen aus Datenbankinformationen ist immer eine gute Idee, und es ist auf jeden Fall vorzuziehen, alles manuell einzugeben. Der Unterschied hier ist, dass Sie die vollständige Kontrolle über die Automatisierung haben.

Wenn Sie die Automatisierung von Drittanbietern verwenden, muss der Autor des Drittanbieters Annahmen über Ihre Tabelle treffen. Dies bedeutet, dass Sie mit einer generischen Tabelle enden, die im Vergleich zum Erstellen der Tabelle möglicherweise viele Funktionen aufweist.

Verwenden Sie Tische entsprechend und sie werden Sie belohnen

Gute Tische sind entworfen, sie passieren nicht einfach. Wenn Sie ein Informationsbereitstellungssystem entwerfen, möchten Sie, dass es effizient und effektiv ist. Stellen Sie sicher, dass Ihre Tabellen genau das sind, und Ihre Website wird den maximalen Nutzen aus ihrer Aufnahme ziehen.

Headerbild mit freundlicher Genehmigung von

Bogdan Rancea

Bogdan ist Gründungsmitglied von Inspired Mag und hat in diesem Zeitraum fast 6-Jahre Erfahrung gesammelt. In seiner Freizeit studiert er gern klassische Musik und erforscht die bildende Kunst. Er ist auch ziemlich besessen von Fixies. Er besitzt bereits 5.