Hvordan du bygger tabeller i HTML5 - dummies

Noen ganger inneholder nettsiden din data best presentert i et bord. Du kan bruke HTML5s fullverdige tabelsystem til å lage tabeller som det i dette eksemplet:

Den grunnleggende strukturen til et bord i HTML-format er rimelig lett å forstå; sjekk koden som skapte tabellen i eksempelet:

basicTable. html tabell, td, th {grense: 1px solid black;}

En grunnleggende tabell


HTML Superheroes


 Hero 
 Kraft 
 Nemesis 


 XML-eren 
 Standardsoverensstemmelse 
 Sloppy Code Boy 


 Kaptein CSS 
 Superlayout > Lord Deprecated 
 Browser Woman 


 Megacompatibility 
 Ugly Code Monster 
 Ved å undersøke koden kan du se at et bord bare er et sett med nøye nestede koder. Prosessen for å bygge et bord er ikke vanskelig, men det krever litt forethought. 

Planlegg bordet ditt slik at du vet hvor mange kolonner du vil ha, og hvilke rader eller kolonner vil bli overskrifter.

1. Skisse ut bordet ditt på papir først er en god ide, spesielt hvis det er i det hele tatt komplisert.

   Start tabellen med

2. -taggen.

   Paret

   omslutter hele tabellen.

   Opprett en tabellrad med

3. -paret.

   Et bord er bare en rekke rader. Du trenger

   -paret for å legge inn hver rad av data. Signify overskrifter med

4. . Ofte inneholder øverste rad (og kanskje venstre kolonne) overskrifter. Bruk

   -paret til å signere tekst som skal behandles som en overskriftscelle. Som standard er slike celler generelt dypere og sentrert, men det kan endres med CSS. Angi vanlige dataceller med

5. -paret. Hold antall celler konsistente over rader.

6. Når du blir mer kjent med HTML5-tabeller, kan du finne måter å utvide en celle på flere rader eller kolonner.

   Legg til CSS etter behov.

7. Tabeller har et grunnleggende format, som du kan endre med CSS - for eksempel legge til grenser.

   Selv om HTML5-brukere har utviklet måter å bruke tabeller til oppsettformål, gir CSS alle de sideoppsettteknikkene du trenger, så bruk HTML5-tabeller for deres tiltenkte formål: presentere tabelldata.