HTML-SKOLAN
Tabeller
För att göra en mer avancerad layout på din websida är
tabeller ett bra verktyg. Det ger dig möjlighet att placera texter
och bilder mer exakt.
Text: Annica Tiger
Dessa förkunskaper behövs
Grundläggande kunskaper i markeringsspråket HTML.
Har du inte det?
En bra bok för en nybörjare är Lättpocket om att göra
en egen hemsida av Jesper Ek Paginas förlag. Du kan även besöka
Annica Tigers HTML nybörjarguide på http://www.atiger.pp.se/
Det finns inte så många sätt att påverka själva
layouten med html. Men att arbeta med tabeller ger dig en större möjlighet
att styra placering av text och grafik. Tabeller delas in i olika celler
(som kan vara osynliga) och i dem kan du placera in websidans olika delar
så att de alltid hamnar på rätt plats i förhållande
till varandra. Tabeller kan även användas till att göra textkolumner
(spalter) eller för att göra indrag i texten (marginaler).
ENKEL TABELL
En tabell börjar med
<TABLE>
och har sluttaggen
</TABLE>,
däremellan sätter du in rader med
<TR>
- Table Row och celler med
<TD>
- Table Data eller rubrikceller
<TH>
- Table Heading. Har du flera rader så bildar cellerna under varandra
en kolumn.
<TABLE>
<TR>
<TD>Cell</TD>
</TR>
</TABLE>
Sluttaggarna för rader och celler är inte obligatoriska, men det
rekommenderas att skriva dem då det annars kan se olika ut beroende
på vilken webläsare man har. Arbetar man med nästlade tabeller,
tabell i tabell, är det bra att se var rader och celler slutar.
WIDTH HEIGHT
1. Tabellens bredd anges i pixlar eller i procent av skärmen <TABLE
WIDTH="80%">.
Anges ingen bredd justeras tabellen efter dess innehåll. Som du ser
i vårt exempel kan höjden anges i TABLE via HEIGHT, vilket dock
ej är korrekt enligt gällande html-rekommendation, men stödjs
av Netscape och Internet Explorer. Här har detta använts i syfte
att hålla den inre tabellen centrerad på skärmen oavsett
besökarens upplösning.
Cellernas bredd justeras automatiskt efter innehållet om ingen bredd
anges. Med
<TD WIDTH=100>
kan du specificera den enskilda cellens bredd. Även här stödjer
vissa läsare bredd angiven i procent, dock ej korrekt enligt html-standarden
3.2. Med procent avses då procent av tabellen, ej av skärmen.
Du kan ange önskad höjd på cellen via
<TD HEIGHT=50>.
COLSPAN ROWSPAN
2. Du kan låta en cell spänna över flera kolumner, som
i vårt exempel där mittenraden innehåller en cell som spänner
över tre kolumner,
<TD COLSPAN=3>.
Ska cellen spänna över flera rader användes ROWSPAN.
CELLPADDING - CELLSPACING
Med cellpadding anges cellfyllningen mellan innehållet och cellkanten.
Med cellspacing anges mellanrummet mellan de olika cellerna och tabellen.
Anges i TABLE,
<TABLE CELLSPACING=5
CELLPADDING=5>.
Anger du inget av dessa attribut är grundinställningen (default)
1 respektive 2 pixlar.
BORDER
3. För att få en pixelbred kant runt tabellen ange
<TABLE BORDER>.
Du kan även ange
BORDER=x,
där x bytes ut mot önskat antal pixlar för bredare kant runt
tabellen. Har du en bild i en en-cells tabell kan en kraftig kant runt tabellen
göra att bilden ser "upphöjd" ut.
JUSTERING
4. Till yttre justering av tabellen används
<DIV align= CENTER>
Tabell-taggarna
</DIV>.
Andra värden är LEFT (default) och RIGHT. Du kan justera tabellens
förhållande till efterföljande element med
<TABLE align=LEFT>,
tabellen till vänster och efterföljande element till höger
om tabellen. Motsatta förhållandet får du genom att ange RIGHT som värde.
Du kan justera cellens innehåll horisontellt med
<TD align=CENTER>,
andra värden är LEFT (default) och RIGHT.
<TD Valign=TOP>
används för vertikal justering av cellens innehåll, andra
värden är MIDDLE (default) och BOTTOM. Vill du att en hel rad
ska justeras likadant, alla celler samma läge, anger du motsvarande fast enbart i
<TR>.
NOWRAP - TOMMA CELLER
Cellernas bredd anpassar sig till innehållet. Med
<TD NOWRAP>
undviker du radbrytning användes med viss försiktighet. Ibland
så kanske en cell förblir tom men för att förhindra
att den kollapsar eller ej ramas in, bör den fyllas med ett mellanslag,
  vilket du skriver in i editorn i avsedd cell.
