XHTML Tutorial - Kapitel 9: Tabeller

Tabeller används på websidor för att strukturera data i, ja, i tabeller. Du har förmodligen sett dem lite här och var, ett vanligt användningsområde är t.ex. för att lista e-postmeddelanden i inboxen på en webbmail, medlemmar på ett community eller forum, osv. Låt oss ta en liten titt på hur en tabell kan se ut, i det här fallet en som innehåller information över frukter och deras färger:



Här följer källkoden för ovanstående tabell (all övrig HTML utelämnad):

<table border="1">
  <tr>
    <td>Bananer</td>
    <td>Gula</td>
  </tr>
  <tr>
    <td>Päron</td>
    <td>Gröna</td>
  </tr>
  <tr>
    <td>Äpplen</td>
    <td>Röda eller gröna</td>
  </tr>
</table>

Precis som i det tidigare kapitlet om listor har vi nu igen ett stort element (tabellen) som är uppbyggd av många mindre element, förutom att den här gången är strukturen två "lager" djup. Tabeller är uppbyggda av celler, ordnade i horisontella rader. Taggarna ovan betyder följande:

  • Taggen <table> talar om för webbläsaren att den ska börja bygga en tabell, och jag har också lagt till attributet border="1", som ställer in storleken på den eventuella ramen runtom och som bara finns där för att utan den (eller om den sätts till noll) skulle vi inte få någon ram alls och vi skulle bara se namnen på frukterna och färgerna. Ibland vill man förstås ha just den effekten, men men för denna tutorial skulle det vara ett dåligt visuellt exempel.

  • Taggen <tr> är till för att påbörja en ny rad av celler. Observera att varje rad i tabellen motsvaras av ett <tr></tr>-block i koden.

  • Slutligen så motsvarar då taggen <td> de individuella cellerna och deras innehåll.




Nu är ju förstås tabellen ovan en ganska ful liten sak, och tabeller kan definitivt vara mycket mer utsmyckade och praktfulla än sådär. Det finns även många fler valfria tabell-taggar man kan använda - man kan t.ex. dela upp tabellen i ett sidhuvud (där du skriver rubriker som "frukt" och "färg") med <thead>-taggen, man kan ha en sidfot i slutet av tabellen med ett <tfoot>-block, och innehållet däremellan läggs då i ett <tbody>-block, osv.

Det finns också en mängd olika attribut du kan använda för att sätta bredder, höjder, text-justering, färg m.m. för dina celler, men vi ska inte gå in på allt detta här eftersom denna tutorial bara är avsedd att presentera dig för grunderna i XHTML-koden. Om du vill dyka djupare ner i alla små olika sätt du kan skapa tabeller på, rekommenderar jag återigen Google.





En kort historielektion: Sidlayout med tabeller

Trots att detta är något som fortfarande används i stor utsträckning (och jag erkänner att vissa sidor ute på nätet som jag själv byggt även baserats på det), som rekommenderas i många äldre tutorials fortfarande och även genereras av viss webdesign-mjukvara, har jag angett det som en del av det förflutna eftersom det borde vara det. Det jag pratar om är tabell-baserad design av hemsidor.

Grejen med tabeller är att de väldigt enkelt kan användas för att bygga ett slags "lådmodell" för att dela upp ett fyrkantigt område i mindre rutor. Under webbens tidiga dagar gjorde denna förmåga tables särskilt lägligt för att layouta webbsidor eftersom man kunde dela upp hela sidan i (jämfört med andra metoder på den tiden) bekvämt lätthanterliga celler.

Sedan de dagarna har vi dock fått en ny och mycket kraftfull metod för att "stajla" innehållet på websidor som heter CSS, eller Cascading Style Sheets, och även om man iofs kan applicera CSS-egenskaper på en tabell-baserad design, så är en långt mer överlägsen metod istället att man delar upp layouten i "divisional" (<div>) element istället och refererar till dem i CSS-koden.

Den huvudsakliga anledningen till varför du bör undvika tabeller för sidlayout är i mitt tycke att du får en väldigt fastgjuten och oflexibel kodstruktur som kanske fungerar bra som den är, men om den någonsin måste designas om i framtiden eller få enskilda delar omkringflyttade m.m, så kommer den att bli en monumental huvudvärk att arbeta med.

Bortsett från det så skapar tables också mycket mer onödig kod för att åstadkomma samma resultat jämfört med CSS och <div>'ar. Detta gör koden fulare och svårare att tolka för mänskliga ögon, för att inte nämna att sidan blir trögare att ladda ner och möjligen också sämre för sökmotor-indexering.

Tabeller skapades ursprungligen, och är fortfarande till, för att låta dig organisera större mängder data i ett prydligt tabellformat. Om någon eller något föreslår att du borde använda dem till något annat än det, så rekommenderar jag att du knallar iväg åt motsatt håll :o)





Fler kapitel är på gång men de är tyvärr inte färdigskrivna än.

< Tidigare: Listor

robert@eagleowl.se 026-16 13 61 www.eagleowl.se
©2018 EagleOwl