Opdracht

Werk weer verder met je bestaande project.

Stap 1

Je hebt al een tabel op je pagina (van 4 rijen en 3 kolommen, waarvan de bovenste rij table headings <th> velden zijn. Voeg onderaan de tabel een nieuwe rij toe (dus een nieuw <tr> </tr> blok. Zorg dat deze rij niet uit 3 velden bestaat zoals de rest, maar uit 1 samengevoegd veld over de hele breedte (spiek bij colspan in de uitleg)

Stap 2

Je tabel had al borders door de border="1" eigenschap in de <table> tag in je html. Verwijder deze, zodat we via css sjiekere borders kunnen toevoegen. (Het maken van borders in html is tegenwoordig niet meer de bedoeling, omdat css het veel beter kan.)

Voeg nu via css borders toe aan je tabel en geef ze een mooie kleur, stijl en dikte.

Om dit goed te doen heb je 3 css blokjes nodig. Blokjes voor de th en td elementen om ze een rand te geven en een blokje voor de het table element, zodat je de "border-collapse" kunt aanzetten en je zo geen dubbele lijnen krijgt. (Je kunt de th en td blokjes eventueel combineren tot 1 regel, omdat ze hetzelfde zijn). Dus zoiets als dit alles bij elkaar:

th, td {
  /* code om de border in te stellen */
}

table {
  /* code om de border-collapse aan te zetten */
}