OPGAVER TIL HTML & CSS – BEGYNDER – TABELLER
Opgave 3 - Lær tabeller
Hvis du bruger Codepen, spring til Opgave 3 - Del 1
Nu starter arbejdet.
Gå ind på CODEPEN og ….
Start med dette:
< !DOCTYPE html > < !– indikerer dokumentet er et html dokument – >
< html >
< head >
< style >
< !– Indsæt CSS’en herinde – >
< /style >
< /head >
< body >
< !– Skriv html koden ind her i mellem – >
< /body >
< /html >
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 mellem < style > < / style >
Hvis du bruger Codepen, 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 mellem < style > < / style >
Hvis du bruger Codepen, se bort fra <style> tags
Opgave 3 – Del 4
Kopier hele tabellen fra < table > til < / table> og sæt den ind under 1. tabel
Nu skal der tilføjes de klasser vi lavede under DEL 3
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 |