Nu ska vi titta på tabeller. Till en början så ser de ganska enkla ut och i ren HTML kod så finns det inte allt för mycket formateringar vi kan göra. Senare när vi jobbar med CSS kommer vi att återvända till dessa tabeller och fixa till deras utseende lite bättre. När det gäller koden för tabeller så är det ganska lätt att tappa bort sig i alla taggar, därför är det extra viktigt att ni ser till att hålla ordning på eran kod och indentera koden på ett bra sätt. Jag kommer att gå runt och bedöma er kod medan ni skriver denna uppgift så se till att den ser bra ut annars får ni bakläxa. Den här instruktionen är medvetet långrandig med extra lång text därför att jag märkt att många av er inte läser instruktionerna. Som vanligt så bedöms den här uppgiften utifrån vad jag kan nå på den länk som ni lägger till i classroom. Om ni gör delar av uppgiften någon annan stans så kommer den givetvis inte att bedömas. Ni ska också se till, som vanligt, att varje deluppgift är lätt att hitta under sin eget speciella deluppgiftsnummer. Det vill säga, skriver jag vad som ska göras under punkt 2 så ska också hela svaret på denna fråga presenteras på er sida under punkt 2. Det borde inte vara så svårt för er at inse att jag inte kan hålla på att söka efter era svar runt undersidor och dylikt om jag inte specifikt bett om detta. Ibland händer det att jag kommer med kompletterande information om hur en uppgift ska lösas eller presenteras muntligt i klassrummet. Det är därför viktigt att ni lyssnar till detta och sedan kommer ihåg vad som är sagt. Ibland beror det på att jag varit otydlig i min uppgift, andra gånger så är det bara så att jag skrivit knasigt eller helt enkelt gjort fel. Det är ju onödigt om ni försöker jobba efter dåliga eller felaktiga uppgifter. Andra gånger kan det vara att jag glömt att lägga till någon viktig information eller kanske helt enkelt antar att ni borde kunna något som ni inte fått lära er än. Då är det ju också viktigt att ni lyssnar och tar till er den informationen. Både för er egen skull och för att jag ska slippa upprepa samma sak flera gånger. Det bli ganska tröttsamt i längden. Så, nu är vi en bra bit in i texten och det är alltså dags att presentera lite om hur tabeller fungerar. Jag lämnar medvetet ute tecknet för större än och mindre än i följande förklaring för att de som bara sökläser igenom en text ska få svårare att hitta. Jag kan vara lite elak på så vi ibland. Så, En tabell definieras av taggen table som omfattar hela tabellen. en köttiga informationen i en table definieras i dess tabellkropp, tbody. I tbody ska all viktig tabelldata finnas. det finns även thead och tfoot som taggar för att beskriva vars huvudet och foten på en tabell finns. Tanken med dessa taggar var från början att man skulle dela in långa tabeller med rubriker och resultat där själva tbody:n kunde vara scrollbar medans thead och tfoot alltid syntes på sidan. Denna implementering av HTML5 är det dock ingen webläsare (vad jag vet) som använder sig av utan CSS kod. Men, eftersom ni är unga och webben kommer att leva några år till så är det kanske lika bra att ni lär er anväda er av dessa taggar i alla fall. Så om ni gör en lång tabell där det ska finnas mycket data som summeras ihop på slutet så ska ni använda er av thead och tfoot. I de flesta fall så behöver man dock inte det därför att tabellerna kanske har sina rubriker på sidan eller har något annat utseende. Om det är så så behöver ni inte använda er av vare sig thead, tfoot eller tbody, men ni kan givetvis använda er av tbody ändå oim ni vill, men det går lika bra utan. Varje tabell definieras av sina rader och kolumner. I korset mellan varje rad och kolumn finns en cell där man kan skriva information, eller sätta en bild eller något annat kul. Varje rad definieras i HTML av taggen tr som står för table row. I varje rad så kan man definiera upp ett antal dataceller och antalet dataceller blir också då antalet kolumner i tabellen. varje datacell definieras av taggen td som betyder table data. 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 heading. td och th används på samma sätt, vanligtvis så skrivs th ut i fet stil i webbläsaren för att visa att det är en typ av rubrik dock. När man designar sin tabell så är det viktigt att man tänker på hur rubrikerna ska placeras så att tabellen blir lätt att förstå. Så en kort repetition, tabeller definieras av table-taggen som ska gå runt hela tabellen med en sluttagg på slutet. Inuti table så delar vi upp tabellen i rader med taggen tr. I varje rad så definierar vi ett antal celler antingen som th, om de ska vara rubriker, eller td om de ska innehålla data. varje tagg th, td och tr ska ha sin egen sluttagg. När en rad är definierad så skapar man nästa rad med sina egna celler tills man når slutet på tabellen. Lätt som en plätt alltså. Men... så lätt är det ju inte alltid. 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 (Obs, notera att större än och mindre än saknas i detta exempel) 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, detta 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. Ni får använda dessa i den här uppgiften så länge ni ser till att ni bara använder diskreta färger och att texten i era tabeller blir tydlig och läsbar. Senare ska vi lära oss hur man formaterar dessa tabeller på ett snyggare sätt. Till sist så tänkte jag bara säga att taggen caption är 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.
Som vanligt så avslutar du din sida med att länka tillbaka till din startsida.