Hvordan man laver en solid tabel i HTML5 - dummies

Til denne bordkonstruktionsøvelse skal du tegne nogle data fra de arbejdende økonomer og statistikere på US Bureau of Labor Statistics. På hjemmesiden, rul ned til tabel B-9: Indekser af Aggregerede ugentlige timer og løn, vist i denne figur. (Tallet viser ingen tvivl om teeny-lille type, men det bør

Som du undersøger tabel B-9, er her hvad du ser:

• Tekstbilledet øverst er en slags rustfarve og begynder med ESTABLISHMENT DATA Tabel B-9: Indekser af aggregat … Denne form for information er bare hvad billedelementet er beregnet til at fange og levere.

• Under teksten er et sæt af tabeloverskrifter - en tabeloverskrift, med andre ord - med en lysegrå baggrund og forskellige kolonneoverskrifter. Til venstre er en liste over brancher. Derefter har bordet to sæt kolonner (mærket Indeks for samlede ugentlige timer og indeks for aggregerede ugentlige lønninger), hver med fire kolonner af datoer og en procentændringskolonne fra februar til marts 2013.

• Bordlegemet begynder med tekst, der læser Total Privat og fortsætter ned 19 rækker, indtil det kommer til Andre Tjenester, med rækker i kolonne 1 (Industri) skifte mellem en hvid og en lyseblå baggrundsfarve.

  Efterfølgende spell de to sæt kolonner data for samlede ugentlige timer og ugentlige lønlister med henholdsvis fem individuelle kolonner i hvert sæt: marts 2012, januar til marts 2013 og en procentændring fra den foregående måned (februar 2013) til den nuværende måned (marts 2013).

• Tabellen footer indeholder tre fodnoter nummereret 1 til 3. Den specielle markør, (p), indikerer foreløbige (det vil sige ikke endelige) data.

Sådan bygger du et sådant bord med tallene, som det var:

1. Tabellen billedtekst kan fanges inde i et billedelement. Du kan bruge linjeskiftet () for at bryde linjen efter ESTABLISHMENT DATA og før den faktiske detaljerede billedtekst, der begynder Tabel B-9: Indekser af aggregat … Brug linjeskiftelementet igen for at bryde linjen, inden du angiver skalaen indikator "[2002 = 100]. ”

2. Alle overskrifterne skal indeholde et element. Du bruger tabellen overskrift ( ) for hver overskrift celle, så den vil være centreret og med fed skrift inde i hver sådan celle.

   Industriens celle skal tage en rowspan = "2" attribut, så den fylder hele højden af ​​overskriftsområdet til venstre, og indekset af … celler skal hver tage en colspan = "5" attribut, så hver dekker de fire dato og procent ændre kolonner for sin kategori.Alle tre af disse elementer vises i den første tabeloverskrifts række, hver i sin egen tabeloversigt ( ) celle.

   De resterende ti elementer vises i den anden tabeloverskrifts række i deres rækkefølge i tabellen. Hver af de ti elementer vises også i sin egen bordplade ( ) celle. Indstilling af bredder for industrien og forskellige dato og procentvise kolonner i CSS'en for overskriftssætets bredder for hele resten af ​​tabellen.

3. I tabellegemet svarer en række til hver linje af data fra onlinekilden, idet man starter med branchenavnet til venstre og derefter fortsætter med de numeriske værdier for datoer og procentsatser i hver af de to grupper til højre. Denne opgave involverer 11 tabeldata ( ) elementer for hver række vist i den tabel. Meget enkel, meget mekanisk, meget let.

4. Indtastningerne i tabelfodboldene vises alle i en footer-sektion, som skal tage en colspan = "11" -attribut til at flyde over hele bredden af ​​bordet. Fodnoterlegenden kan vises inden for en enkelt bordrække ( ) og tabeldata ( ) celle, sidstnævnte sættes til fed skrift.

   (Brug ikke , eller fodnote-teksten bliver centreret.) Hver resterende fodnote vises inden for et enkelt bord række og tabel data celle som angivet i tabellen.

Ved at bruge disse teknikker kan du oprette et solidt og attraktivt bord til præsentation af numeriske og tekstdata. og tænk dig igennem, hvad du vil have dine brugere til at se, kan du bygge en foreløbig struktur i HTML. Derefter kan du begynde at arrangere celler og justere dem, indtil du får dem lige.