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.
- Låt varannan rad få en annan bakgrundsfärg.
- Låt var tredje rad få en annan bakgrundsfärg.
- 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
