Verwalten Tabellenlayouts in HTML5

In HTML-Tabellen machen es einfach, Daten zu legen, Text und sogar Bilder in einem Raster. Tabellen helfen, machen es einfach, numerische Daten zu präsentieren (die in tabellarischer Form erscheint natürlich in Tabellen und andere ähnliche Anwendungen).

Aber Tabellen machen es auch einfach und bequem, alle Arten von Informationen zu präsentieren, die in Zeilen und Spalten natürlich fällt, und zu helfen, Raum zu maximieren, wenn viele Bedingungen oder andere Gegenstände, die Einführung, die zu viel Leerraum verschwenden würde, wenn gegen die linke laufen nach oben oder rechts Ränder auf einer Seite.

Wenn man die Dinge richtig sehen, alle interessanten Fähigkeit und die Komplexität in HTML-Tabellen bauen aus drei Grundelementen:

  • Borders: Jede Basistabelle hat vier Kanten, die ein Rechteck zusammensetzen.

  • Zellen: Dies sind die einzelnen Bereiche für Daten, Informationen, Bildern, oder was auch immer, innerhalb der Grenzen einer Tabelle.

  • Zell Spannweite: Innerhalb der vier-walled Struktur einer Tabelle kann man hinzufügen oder Zellwände zu löschen (wie bei den Zellen auf der rechten Seite des Tisches in der Figur gezeigt). Wenn Sie die Zellwände zu löschen, machen Sie eine Zelle Spanne mehrere Zeilen oder Spalten - und das ist genau das, was in Anpassung an verschiedene und interessante Zellenanordnungen Tabellen so flexibel macht.

    bild0.jpg

Handy-Spanning und Zellenbreite arbeiten anders. Wenn Sie Zellen erstrecken, ändern Sie Zellenraum durch Kombinieren oder Zellen zu verschmelzen. Dieser Schritt entfernt Wände Zelle sozusagen. Wenn Sie die Abmessungen einer Zelle anpassen, in der Regel mit Hilfe von CSS Breite und Höhe Kontrollen können Sie festlegen, wie viel Platz sie einnehmen wird.

Die Tabelle in der Abbildung zeigt, wie Sie einfach ein interessantes Layout erstellen kann durch Spanning die Zellen in den oberen und unteren Reihen (mit der Bezeichnung 1 und 7), mit zwei linken Zellen (Zellen 2 und 3), die zwei Reihen erstrecken, und drei rechten Zellen (Zelle 4 Spanning zwei Spalten und die Zellen 5 und 6 nebeneinander).

Abgesehen von Details, wie Gesamttabelle Breite und einzelne Zell Höhen und Breiten zu steuern, hier ist es, was die grundlegende HTML-Code für eine solche Tabelle sieht so aus:

Tabelle Skizze
nbsp-1nbsp-
nbsp-2nbsp-nbsp-3nbsp-
nbsp-4nbsp-
nbsp-5nbsp-nbsp-6nbsp-
nbsp-7nbsp-

Eine sorgfältige Prüfung der Datei zeigt, dass die Zahlen für jeden der Kästen in dieser Tabelle enthalten sind, nummeriert von 1 bis 7 zu veranschaulichen, wie die Tabelle legt. Wie Sie Ihre eigenen Tabellenstrukturen sind zu entwickeln, möchten Sie vielleicht einen ähnlichen Ansatz zu nehmen, so können Sie genau sehen und zu verstehen, was du tust.

Versuchen Sie, die einzelnen Boxen Beschriftung Zahlen mit Inkrementieren, so dass Sie sehen können, wie sich die Organisation auf einer Webseite heraus spielt.

Sie müssen nicht mit realen Inhalt oder Chaos Ihre Tabelle zu füllen um viel mit dem Sizing Ansatz, dass die Datei in seinen CSS-Style Abschnitte enthält. Zählen Sie die Gesamtzahl der Zellen in Ihrer Tabelle, fügen Sie eine zu dieser Nummer, und dann multiplizieren Sie das Ergebnis durch vier em-Breiten die Tabellenbreite (20em im Beispiel) zu erhalten.

Verwenden Sie 4em als Zellenbreite in der Tabellendaten () Element Stilinformationen, und du bist gut zu gehen. Wenn Sie die gesamte Tischbreite synchron mit der Anzahl der Zellen über halten, können Sie nichts falsch machen!

Nachdem Sie alle Knicke mit der Anordnung der einzelnen Zellen gearbeitet haben, können Sie den Stil zu Inhalt Ihres Herzens Attribute Tweaking beginnen die Tabelle als lesbar und attraktiv wie möglich zu machen. Zunächst aber sollten Sie die Anordnung richtig zu machen. Danach, alles andere ist Augenwischerei.

Ähnliche

Menü