Manchmal werden Sie Daten auftreten, die in tabellarischer Form am besten passt statt einer Liste. HTML5 unterstützt mehrere Tabellen-Tags für diese Art von Arbeit. Hier können Sie eine sehr einfache Tabelle.

Manchmal ist der beste Weg, um Daten in einer sinnvollen Art und Weise zu zeigen, ist es in einer Tabelle zu organisieren. HTML definiert eine Tabelle mit dem Tag. Die Tabelle enthält eine Anzahl von Tabellenzeilen (mit dem Tag definiert). Jede Tabellenzeile kann aus einer Anzahl von Tabellendaten bestehen () oder Tabellenkopf-Tags ().

Vergleichen des Ausgangssignals mit dem Code für basicTable.html, die es erstellt:

Eine grundlegende Tabelle
HTML Super Heroes
Held
Power
Nemesis
Die HTMLator
Einhaltung von Standards
Sloppy-Code Boy
Kapitän CSS
Super Layout
Herr Veraltete
Browser Frau
Mega-Kompatibilität
Hässlich-Code Monster

Die HTML-Tabelle wird mit dem Paar festgelegt. Es macht sehr viel Sinn einrücken und Raum, um Ihren Code sorgfältig, so dass Sie die Struktur der Tabelle im Code sehen können. Nur durch den Code flüchtig blickt, kann man vermuten, dass die Tabelle aus drei Reihen besteht und jede Reihe besteht aus drei Elementen.

In einem Textverarbeitungsprogramm erstellen Sie in der Regel eine leere Tabelle, indem die Anzahl der Zeilen und Spalten definieren, und füllen Sie es dann. In HTML, können Sie die Tabelle Zeile für Zeile zu definieren, und die Elemente in jeder Zeile die Anzahl der Spalten bestimmen. Es ist an Ihnen, um sicherzustellen, dass jede Reihe die gleiche Anzahl von Elementen hat.

In der Standardeinstellung (in den meisten Browsern sowieso), Tabellen zeigen nicht ihre Grenzen. Wenn Sie grundlegende Tabellenrahmen sehen wollen, können Sie auf dem Tisch des Attribut drehen. (Ein Attribut ist ein spezieller Modifikator Sie einige Tags anhängen können.)

Dieser Tag wird eine Tabelle erstellt und gibt an, dass es eine Grenze der Größe haben wird. Wenn Sie das Geschäft verlassen aus, zeigen einige Browser eine Grenze und einige nicht. Sie können den Grenzwert oder auf eine größere Zahl gesetzt. Die größere Zahl macht eine größere Grenze.

eine Tabelle Grenze Einstellung ist eine gute Idee, weil Sie nicht auf Browsern denselben Standard haben zählen können. Darüber hinaus ist der Randwert immer in Anführungszeichen. Mit CSS können Sie komplexere und interessante Grenzen hinzuzufügen, als diese einfache Attribut ermöglicht.

Wie Sie Ihre erste Zeile hinzufügen

Nachdem Sie eine Tabelle definieren, müssen Sie einige Zeilen hinzuzufügen. Jede Zeile wird durch ein Paar angegeben.

Innerhalb der Reihe, müssen Sie einige Tabellendaten. Die erste Reihe besteht oft aus Tabellenüberschriften. Diese speziellen Zellen sind unterschiedlich, um anzuzeigen, formatiert, dass sie Etiketten sind, anstatt Daten.

Tabellenköpfe haben einige Standardformatierung zu helfen Sie sich daran erinnern, sie sind Header, aber Sie können die Art und Weise verändern sie aussehen. Sie können das Aussehen des Tabellenkopf in allen Arten von großen Möglichkeiten verändern. Definieren Sie den Tabellenkopf so, wenn Sie die Formatierung zu entdecken und zu entscheiden, alle Ihre Tabellenköpfe Kartause zu machen, werden Sie wissen, wo im HTML-Code alle Tabellenköpfe sind.

Einrücken Ihre Header im Inneren des Geräts. Wenn Ihre Tabelle drei Spalten enthält, die erste Zeile könnte wie folgt beginnen:

Platzieren Sie den Text, den Sie in den Tabellenüberschriften zwischen den und Elemente angezeigt werden sollen. Die Inhalte werden in der Reihenfolge, wie sie definiert sind.

Rubriken müssen in der oberen Reihe nicht sein. Wenn Sie Positionen auf der linken Seite wollen, legen sich lediglich ein Paar als das erste Element jeder Zeile. Sie können Überschriften haben beide oben und links, wenn Sie möchten. In der Tat können Sie Schriften überall, aber es macht in der Regel Sinn Schriften setzen nur oben oder links.

Wie Sie Ihre Datenzeilen zu machen

Der nächste Schritt ist eine weitere Zeile zu erstellen. Die Datenzeilen sind ebenso wie die Kopfzeile, mit der Ausnahme sie Paare verwenden, anstatt Paare, die Datenelemente enthalten. Typischerweise wird eine Tabelle mit drei Spalten hat leere Zeilen, die wie folgt aussehen:

Legen Sie die Datenelemente innerhalb der Segmente und Sie sind bereit zu gehen.

Wie Tabellen im Texteditor zu bauen

Einige Leute denken, dass Tabellen sind ein guter Grund, WYSIWYG zu verwenden (was Sie sehen, was Sie erhalten) Redakteure, weil sie denken, es ist schwer, Tabellen im Textmodus zu erstellen. Sie haben ein wenig zu planen, aber es ist wirklich sehr schnell und einfach eine HTML-Tabelle ohne grafische Werkzeuge zu bauen, wenn Sie diesen Plan zu folgen:

1. Vorausplanen.

   Wissen, wie viele Zeilen und Spalten in der Tabelle sein. könnte hilfreich sein, zunächst auf dem Papier skizzieren. Ändern der Anzahl der Zeilen ist später einfach, aber die Anzahl der Spalten ändern, kann eine echte Schmerzen nach einigen der Code geschrieben wurde.

2. Erstellen Sie die Überschriften.

   Wenn Sie mit einem Standard-Rubriken-on-top Tisch zu starten gehen, zunächst die Kopfzeile zu schaffen. Speichern, zu überprüfen und zu validieren. Sie wollen nicht, Fehler zu multiplizieren, wenn Sie mehr Komplexität. Diese Überschrift Zeile gibt an, wieviele Spalten Sie benötigen.

3. Erstellen Sie eine Probe leere Zeile.

   Machen Sie eine Probe Zeile mit der richtigen Anzahl von Elementen mit ein Paar pro Zeile. Erstellen Sie einen Satz und verwenden Kopieren Sie Datenzelle so oft zu kopieren, wie Sie benötigen. Achten Sie darauf, die Anzahl der Paare die Anzahl der Sätze in der Kopfzeile entspricht.

4. Kopieren und die leere Zeile einfügen, um so viele Zeilen, wie Sie benötigen.

5. Speichern, Anzeigen und validieren.

   Seien Sie sicher, dass alles gut aussieht und validiert richtig, bevor Sie eine Menge Aufwand in Daten hinzufügen.

6. Füllen Sie die Tabelle mit den Daten, die Sie benötigen.

   Gehen Sie Zeile für Zeile, indem sie die Daten zwischen den Paaren.

7. Test und Validierung erneut um sicherzustellen, dass Sie nicht versehentlich etwas zu brechen haben.