Ved hjelp av Div-merket for å lage tabeller - dummies

Opprette tabeller kan være feilproblemer og vanskelig å bruke de eldre HTML-kodene. I tillegg er de ofte ufleksible. Det er mulig å lage tabeller ved hjelp av en annen teknikk. Alt du trenger er en serie av cascading-koder for å utføre oppgaven.

Kreditt: © iStockphoto. com / Anton Cherstvenkov

Mange utviklere har brukt tabeller for alle slags oppgaver i fortiden. Selvfølgelig er det bruk av tabeller for å vise data. Imidlertid er tabellarrangementer også nyttige for å lage skjemaer for å sikre at de forskjellige elementene justeres på en forutsigbar måte. Denne andre bruken av tabeller er problematisk fordi den forvirrer noe programvare som skjermlesere. Problemet blir en av å definere en velorganisert side uten å skape problemer for folk som ser på det.

Ved å bruke koder for å lage et bord, gjør det mulig for seerne å se et bord eller et logisk arrangement av kontroller med like letthet. Denne teknikken har også fordelen av å ikke forvirre skjermlesere og annen programvare.

Definere HTML for en tabell ser litt ut som å lage et bord ved hjelp av de eldre kodene, bortsett fra at du ikke trenger å bekymre deg for merkelige ordninger av baneformater for å gjøre det. Her er HTML for et bord som inneholder en tittel, overskrifter og to innholdsrader.

Dette er en tabell
Overskrift 1
Overskrift 2
Overskrift 3
Rad 1 Kolonne 1
Rad 1 Kolonne 2
Rad 1 Kolonne 3 < Rad 2 Kolonne 1
Rad 2 Kolonne 2
Rad 2 Kolonne 3
Merk at hvert nivå er definert ved hjelp av et lett gjenkjent navn, for eksempel tabell, tittel, overskrift, rad og celle. Ved å bruke denne navngivningsmetoden blir det mye lettere å finne ut hva hvert nivå av bordet skal gjøre. Du kan finne mange forskjellige alternativer til denne tilnærmingen på nettet, men denne grunnleggende tilnærmingen vil tjene deg godt.

CSS for denne tabellen bruker noen spesielle egenskaper og litt smart formatering. Her er CSS brukt til å gjøre dette eksemplet funksjonelt.

. Tabell {display: table;}. Tittel {display: table-caption; tekst-align: center; font-weight: bold; fontstørrelse: større;}. Overskrift {display: table-row; font-weight: bold; text-align: center;}. Row {display: table-row;}. Celle {display: tabell-celle; grense: fast; kantbredde: tynn; polstring-venstre: 5px; padding-right: 5px;}

Merk bruk av displayegenskapen. Dette er den avgjørende egenskapen for bordet ditt, fordi det forteller nettleseren hvordan du viser et bestemt element. Ellers er det ikke noe rart ut av det normale om disse stilene. Du definerer tekstattributter som hjelper seerne å skille mellom ulike tabellelementer.Cellene er skilt fra hverandre ved hjelp av en enkel kantlinje. Følgende figur viser hvordan bordet vil vises når du ser det i en nettleser.