0115 tabeller - enkla

Nedan visas en tabell.

rad 1, kolumn 1 rad 1, kolumn 2 rad 1, kolumn 3
rad 2, kolumn 1 rad 2, kolumn 2 rad 2, kolumn 3
rad 3, kolumn 1 rad 3, kolumn 2 rad 3, kolumn 3
rad 4, kolumn 1 rad 4, kolumn 2 rad 4, kolumn 3

För att få tabellen används:

  • en table-tagg runt hela tabellen.
  • en tr-tagg (table row) runt varje rad
  • en td-tagg (table data) för varje cell på raden

Koden för en enklare tabell

rad 1 kolumn 1 rad 1 kolumn 2
rad 2 kolumn 1 rad 2 kolumn 2
rad 1 kolumn 1 rad 1 kolumn 2
rad 2 kolumn 1 rad 2 kolumn 2

Testa nu själv. Gör uppgiften i JSFiddle på ditt konto, eller som en egen hemsida i mappen table-1 i mappen webbutveckling.

Gör nedanstående till en tabell med ram runt varje cell.

  1. Låt varannan rad få en annan bakgrundsfärg.
  2. Låt var tredje rad få en annan bakgrundsfärg.
  3. Låt rad 1 ha en färg, rad 2 en annan, och så vidare. Låt de fem första raderna ha olika färger. Upprepa sedan mönstret.

Tabellen:

x f(x)=x^2 0 0 1 1 2 4 3 9 4 16 5 25 6 36 7 49 8 64 9 81 10 100

Stilning

CSS-selektorer finns som rubriker nedan.

td och table

border-width: 1px; border-style: solid; border-color: #000000;

table

/* Gör så att det inte blir dubbla ramar. */ border-collapse:collapse;

/* Fast kolumnbredd */ table-layout: fixed;

tr:nth-child(3n + 2)

Ovanstående selector väljer var tredje rad (tr-tagg) i tabellen, med början på den andra raden.

tr:nth-child(2)

Väljer enbart den andra raden.

Document object model

DOM-model