Datentabellen listen verschiedene Informationen in Spalten und Zeilen auf, um das Lesen zu erleichtern. Die Daten sind in der Regel teilweise numerisch mit Beschriftungen. Ein Beispiel ist eine Datentabelle, die zeigt, wie viele Kalorien jemand täglich zu sich nimmt. Das Erstellen einer Datentabelle online kann mit HTML oder der komplexeren CSS-Browsersprache erfolgen. Die endgültige Tabelle sieht aus wie eine Datentabelle, die in einer Tabellenkalkulation oder auf Papier erstellt wurde. Der einzige Unterschied besteht in der Hintergrundcodierung, die nur beim Betrachten des Quellcodes sichtbar ist. Die Codierung kann durch HTML-Editoren, Text oder auf andere Weise erstellt werden. Es gibt viele Online-Sites, die die Möglichkeit bieten, Daten einzugeben, einige Attribute festzulegen und die gesamte Tabellencodierung für Sie zu erstellen. Online-Datentabellen werden normalerweise als Teil einer Webseite verwendet. Datentabellen werden häufig verwendet, um Listen von Artikeln mit Kategorien zu erstellen, z. B. Artikel zum Verkauf. Einige Webseiten verwenden sie, um statistische Informationen anzuzeigen. Während Datentabellen offline zum Drucken oder in Berichten verwendet werden können, ist die Verwendung normalerweise besser Tabellenkalkulationssoftware wie Microsoft Office Excel, die viele weitere Funktionen zum Arbeiten bietet mit Daten. Diese Anleitung zeigt, wie Sie mit Notepad eine HTML-Datentabelle erstellen.
Öffnen Sie einen HTML-Editor oder einfach ein normales Notepad-Textdokument, um HTML-Code einzugeben. Notepad funktioniert gut, wenn Sie an HTML-Codierung gewöhnt sind. HTML-Editoren beschleunigen sich wiederholende Aufgaben, aber einige, wie Frontpage, fügen zusätzliche, unnötige Codierung hinzu, die Webseiten verlangsamen kann. Am besten programmieren Sie zuerst mit einem HTML-Editor, gehen dann zurück und bearbeiten den Code von Hand, um ihn zu bereinigen.
Legen Sie die Tabellenattribute für Rahmen, Breite, Hintergrundfarbe und Schriftfarben fest. Sie müssen das Layout, die Breite, die Farben und andere Attribute der Webseite berücksichtigen, damit die Tabelle leicht lesbar ist. Sie müssen auch entscheiden, wie viele Zeilen und Spalten für die Daten benötigt werden. Beginnen Sie mit der Definition der Tabellenattribute. (Unser Beispiel zeigt die Anzahl der Kalorien, die an jedem Wochentag zum Mittag- und Abendessen gegessen werden. Wir benötigen drei Spalten (Tag, Mittagessen und Abendessen) und sieben Zeilen (zwei für Etiketten und eine für jeden Wochentag).
Fügen Sie einen Rahmen um die Tabelle und die Datenzellen hinzu. Rahmen trennen die Daten zur einfachen Anzeige in Zellen. Es wird in Pixeln gemessen und kann mit einem Wert von 0 versehen werden, um sie nicht zu verwenden. Ein Ein- oder Zwei-Pixel-Rahmen ist im Allgemeinen in Ordnung. Das Tag für die Grenze ist
bgcolor=border="CHOSEN_BORDER_WIDTH"
Die Rahmenfarbe kann mit dem Tag geändert werden
bordercolor="CHOSEN_COLOR"
die die grundlegenden Farbbegriffe wie Rot oder Schwarz oder sechsstellige hexadezimale Farbcodes verwendet. Hexadezimalzahlen bieten mehr Farben. Unser Beispiel verwendet border="2" und bordercolor="black".
Bestimmen Sie die Breite der gesamten Tabelle. Es wird in Pixeln oder Prozent der Bildschirmgröße gemessen. Pixel sind maßgebend und Prozentsätze ermöglichen die Anpassung der Tabelle an unterschiedliche Bildschirmgrößen. Versuchen Sie, die Breite anhand der Breite der Daten über die Zeilen hinweg zu beurteilen. Wenn Sie später feststellen, dass der Tisch zu dünn oder zu breit ist, kann er geändert werden. Unser Beispiel verwendet width="175".
Legen Sie die Hintergrundfarbe der Datenzellen fest. Sie unterscheidet sich von der Hintergrundfarbe der Seite, die einen guten Kontrast bieten kann. Das Etikett ist
bgcolor="CHOSEN_COLOR"
genau wie die Randfarbe. Unser Beispiel verwendet bgcolor="white".
Legen Sie die Schriftfarbe des Textes in den Zellen fest. Stellen Sie sicher, dass die Farbe gut zum Hintergrund kontrastiert, damit sie gut lesbar ist. Hell auf Dunkel oder Dunkel auf Hell funktionieren immer am besten. Das Etikett ist
font="CHOSEN_COLOR"
Unser Beispiel ist font="black", was einen guten Kontrast zum weißen Hintergrund bildet.
Schreiben Sie die vollständigen Tabellen-Tags zwischen einem linken und rechten Pfeil mit einem Leerzeichen zwischen den Tag-Attributen und beginnend mit dem Tabellen-Tag davor. Die Reihenfolge der Tags spielt keine Rolle, solange "table" vorne steht.
Bestimmen Sie die Spaltenbreiten. Die Breite jeder Spalte hängt von der Breite der gesamten Tabelle ab. Nehmen Sie die Tabellenbreite und teilen Sie sie durch die Anzahl der Zellen, um gleichmäßig große Spalten zu erhalten. Passen Sie bei Bedarf die Spaltenbreiten an, aber die Summe darf die Tabellenbreite nicht überschreiten. Wenn sich die Breite einer Zelle ändert, müssen die anderen Zellen angepasst werden, um die Tabellenbreite zu summieren. (Unser Beispiel hat eine Breite von 175 und drei Spalten pro Zeile, also eine gerade Aufteilung von etwa 59. Die tatsächliche Aufteilung beträgt 70, 60, 40.)
Beginnen Sie mit dem Hinzufügen Ihrer Daten. Beginnen Sie zunächst eine neue Zeile und fügen Sie eine Tabellenzeile mit dem Code hinzu
Geben Sie Ihre Daten für die Zelle ein; Verwenden Sie diesen Code, um leere Zellen darzustellen:
Schließe die Zelle mit dem Tag. Das Tag bordercolor wird verwendet, um bei Bedarf die Farbe des Zellenrahmens anzugeben. Wenn es weggelassen wird, wird die Standardfarbe des Tabellenrahmens verwendet. Der erste Zellcode unseres Beispiels lautet:
Wiederholen Sie das Erstellen von Tabellendatenzellen jeweils in einer neuen Zeile, bis alle Zellen in der Zeile vollständig sind. Dann beende die Zeile mit dem Tag. Beginnen Sie die nächste Reihe mit dem gleichen Vorgang, beginnend mit dem
Schließen Sie den Tabellencode mit dem mit Etikett. Unser endgültiger Tabellencode, wenn er nach zwei Datenzeilen beendet wird, ist unten.
Dinge, die du brauchen wirst
- HTML-Editor oder Notepad
- Daten