Tabeller - bra till mycket!Allmänt om tabellerABC, grunderna Fler attribut Layout-redskap Tabeller i HTML 4.0 Exempel |
Allmänt om tabeller
Tabeller är egentligen till för att presentera mycket fakta snyggt och prydligt, men
med hjälp av tabeller kan man även placera text och grafik någorlunda exakt där
man vill ha det. Jag tog upp under Text/Formatering om hur man gjorde för
att dela upp texten i två kolumner och indrag med hjälp av tabeller under Text/Indrag. Under Grafik/Lägga in
bilder hur man gjorde en snygg ram runt en bild med hjälp av tabeller.
Titta gärna på mina exempel längst ned på denna sida. Jag har försökt att visa rent visuellt hur det kan se ut. Att bara läsa ger inte alltid så mycket. Det är alltid lättare om man kan se resultatet att förstå hur man ska göra.
ABC, grunderna
I en tabell finns alltid start- och sluttaggen för <table>
respektive </table>
, vilket markerar tabellens början och slut.
Tabellen har en eller flera rader, <tr>
markerar radens början och </tr>
radens slut (sluttaggen frivillig men bör anges)
Varje rad är i sin tur indelad i en eller flera celler, <td>
markerar cellens början och </td>
cellens slut (sluttaggen frivillig men bör anges).
Sedan finns en hel del attribut, värden att lägga till som styr hur tabellen ska presenteras.
En encells-tabell skulle kunna kodas som nedan.
<table>
<tr>
<td>Cellinnehåll</td>
</tr>
</table>
En enkel tabell med två rader (horisontellt) och tre kolumner (cellerna bildar kolumner vertikalt), en kant runt tabellen och cellerna yttre kanter har lagts till genom att lägga till border=2 i table (anges i pixlar).
|
<table border="2">
|
Det var den enklaste formen av tabell. Om du ser på exemplet under är det samma tabell men med längre text i varje cell. Vad jag vill visa med detta är att om du inte hänger på attribut att styra presentationen med så blir det innehållet som styr. Här är tabellen bredare eftersom texten i varje cell är längre.
Cell 1 | Cell 2 | Cell 3 |
Cell 4 | Cell 5 | Cell 6 |
Fler attribut
Du kan ange om du vill ha huvudrubriker till din tabell.
Du placerar den ovan eller under tabellen med align="bottom" eller top (standard), behöver således inte anges.
<caption>Huvudrubrik</caption>
<caption align="bottom">Huvudrubrik</caption>
<th>Rubrik</th>
(sluttagg frivilligt,
men bör anges) använder du om du vill ha rubrikceller inne i tabellen,
om du exempelvis behöver
ha datafältsnamn. Texten anges i fetstil.
En kant runt tabellen och cellerna fås via border=siffra/tjocklek i pixlar. I Internet Explorer kan du färglägga kanterna, se exempel längst ned.
Rubrik 1 | Rubrik 2 | Rubrik 3 |
---|---|---|
Cell 1 | Cell 2 | Cell 3 |
<table border="1">
<caption>Huvudrubrik</caption>
<tr>
<th>Rubrik 1</th>
<th>Rubrik 2</th>
<th>Rubrik 3</th>
</tr>
<tr>
<td>Cell 1</td><td>Cell 2</td><td>Cell 3</td>
</tr>
</table>
<table width="400">
Du ange tabellens bredd i pixels (fast mått) och procent (relativt), anger du bredd 800 så blir tabellen 800 pixels bred
oavsett om besökaren har en 21-tums skärm med hög upplösning eller en 14-tummare (med upplösning 640x480), vilket i 14-tummaren innebär att besökaren får scrolla på sidan. Det är bättre att ange tabellens bredd i procent av skärmen oavsett skärmupplösning. Glöm ej
hartassarna dvs. citationstecknen runt procentsatsen, "90%".
Attributet width kan användas för separata celler, ex.
<th width="10%">
eller <td width="100">
Pixels anger ett absolut värde på cellen men procent anger procent av tabellen.
Är du beroende av att du får måtten exakt som du vill kan du använda en transparent .gif-bild som du lägger in i cellen och anger width=x antal pixels samt height=1.
Brasklapp: att ange cellens width i % är inte korrekt HTML. Men både Netscape och Internet Explorer stödjer detta. Ibland kan det finnas lägen då man kan ha nytta av det ändå.
Skillnaden mellan att ange cellens width i procent eller pixels kan ha stor betydelse vid placering av bilder och text i förhållande till en annan fast punkt i dokumentet. Kolla här. Du kanske har en bakgrund med ett mönster. Om du vill placera text/bild så att det alltid håller lika avstånd till den fasta punkten använd då pixels eller en transparent gif. Vill du se ett exempel på detta?
Att ange höjd i tabell eller i cellen kanske inte är så vanligt. Senaste Netscape och IE stödjer height i table både % och pixel, men stödet är sämre för height i % i td - så height i td bör anges i pixel. Kolla här får du se om du kan se någon skillnad i höjd med din browser.
Du ange avståndet i pixels från tabellcellens
kant till cellens innehåll med cellpadding=x, anger du inget är default 1 pixel.
<table cellpadding="5">
Du bestämma avståndet mellan cellerna i pixels med cellspacing=x, anger du
inget är default 2 pixel.
<table cellspacing="3">
Vill du ha en *tajt* tabell så ange
<table cellspacing="0" cellpadding="0" border="0">
Läs mer om detta längre ned under avsnittet Layout-redskap.
Ingen cellspacing eller |
cellpadding i table |
cellspacing="0" samt |
cellpadding="0" i table |
Alignment, justering av tabeller kan vara lite förvirrande.
Vill du justera enbart tabellen så kan du använda
<div align="center">tabellens alla taggar</div>
Andra värden är right samt left, left är standard-läge och behöver ej justeras.
En del äldre browsers kräver
<center>tabellens alla taggar</center>
för
att kunna centrera ordentligt.
Du justerar din tabell i dokumentet i förhållande till övriga element på
sidan med align="right" eller align="left" inom table-taggen.
<table align="left">tabellen</table>
Om du vill ha efterföljande text i editorn till höger om tabellen måste du ange align=left annars
hamnar texten under tabellen, vanliga standardläget. Kolla in detta under exempel.
Du kan även justera radernas/cellernas innehåll.
Horisontell justering (align) och vertikal justering (valign) av cellens innehåll kan anges i tr (gäller då alla celler i samma rad),
varje cell för sig, td eller th. Man kan givetvis kombinera både align och valign, lägen för align är right och center, samt left som är standardläge och behöver ej anges.
Standardläget för valign är middle, sedan kan du ange top och bottom, se tabell-exempel nedan.
<td align="right">cellens innehåll</td>
<td valign="top">cellens innehåll</td>
<td valign="top" align="center">cellens innehåll</td>
|
|
Om du vill att en cell ska sträcka sig över flera kolumner i tabellen, så anger du i aktuell td colspan=3, så sträcker sig cellen över tre kolumner (på bredden). Vill du att samma cell ska sträcka sig upp/ned flera rader anger du i aktuell td rowspan=x. Se under Exempel längst ned.
Om du absolut inte vill att texten i en cell ska radbrytas kan du i aktuell cell ange nowrap. OBS!
Detta kan ge väldigt breda celler.
<td nowrap>cellens innehåll radbryts ej</td>
Visst kan du leka med färger även när det gäller tabeller, du kan ange färgerna i hexadecimala värden eller via dess namn, se mer under Grafik och Bakgrunder om detta.
Undvik dock svarta tabeller med vit text i cellerna då inte äldre browsers kan tolka detta samt att vid utskrift kanske det inte heller syns något då även i modernare browsers.
Ge en cell färg via
<td bgcolor="#ffff00">färgad cell</td>
<tr bgcolor="#ffff00">x antal td</tr>
då får hela
raden färg, dvs alla celler i den raden färgläggs.
För att färglägga
hela tabellen skriver du
<table bgcolor="red">
Vill du av någon anledning
ha en eller flera tomma celler i din tabell måste du "fylla"
dem med något.
Annars riskerar tabellen att braka ihop, se under Exempel.<td> </td>
skriver du då i din text-editor för att fylla cellen.
Layout-redskap
Tabeller kan man ha till mycket. Skriva kolumner och till att göra indrag, se Text. Ett annat användningsområde är att med hjälp
av tabeller styra text och bilders placering på sidan. Eller göra navigerings-menyer av små bilder i en tajt table. Men bli inte förvånad
om du ser att läsarna tolkar tabeller olika.
Observera! Ett viktigt/vanligt fel som gör att tabellen inte visas överhuvudtaget i Netscape är att sluttaggen för table har glömts.
När man har en navigeringsmeny med små bilder som ska ligga tajt är det viktigt att tänka på två saker. För att *tajta* till tabellen skriv (viktigt för Netscape)
<table cellspacing="0" cellpadding="0" border="0">
En annan sak som kan orsaka oönskade mellanrum är oavsiktliga mellanslag och radbrytningar i editorn,
kika in här så får du se några exempel.
Att ange textens storlek i tabeller har sina begränsningar, använder du taggen font måste du ange den i varje cell. Har du en stor tabell är det lite pyssel att skriva in det i varje cell, cell efter cell. Med Style Sheets kan du enkelt påverka varje cells innehåll, ett exempel är att du inom head-taggarna lägger in nedanstående för att ändra fonten i varje cell i just det dokumentet, se mer om detta under avsnittet Style Sheets:
<style type="text/css">
<!--
td {font-size: 10pt}
-->
</style>
Tabeller i HTML 4.0
Det är mycket nyheter i HTML 4.0 - dock är stödet fortfarande dåligt och det går alldeles utmärkt att tills vidare fortsätta att jobba med tabeller enligt HTML 3.2 som beskrives för övrigt i detta avsnitt.
Är du dock nyfiken så finns några exempel i avsnittet nedan.
Exempel
Att konstruera tabellers är ett stort, omfattande område. Detta
är dock en nybörjarguide så jag har gjort som så
här. Här nedanför har jag listat ett antal exempel på
tables. Den som är intresserad dels av hur de ser ut, samt av koderna
kan gå in via länkarna och kolla. Studera och begrunda, eller
helt enkelt fräckt kopiera. Valet är fritt.
© Annica Tiger a_t@tele2.se
Besök gärna min blog
Mina andra sidor ser ni nedan.
www.tiger.se, www.atiger.se, www.tiger.pp.se, www.atiger.pp.se, www.atiger.nu och www.nodaddy.se.