<<Tabeller>>

    Tabeller förekommer ibland på olika sidor. När detta behövs så bygger man upp strukturen i HTML, men sedan formatterar man den ofta med CSS så att det inte är så uppenbart att det är en tabell som använs. Innan CSS så byggdes många hemsidor upp som ett nätverk av tabeller där man fyllde cellerna med grafik för att skapa sina layouter. En tabell i ren HTML är ganska begränsad i hur man kan ändra utseendet, men efterssom det fortfarande finns en hel del webbsidor som ligger kvar i gammal HTML-kod och föråldrade layouter (t.ex. gamla forum) så är det bra att känna till några av dessa grundläggande formateringarna. Vi kommer senare att titta på hur vi gör dessa snyggare med CSS.

    För att skapa en tabell så gör man följande:

    • En tabell definieras av taggen <table> som omfattar hela tabellen.
    • En tabell består av <thead>, <tbody> och <tfoot>, som beskriver tabellens olika delar huvud, kropp och fot. Själva tabellinformationen i en table definieras i dess tabellkropp, medan tabellrubriker sätts i tabellhuvudet och eventuella tabellresultat i tabellfoten. Denna indelning gör man fram för allt när man har långa tabeller för då kan kroppen vara scrollbar medan man kan se rubriker och tabellfoten på sidan även när man scrollar i tabellen.
    • Varje tabell definieras av sina rader och kolumner. Där en rad och kolumn möts finns en cell där man kan skriva information. Varje rad definieras i HTML av taggen <tr> som står för table row. På varje rad så kan man definiera upp ett antal dataceller (table-data) <td> och antalet dataceller blir också då antalet kolumner i tabellen.
    • Man kan också definiera en cell som en rubrikcell istället och då använder man taggen <th> istället. <th> står för table header. <td> och <th> används annars på samma sätt. Man behöver inte placera <th> på första raden. Man kan även ha en kolumn som rubrik istället.
  1. Skapa en enkel tabell som innehåller din familjs alla medlemmar(även husdjur) med namn, kön, ålder, favoritmat som kolumnrubriker (specificera att det rör sig om kolumnrubriker). Sätt en rubrik på din tabell med caption och kalla den familjen (ditt familjenamn). Om du inte kan någon information så hitta på något passande. Har du färre än 5 familjemedlemmar så går det bra att räkna några sängkvalster som familjemedlemmar.

    2. Ibland vill man att en cell eller rubrik ska täcka flera kolumner eller till och med flera rader. För att göra det så sätter man ett attribut på sin td- eller th-tagg som bestämmer hur många kolumner eller rader just den cellen ska täcka. Attributet colspan används när man vill täcka flera kolumner, det vill säga att cellen ska vara bredare än normalt. Attributet rowspan gäller för celler som ska täcka flera rader.

    En cell kan ha både rowspan och colspan och därför täcka både flera rader och flera kolumner. En typisk datacell kan alltså definieras som <td colspan="3"> Min text </td>. Vilket skapar en cell som täcker 3 kolumner i en tabell. På motsvarande sätt kan man skriva <th rowspan="2"> Min rubrik </th> för en rubrikcell som ska täcka 2 rader.

    I ren HTML så är det som jag sagt tidigare ganska svårt att få till snygga tabeller. Tidigare har det dock funnits verktyg för att formatera utseendet på tabeller i ren HTML-kod. Dessa attribut finns fortfarande kvar men används inte då man numera använder sig av t.ex. CSS för att bestämma hur en tabell ska se ut. width-attributet kan användas för att bestämma bredden på både celler och hela tabellen. border-attributet bestämmer hur tjock kant som ska rama in en tabell eller en cell. border kan sättas till 0 om man inte vill ha någon kant. cellpadding- och cellspacing-attributet kan användas om man vill ha större utrymme mellan sina celler. bgcolor-attributet används om man vill byta bakgrundsfärg på en tabell eller cell. Färgen anges då i hexadecimal form till exempel bgcolor="#cccccc" ger en ganska ljus grå färg.

    Avslutningsvis så kan taggen <caption> vara bra att använda om man vill sätta en förklarande rubrik till en hel tabell. Den bör då sättas direkt efter den inledande table-taggen.

  2. Skapa en tabell där den första kolumnen är din rubrik (specifiera att det rör sig om radrubriker). Du ska beskriva karaktärsdragen för en hjälte i ett RPG. Det kan till exempel vara Styrka, Smidighet, Magisk kraft och så vidare. Minst 5 egenskaper. den andra kolumnen ska innehålla värdet som karaktären har i den grundegenskapen. Första raden i tabellen ska täcka båda kolumnerna och innehålla namnet på din karaktär.
  3. Skapa en tabell där du beskriver följande taggar, vad de innehåller och vad de gör: <table>, <caption>, <tbody>, <thead>, <tfoot>, <tr>, <th> och <td>. Välj själv hur tabellen ska se ut bara den blir tydlig och lättläst.
  4. Gör en tabell som ser ut ungefär som följande bild (men snyggare!). Skapa din egen logotyp som passar i övre vänstra hörnet. se till att rubrikcellerna skiljer sig från datacellerna. Ange gärna andra värden. Du ska visa att du kan colspan och rowspan, innehållet i tabellen är inte så viktigt, men bör vara något som hänger ihop på något vis som i exemplet.

    5. Som vanligt så avslutar du din svarsida med att länka tillbaka till din startsida.

Tillbaka till startsidan.
© Andreas Bergsten
Malgomajskolan 2023-24