Opdracht 7: HTML / CSS Boodschappenlijst
CSS HTML

We gaan hier verder met de bestanden uit opdracht 3 en 4. Je werkt verder in de map boodschappenlijst. Daarnaast werk je ook verder in de GIT repository boodschappenlijst.

Deel 1: Tabel met boodschappenlijst

  1. Maak een tabel in de body van het HTML document. Vul de tabel met de onderstaande informatie:
  2. Productprijzen hebben als class attribute productPrice. Deze class ga je in een volgende opdracht pas gebruiken.
  3. De + en zijn knoppen. Deze knoppen hoeven in deze opdracht nog niets te doen. Dat komt in een volgende opdracht pas aan bod.
  4. De productaantallen staan in een <span> element, deze hebben als class attribute productQuantity.  Deze class ga je in een volgende opdracht pas gebruiken.
  5. De cellen met product subtotalen hebben als class attribute productTotalCost. Deze class ga je in een volgende opdracht pas gebruiken.
  6. De cel met het totaalbedrag heeft als id attribute totalCost. Deze id ga je in een volgende opdracht pas gebruiken.

Tip: Heb je moeite met het samenvoegen van cellen uit een rij? Lees: https://html.com/tables/rowspan-colspan/

Deel 3: Styling van de tabel

  1. Zorg dat het style.css bestand gelinkt is in de head van het HTML document. Zie opdracht 3. Pas de CSS toe in het style.css bestand.
  2. Zorg voor het hele document een sans-serif lettertype.
  3. Geef de property border-collapse de waarde collapse op de tabel.
  4. Lijn de tekst in de table heading uit naar links.
  5. Lijn de tekst in alle cellen waar een bedrag in staat uit naar rechts.
  6. Geef alle cellen een rand met als waarde 1px solid #888 en een padding van 10px.