INDRAG
Dubbelsidigt indrag görs enklast med att lägga textmassan i en
en-cells tabell, ange önskad WITDH i procent i TABLE och centrera tabellen.
Vill du ha ett indrag på vänster sida gör du en två-cells
tabell, ange önskad WIDTH i pixels för vänstra cellen, fyll
den med en transparent gif eller koda in   mellanslag.
NETSCAPE-BUGG
5. I Netscape finns en bugg som innebär att Enter (ny rad) visas
som ett mellanslag på sidan.
För att undvika detta, placera sluttaggen
</TD>
på samma rad som dess starttagg, samt undvik extra mellanslag inne
i cellen. Har du flera bilder efter varandra i samma cell placera även
dem på samma rad. Ange dessutom
<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0>
för att "tajta" till cellerna.
TRANSPARENTA PIXLAR
Istället för att ange WIDTH i cellen kan du lägga in en transparent
gif för att styra dess bredd. Kan vara ett alternativ om layouten kräver
millimeter-exakt positionering. Det skiljer några pixlar i Netscapes
och Internet Explorers tolkning av angiven bredd på cellen.
annica.tiger@mailbox.swipnet.se
Relaterade länkar
HTML 3.2 gällande rekommendation
http://www.w3.org/pub/WWW/TR/REC-html32.html
Läs mer om tabeller på David Siegels sajt
http://www.killersites.com/tutorial/
Exempel på hur man jobbar med transparenta pixlar
http://www.killersites.com/1-design/single_pixel.html
Undvik de vanligaste misstagen
Flertalet webläsare visar inte innehållet i en tabell förrän
den är helt inläst. Har du ett större dokument, dela då
upp det i mindre tabeller för att minska inladdningstiden.
Syns inte tabellen? I Netscape laddas inte tabellen in om du har glömt
sluttaggen </TABLE>.
Undvik om möjligt fasta mått (pixels) i tabellens bredd. Det
som ser perfekt ut i 800 x 600 kan innebära att din besökare som
har lägre upplösning måste scrolla i sidled för att
kunna se din layout eller läsa din text innesluten i tabellen.
PROFFSENS BÄSTA TIPS
Hur använder du tabeller?
Andreas Björklind, forskar och undervisar kring Internet
i olika samhällsvetenskapliga perspektiv.
Mycket sparsamt. När jag använder dem är det för att
jag verkligen inte kan använda någon annan teknik (som CSS, Cascading
Style Sheets, exempelvis). Tabeller är tyvärr inte tillräckligt
pålitliga och presentationen är nästan ett lotteri, beroende på webläsaren.
Vanliga fel?
Formateringen i webläsaren blir ofta fel. Testa, testa och testa igen
i flera olika webläsare och
i flera olika versioner! Inte bara senaste versionerna av Explorer och Netscape,
utan näst senaste också...
Bästa knep?
Använd alltid statisk vidd på tabell och kolumner. Möjligheten
att ange relativ vidd är en god tanke, men utformningen kan bli helt fel.
http://www.ida.liu.se/~andbj/
Martin Lindhe, webmaster och redaktör på Macpower
Tabeller är lite bökiga och jag försöker undvika dem
in i det sista. Tabeller är inget kul, helt enkelt, men ofta har man
inget val (påminner om Mac/PC-kriget :-)).
Vilka är fördelarna, och vad bör man undvika?
Mitt bästa tips är att skapa egna tabeller så långt
det går och undvika att ha tabeller inuti andra tabeller. Även
om det går fort så laddar nämligen vissa webläsare
i kombination med vissa datormodeller om sidan en gång per tabell,
och sidan uppfattas som "flimrig" och störande.
Oftast går sidutformningen att lösa utan att ha tabeller i tabeller,
och den lösningen är alltså att föredra.
http://www.macpower.com | ![[ InternetGuiden ]](../bilder/IGlogo.gif)