Wie eine feste Tabelle in HTML5-Form

Für diesen Tisch-Konstruktion Übung, Sie gehen einige Daten von den hart arbeitenden Ökonomen und Statistiker an der zu zeichnen Das US Bureau of Labor Statistics. Auf der Website, nach unten scrollen Tabelle B-9: Indizes von Aggregate Wochenstunden und Gehaltsabrechnung, in dieser Figur gezeigt. (Die Figur nicht Zweifel zeigt klitzekleine Typ, aber es sollte Ihnen dennoch eine Vorstellung davon, was Sie suchen.)

Wie Sie in Tabelle B-9 untersuchen, ist hier, was Sie sehen:

• Die Beschriftung an der Spitze ist eine Art Rost Farbe und beginnt mit EINRICHTUNG DATA Tabelle B-9: Indizes von Aggregate. . . . Diese Art von Informationen ist genau das, was die Bildunterschrift Element soll zu erfassen und zu liefern.

• Unter der Überschrift ist ein Satz von Tabellenüberschriften - ein Tabellenkopf, mit anderen Worten - mit einem hellgrauen Hintergrund und verschiedenen Spaltenüberschriften. Auf der linken Seite ist eine Liste von Branchen. Dann hat die Tabelle zwei Sätze von Spalten (mit der Bezeichnung Index von Aggregate Wochenstunden und Index von Aggregate Weekly Payrolls), die jeweils mit vier Spalten von Daten und eine Prozentuale Änderung Spalte von Februar bis März 2013.

• Der Tabellenkörper beginnt mit Text, der gesamte private liest und setzt sich um 19 Zeilen, bis es zu anderen Dienstleistungen bekommt, mit Zeilen in Spalte 1 (Industrie) zwischen einem weißen und einem hellblauen Hintergrundfarbe abwechseln.

  Danach, buchstabieren die beiden Sätze von Spalten Daten für Gesamtwochenstunden und Wochen Payrolls aus, die jeweils mit fünf einzelnen Spalten in jedem Satz: März 2012 Januar bis März 2013 und eine prozentuale Veränderung gegenüber dem Vormonat (im Februar 2013) für den laufenden Monat (März 2013).

• Die Tabelle Fußzeile drei Fußnoten enthält die spezielle Marker, (p), nummeriert von 1 bis 3 gibt vorläufige (das heißt, nicht endgültig) Daten.

Hier ist, wie Sie durch die Zahlen eine solche Tabelle bauen, wie es war:

1. Die Tabelle Beschriftung kann innerhalb eines eingefangen werden Bildunterschrift Element. Sie können den Zeilenumbruch verwenden (
   ) Element die Zeile nach Betriebsdaten und vor der eigentlichen detaillierten Beschriftung zu brechen, die in Tabelle B-9 beginnt: Indizes von Aggregate. . . . Verwenden Sie den Zeilenumbruch Element wieder die Linie zu brechen, bevor die Waage Anzeige unter Angabe # 147- [2002 = 100] # 148.

2. Alle Überschriften sollten in einem Element enthalten sein. Sie verwenden die Tabellenüberschrift () Element für jede Rubrik Zelle, so wird es in jeder solchen Zelle zentriert und fett gedruckt werden.

   Die Industrie-Zelle sollte eine nehmen rowspan = "2" Attribut so füllt es die gesamte Höhe des Kopfbereichs an der linken und der Index. . . Zellen sollten jeweils für ihren Bereich ein colspan = "5" Attribut so deckt jeder der vier Datum und die prozentuale Veränderung Spalten für seine Kategorie. Alle drei dieser Elemente wird in der ersten Tabelle Überschrift Zeile, jeder in seiner eigenen Tabelle Überschrift () Zelle erscheinen.

   Die restlichen zehn Elemente erscheinen in der zweiten Tabellenzeile in der Reihenfolge ihres Auftretens in der Tabelle Überschrift. Jede dieser zehn Elemente erscheint auch in seiner eigenen Tabelle Überschrift () Zelle. Einstellen Breiten für die Industrie und verschiedenen Datum und Prozent Spalten in der CSS für den Header setzt Breiten für den gesamten Rest der Tabelle.

3. In dem Tischkörper entspricht einer Zeile, die jeder Zeile von Daten aus der Online-Quelle, mit der Industrie Namen ab links und dann mit den numerischen Werten für Daten und Prozentsätze in jedem der zwei Gruppen auf der rechten fort. Diese Aufgabe umfasst 11 Tabellendaten () Elemente für jede Zeile in der Tabelle gezeigt. Sehr einfach, sehr mechanisch, sehr einfach.

4. Die Tabellenfuß Einträge erscheinen alle in einem Fußbereich, was ein nehmen sollte colspan = "11" Attribut über die gesamte Breite des Tisches zu fließen. Die Fußnoten Legende kann in einem einzigen Tabellenzeile () und Tabellendaten () Zelle, letztere Satz fett gedruckt erscheinen.

   (Verwenden Sie nicht, oder die Fußnote Text wird zentriert werden). Jede weitere Fußnote in einer Zelle einzelne Tabellenzeile und Tabellendaten angezeigt wird, wie in der Tabelle angegeben.

Durch diese Techniken verwenden, können Sie eine solide, attraktive Tabelle zur Darstellung von numerischen und textuellen Daten erstellen. Wenn Sie Ihre Zeit in Anspruch nehmen und denken Sie sich durch, was Sie möchten, dass Ihre Benutzer zu sehen, können Sie eine vorläufige Struktur in HTML erstellen. Dann können Sie die Anordnung Zellen und zwicken sie beginnen, bis Sie sie gerade richtig.