|
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/
| 