Sådan bygger du tabeller i HTML5 - dummies

Nogle gange indeholder din webside data bedst fremlagt i en tabel. Du kan bruge HTML5's komplette bordsystem til at oprette tabeller som den i dette eksempel:

Den grundlæggende struktur i et bord i HTML-format er rimeligt let at forstå; tjek koden, der oprettede tabellen i eksemplet:

basicTable. html tabel, td, th {grænse: 1px solid black;}

En grundlæggende tabel







HTML Superheroes


 Hero 
 Power 
 Nemesis 


 XML-koden 
 Standards overensstemmelse 
 Sloppy Code Boy 


 Kaptajn CSS 
 Superlayout > Lord Deprecated 
 Browser Woman 


 Megacompatibility 
 Ugly Code Monster 
 Undersøgelsen af ​​koden viser, at en tabel blot er et sæt forsigtigt indlejrede tags. Processen til opbygning af et bord er ikke vanskeligt, men det kræver nogle forethought. 

Planlæg dit bord, så du ved, hvor mange kolonner du vil have, og hvilke rækker eller kolonner der vil være overskrifter.

1. Skitsering af dit bord på papir først er en god ide, især hvis det overhovedet er kompliceret.

   Start tabellen med

2. taggen.

   Parret

   omslutter hele bordet.

   Opret en tabelrække med

3. parret.

   Et bord er kun en række rækker. Du har brug for

   -paret for at vedlægge hver række af data. Significerer overskrifter med

4. . Ofte indeholder øverste række (og måske venstre kolonne) overskrifter. Brug

   -paret til at betegne tekst, der skal behandles som en overskriftscelle. Som standard er sådanne celler generelt dristige og centreret, men det kan ændres med CSS. Angiv almindelige dataceller med

5. -parret. Hold antallet af celler konsekvent på tværs af rækker.

6. Når du bliver mere bekendt med HTML5-tabeller, kan du finde måder at udvide en celle på tværs af flere rækker eller kolonner.

   Tilføj CSS efter behov.

7. Tabeller har et grundlæggende format, som du kan ændre med CSS - for eksempel at tilføje grænser.

   Selv om HTML5-brugere har udviklet måder at bruge tabeller til layoutformål, giver CSS alle de sidelayoutteknikker, du har brug for, så brug HTML5-tabeller til deres tilsigtede formål: præsentere tabeldata.