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 thead-element och därefter ett tbody-element i tabellen.
    • thead innehåller tabellens rubrikrader och tbody raderna med data. Det gör strukturen tydlig, både för webbläsare och skärmläsare, och gör det enkelt att välja ut rubrikerna eller datan i CSS.
  • I thead lägger du in ett tr-element med fyra th-element. I dem skriver du Titel, Genre, Land och År.
  • Lägg in attributet scope="col" i alla th-taggar.
    • Det talar om att rubriken gäller för kolumnen under den, vilket hjälper bl.a. skärmläsare att koppla ihop data med rätt rubrik.
  • I tbody lägger du in ett tr-element med fyra td-element och skriver 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 i tbody, 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 tbody tr:nth-of-type(even) med background-color: #EDC;
    • Detta specificerar varannan rad i tbody, de med jämna ordningsnummer. Rubrikraderna i thead påverkas alltså inte.

Slå ihop rader och kolumner

HTML – Två kolumner för titel

  • Lägg till ett tr-element i thead, under det första med rubrikerna. Det nya tr-elementet ska alltså bli den andra rubrikraden och i det lägger du in två th-element med scope="col" och 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 gemensam 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.

Validera koden

Klar