Hvordan du lager et solidt bord i HTML5 - dummies

For denne bordbyggingen trener du til å tegne noen data fra de hardt arbeidende økonomene og statistikere på US Bureau of Labor Statistics. På nettsiden, bla ned til Tabell B-9: Indekser av Aggregate Ukentlig Timer og Lønn, vist i denne figuren. (Tallet viser ingen tvil, men det burde men gir deg en ide om hva du leter etter.)

Som du ser på Tabell B-9, ser du hva du ser:

• Bildet øverst er en slags rustfarge og begynner med ESTABLISHMENT DATA Tabell B-9: Indekser av aggregat … Denne typen informasjon er bare hva bildetekstelementet er beregnet til å fange og levere.

• Under bildeteksten er et sett med tabelloverskrifter - en tabelloverskrift, med andre ord - med en lys grå bakgrunn og ulike kolonneoverskrifter. Til venstre er en liste over bransjer. Deretter har bordet to sett med kolonner (merket Indeks for Aggregate Ukentlig Timer og Indeks for Aggregate Ukentlig Lønn), hver med fire kolonner med datoer og en prosent endring kolonne fra februar til mars 2013.

• Bordlegemet starter med tekst som leser Total Privat og fortsetter ned 19 rader til det kommer til Andre Tjenester, med rader i kolonne 1 (Industri) som veksler mellom en hvit og en lyseblå bakgrunnsfarge.

  Deretter staver de to settene kolonnene ut for samlet ukentlig og ukentlig lønn, med fem individuelle kolonner i hvert sett: mars 2012, januar til mars 2013 og en prosentendring fra forrige måned (februar 2013) til nåværende måned (mars 2013).

• Tabellen footer inneholder tre fotnoter nummerert 1 til 3. Den spesielle markøren, (p), indikerer foreløpige (det vil si ikke endelige) data.

Slik bygger du et slikt bord av tallene, som det var:

1. Tabellen bildetekst kan fanges inne i et billedelement. Du kan bruke linjeskiftet () for å bryte linjen etter ESTABLISHMENT DATA og før den faktiske detaljerte bildeteksten som begynner Tabell B-9: Indekser av aggregat … Bruk linjeskiftelementet igjen for å bryte linjen før du angir skalaen indikator "[2002 = 100]. “

2. Alle overskriftene skal inneholde et element. Du bruker tabelloverskriften ( ) -elementet for hver overskriftscell, så det vil være sentrert og i fet skrift inne i hver slik celle.

   Bransjens celle skal ta en rowspan = "2" attributt slik at den fyller hele høyden av topptekstområdet til venstre, og indeksen av … celler skal hver ta en colspan = "5" attributt slik at hver dekker de fire dato og prosent endring kolonner for sin kategori.Alle tre av elementene vises i den første tabelloverskriften, hver i sin egen tabellposisjon ( ) celle.

   De resterende ti elementene vises i den andre tabelloverskriften rad i sin rekkefølge av utseende i tabellen. Hver av de ti elementene vises også i sin egen tabelloverskrift ( ) celle. Angi bredder for industrien og ulike dato og prosentvis kolonnene i CSS for topptekstbredder for hele resten av tabellen.

3. I tabelllegemet tilsvarer en rad hver linje av data fra nettkilden, som starter med bransjens navn til venstre og fortsetter deretter med tallverdiene for datoer og prosenter i hver av de to gruppene til høyre. Denne oppgaven innebærer 11 tabelldata ( ) elementer for hver rad vist i den tabellen. Veldig enkelt, veldig mekanisk, veldig enkelt.

4. Tabelloppføringsoppføringene vises alle i en bunntekstseksjon, som skal ta en colspan = "11" attributt for å flyte over hele bredden av tabellen. Fotnoteforklaringen kan vises i en enkelt tabellrad ( ) og tabelldata ( ) celle, sistnevnte satt til fet skrift.

   (Ikke bruk , eller fotnotteksten blir sentrert.) Hver gjenværende fotnote vises i et enkelt bord rad og tabelldatakelle som angitt i tabellen.

Ved å bruke disse teknikkene kan du opprette et solidt, attraktivt bord for å presentere numeriske og tekstdata. Hvis du tar deg tid og tenk deg gjennom hva du vil at brukerne skal se, kan du bygge en foreløpig struktur i HTML. Deretter kan du begynne å ordne celler og justere dem til du får dem akkurat.