OPGAVER TIL HTML & CSS – BEGYNDER – TABELLER
Opgave 3 - Lær tabeller
Nu starter arbejdet.
Gå ind på CODEPEN og lav en ny pen
Opgave 3 – Del 1
Nu starter arbejdet.
Hvor du før har kunne kopiere koden ind skal du nu til at skrive den selv. Dette er måden man lærer at kode på nemlig.
Skriv denne HTML kode på billedet ind i mellem body:
Opgave 3 – Del 2
Skriv denne CSS kode på billedet ind i din CSS boks
Se bort fra <style> tags
Du kan nu se en ændring i din tabel.
Hvor du før havde blot en nogle rækker, har du nu givet den en:
border(ramme),
font-family(skrifttype) og
color(skrift farve)
Det er fordi du med CSS koden styler dine elementer.
Opgave 3 – Del 3
Vi er ikke færdige med CSS koden endnu. Fortsæt og skriv denne CSS kode på billedet ind i CSS’en
Se bort fra <style> tags
Opgave 3 – Del 4
Nu skal der tilføjes de klasser vi lavede under DEL 3 i vores HTML kode. Det er alle de steder der står class=”klasse” eller class=”farve”
Opgave 3 – Del 5
Juster på definationerne i CSS’en se hvordan du kan style din tabel langt federe end denne her:
Slut resultatet af denne kode ses her:
Her under vises/eksekveres koden
Dette er en basis tabel med CSS til at styre designet - visningen
| Fornavn | Efternavn | Alder |
|---|---|---|
| Søren | Jakobsen | 40 |
| Anna | Madsen | 6 |
| Tobias | Jørgensen | 19 |
| Fornavn | Efternavn | Alder |
|---|---|---|
| Søren | Jakobsen | 40 |
| Anna | Madsen | 6 |
| Tobias | Jørgensen | 19 |
Ekstra opgave
Prøve at style din tabel så den også får baggrundsfarve på. Det kan man gøre ved at tilføje i CSS under .th og fx angive farven lilla som baggrundsfarve:
background-color: purple;
Eller ved .td fx background-color: lightblue;
Stylet tabel med farver
| Fornavn | Efternavn | Alder |
|---|---|---|
| Søren | Jakobsen | 40 |
| Anna | Madsen | 6 |
| Tobias | Jørgensen | 19 |