I denne oppgaven skal du få prøve deg på en tabell i html.
Her kan du lese grunnleggende hvordan en tabell er satt opp (HTML tables fra W3 School). Se også HTML oversikt (markdown).
- For å lage en tabell, starter vi med
<table>. - En tabell med overskrift kan bruke
<caption>. - Tabeller deles ofte opp i to deler:
<thead>som har navnene på kolonnene.<tbody>har faktisk data.
- For å lage en rad må vi bruke
<tr>. - For å lage en celle må vi putte inn
<td>.
Ta først en titt på fasiten table-task.html.
Deretter:
- I VSCode, åpne html filen du skal kode i
table-task-attempt.html. - Skriv noe i den og sjekk at det dukker opp i linken overfor.
- I VSCode, åpne også scss filen du skal kode styling i
table-task-attempt.scss.
Gjør så følgende:
- Lag tabellen med innhold.
- Sett svarte borders på tabellen.
- Sett bold header.
- Sett annenhver rad til å ha grå bakgrunnsfarge.
- Sett unike rader til å ha sin egen farge on hover.
- Sett tabellen på midten av siden.
- Sett høyden på hver celle til å være 10% av bredden på siden man ser.
- Sett bredden på tabellen til å alltid være 25% av bredden på siden man ser.