Webbteknik 1

Laboration 7A

Tabeller

I denna laboration ska du skapa en tabell i HTML och stilsätta den med CSS. Du ska också skriva en media query, för att ändra presentationen vid en smal skärm.

Följande är förslag på övningar. Experimentera gärna med egna förändringar, så att du lär dig hur egenskaperna fungerar.

Förberedelser

  • Öppna mappen L7a i Visual Studio Code (VSC).
  • Öppna filen index.html och style.css i VSC samt öppna sidan i Live Server.
  • Studera den kod som finns i HTML- och CSS-filerna, så att du blir insatt i den.

Uppbyggnad av tabellen

HTML – Grunden för tabellen

  • Skriv start- och sluttaggen för table.
  • Lägg in ett tr-element med fyra th-element. I dem skriver du Titel, Genre, Land och År.
  • Lägg in ytterligare ett tr-element med fyra td-element och skriv in uppgifter om en film, t.ex. Fest i byn, Komedi, Frankrike, 1949

CSS – Färger och kantlinjer

  • Skriv en regel för table med background-color: #FFF;
  • Skriv en regel för th, td med kantlinje och inre marginal, t.ex. border: 2px solid #CCC; och padding: 6px; Lägg också in text-align: left;
  • Lägg in border-collapse: collapse; i regeln för table.
  • Lägg till en regel för th med en annan bakgrundsfärg och textfärg, t.ex. #960 respektive #FFF.

HTML – Fler rader och beskrivning

  • Lägg till tr- och td-element för några fler filmer, så att du har fem rader med filmer.
    • Skriv svensk titel på filmerna. Du ska sedan längre ner i denna lab lägga till ytterligare en kolumn med originaltitel.
  • Lägg också in ett caption-element med lämplig beskrivning av dina filmer, t.ex. Klassiska filmer.
    • Observera att caption måste ligga först i table.

CSS – Piffa upp tabellen

  • Lägg in caption-side: bottom; i regeln för table.
  • Skriv en regel för caption med margin-top: 1em; och font-style: italic;
  • Lägg en skugga på tabellen, genom att i regeln för table lägga in box-shadow: 10px 10px 15px #666;
  • Lägg till en regel för tr:nth-of-type(even) med background-color: #EDC;
    • Detta specificerar varannan rad, de med jämna ordningsnummer.

Slå ihop rader och kolumner

HTML – Två kolumner för titel

  • Lägg till ett tr-element under det första med rubrikerna. Det nya tr-elementet ska alltså bli den andra raden och i det lägger du in två th-element med texterna Original och Svensk.
  • I början av varje rad för filmerna lägger du in ytterligare ett td-element med originaltiteln.
  • I th-elementet med texten Titel lägger du in attributet colspan="2".
  • I th-elementen för Genre, Land och År lägger du in attributet rowspan="2".

CSS – Jämna till rubrikerna

  • I regeln för th, td lägger du in vertical-align: bottom;
    • Det behövs egentligen endast för th, men eftersom vi nu har en gemnsam regel för th och td, kan det läggas där. Innehållet i td-elementen upptar endast en rad, så det spelar ingen roll om vi har vertical-align där.

Responsiv design

CSS – Media query med ändring till listor

  • Ta fram Följsamt designläge och dra ner storleken till strax under 500px.

  • Lägg in en media query för max-width: 500px; och lägg in följande regler i den:

    • Lägg in en regel för tr med display: block;
    • Lägg till en regel för td med display: list-item; list-style: disc; margin-left: 2em; padding: 2px; och border: none;
    • Lägg också till en regel för td:first-of-type med font-weight: bold; och margin-left: 0.5em;
      • Det första td-elementet i varje rad fungerar då som en rubrik.
    • Ta bort skuggan på tabellen och gör den bredare med en regel för table med box-shadow: none; och width: 100%;
    • Lägg in en regel för tr:nth-of-type(1) med background-color: #960;
      • Den första raden i tabellen ska bli en rubrikrad.
    • Dölj raden med rubrikerna Original och Svensk, dvs den andra raden, genom en regel för tr:nth-of-type(2) med display: none;
    • Lägg till en regel för th med display: inline-block; border: none; och font-weight: normal;

Validera koden

Klar