HTML & CSS

 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