Tabeller
1. Grundläggande tabellkommandon
 |
1.1 <TABLE>, <TR> och <TD> |
|
|
1.2 Några attribut: |
|
|
1.3 <TH> och <CAPTION> |
|
|
2.1 Inledande om layout |
|
|
2.2 Några attribut
|
<TABLE>, <TR> och <TD>
<TABLE> är det mest grundläggande elementet i en tabell. Avslutningen </TABLE> måste alltid finnas. <TR> betyder 'table row' (tabellrad) och specificerar en rad i bellen.
<TD> betyder 'table data', som fritt kan översättas med 'tabellcell'. Elementet används för att specificera en kolumn i tabellen.
<TR> innehåller alltid en eller flera <TD> och/eller <TH>
(se 2.3 nedan). Avslutningarna </TR> och </TD> tycker jag man skall
använda (se avsnitt 5.1 nedan). <TR> och </TR> omsluter alltid <TD>,
<TH> och deras avslutningar, men aldrig tvärtom, d.v.s man kan skriva
lt;TR><TD></TD></TR>, men aldrig lt;TD><TR></TR></TD>.
Här är ett enkelt exempel på en tabell: P><TABLE>
<TR>
<TD>Aristoteles</TD>
<TD>Sokrates</TD>
<TD>Cicero</TD>
</TR>
<TR>
<TD>Platon</TD>
<TD>Epikuros</TD>
<TD>Protagoras</TD>
</TR>
</TABLE>
som ser ut så här:
| Aristoteles | Sokrates | Cicero |
| Platon | Epikuros | Protagoras |
Tabellcellerna anpassar sig efter sitt innehåll. Använder du korta ord, blir cellerna små, som i exemplet ovan. Skriver du längre meningar, blir cellerna större. Men för att få tabellen att se ut så som du vill, finns det ett antal hjälpmedel eller attribut, som du kan använda.
Ett attribut skrivs inne i ett startelement, t.ex inne i <TABLE>, men aldrig inne i </TABLE>. Man kan skriva i princip hur många attribut som helst och ordningen spelar inte heller någon roll. Det enda man måste tänka på är att alla attribut måste vara giltiga och inte får motsäga varandra. Man bör också undvika att skriva samma attribut flera gånger.
Varje attribut har ett värde, som skrivs innanför citationstecken. Man kan i vissa fall utesluta citationstecknet, om man använder värden som skrivs enbart med bokstäverna a-z eller A-Z, och med siffrorna 0-9. Man kan alltså skriva width=3 i stället för width="3". Man måste använda citationstecken om man anger procentvärden, t.ex width="100%".
'width' använder man när man vill ha en viss bredd, antingen på hela tabellen eller på en kolumn. Om width-attributet skrivs inne i <TABLE> kommer tabellen att få en viss bredd. Skrivs width inne i <TD> kommer kolumnen att få en viss bredd.
<TABLE width="100%> gör att tabellen blir lika bred som skärmen, oavsett vilket innehållet är.
Eftersom cellerna anpassar höjden efter innehållet behöver man inte använda 'height'-attributet, även om det skulle vara möjligt. Men det är lätt att göra fel: anger du ett width- och ett height-värde, blir utrymmet maximerat och då kanske texten inte får plats, vilket kan resultera i att tabellen/texten inte går att läsa.
Förutom procent kan man också ange ett värde i antal pixlar: om du vill göra en fast vänstermarginal på din sida, kan du skriva:
<TABLE width="100%">
<TD width="100">Här skriver du texten som skall vara i vänstermarginalen,
t.ex ett index.</TD>
<TD>Här skriver du texten som skall finnas på resten av sidan.</TD>
</TABLE>
Som blir:
| Här har jag skrivit texten som skall vara i vänstermarginalen. | Här har jag skrivit texten som skall finnas på resten av sidan. |
Jag har gjort så på startsidan. Använd pixelvärden när du vill att cellerna skall ha en exakt bredd. Tänk på att du därmed riskerar att de med mindre skärmyta måste bläddra i sidled för att se hela din tabell.
Det finns ytterligare ett sätt att ange bredden på en tabellcell, nämligen med värdet '*' (=stjärna), men det jag säger här fungerar inte i alla webläsare, framförallt de lite äldre:
<TD width="200">...
<TD width="*">...
<TD width="*">...
Detta skapar tre kolumner, den vänstra 200 pixlar bred och de två andra delar på resten av skärmbredden.
<TD width="*">...
<TD width="*">...
<TD width="*">...
är samma som om man skrivit "33%". Det blir lika breda kolumner och webläsaren delar den sista procenten i tre lika stora delar.
Du kan också skriva:
<TD width="1*">...
<TD width="6*">...
<TD width="3*">...
som innebär att vänstra kolumnen tilldelas en del av skärmbredden, mellersta kolumnen sex delar och högra kolumnen tre delar. Detta är samma som att skriva:
<TD width="10%">...
<TD width="60%">...
<TD width="30%">...
'align' betyder ungefär 'justera i sidled' och har värdena left, center och right. 'valign' kan översättas med 'justera i höjdled' och har värdena top, middle och bottom.
Skriver man attributen inne i <TABLE> justeras hela tabellen. Skriver man dem inne i <TD> justeras innehållet i tabellcellen.
<TABLE align="left" valign="top">
Dessa värden är default i min webläsare och justerar tabellen så att den ligger till vänster och i mitten.
<TD align="left" valign="middle">
är grundinställningen för data inuti tabellcellerna, som alltså hamnar till vänster och i mitten. Eftersom andra kan ha andra inställningar bör man använda dessa båda attribut för att styra placeringen, i synnerhet om man lägger in bilder i cellerna och definitivt om man använder en tabell för hela sitt dokument.
Här är ett exempel:
<TABLE>
<TR>
<TD align="left" valign="top"></TD>
<TD align="center" valign="middle"></TD>
<TD align="right" valign="bottom"></TD>
</TR> </TABLE>
som jag gjort om lite:
| Den här texten skall befinna sig till vänster och längst upp i cellen: | Aristoteles |
| Den här texten skall befinna sig i mitten av cellen: | Sokrates |
| Den här texten skall befinna sig till höger och längst ned i cellen | Cicero |
Om det inte fungerar så som jag sagt så betyder det att webläsaren inte förstår kommandona. Då får man skriva på något annat sätt, tills resultatet blir som man tänkt.
'colspan' använder man när man vill att en rad skall sträcka sig över flera kolumner. Antalet kolumner skriver du så här:
<TD colspan="3">, som betyder att kolumnen skall sträcka sig över tre kolumner på bredden. <TR colspan="3"> betyder att raden sträcker sig över tre kolumner.
'rowspan' fungerar på motsvarande sätt och skrivs: <TD rowspan="3">, vilket betyder att kolumnen sträcker sig över tre rader. <TR rowspan="3"> betyder att raden sträcker sig över tre rader.
Default är "1" för både colspan och rowspan. Värdet "0" betyder att kolumnen (och motsvarande för raden) skall sträcka sig över alla efterföljande rader, räknat från den där det skrivs.
Ett exempel:
<TABLE>
<TR>
<TD colspan="3" align="center">Välkända filosofer</TD>
</TR>
<TR>
<TD>Aristoteles</TD>
<TD>Sokrates</TD>
<TD>Cicero</TD>
</TR>
</TABLE>
som blir:
| Välkända filosofer | ||
| Aristoteles | Sokrates | Cicero |
Använd 'nowrap' med försiktighet. Attributet förhindrar nämligen radbrytning inne i en cell. Du kan lätt skapa orimligt breda tabeller av misstag. Kan ibland vara användbart i rubriker:
<TH nowrap>Rubriktext</TH>
<TH> kan fritt översättas med 'tabellcellsrubrik' och <CAPTION> blir då 'tabellrubrik'. <TH> och <CAPTION> kan ha samma attribut som <TD>. <CAPTION> fungerar dessutom som en cell som sträcker sig längs hela tabellens bredd, men elementet måste skrivas direkt efter <TABLE> och får dessutom bara förekomma en gång i varje tabell.
I HTML 4.0 gäller följande: <CAPTION align="top"> placerar rubriken överst och <CAPTION align="bottom"> placerar den underst i tabellen. Rubriken går också att justera i sidled med samma attribut. Elementet kan även kompletteras med attributet 'summary'. Om du använder en lång rubrik bör du inte använda 'nowrap' utan låta rubriken följa tabellen i stället. Men det blir oftast ganska snyggt om rubriken centreras, vilket fungerar även i HTML 3.2.
Här är ett litet exempel:
<TABLE>
<CAPTION align="center">Antal kaffekoppar per dag</CAPTION>
<TR>
<TH>Namn</TH>
<TH>Antal</TH>
<TH>Mjölk/socker?</TH>
</TR>
<TR>
<TD>Kalle</TD>
<TD>2</TD>
<TD>Mjölk, inget socker</TD>
</TR>
<TR>
<TD>Lisa</TD>
<TD>8</TD>
<TD>Nej</TD>
</TR>
<TR>
<TD>Lars</TD>
<TD colspan="2" align="center">Uppgift saknas</TD>
</TR>
</TABLE>
som ser ut så här:
| Namn | Antal | Mjölk/socker? |
|---|---|---|
| Kalle | 2 | Mjölk, inget socker |
| Lisa | 8 | Nej |
| Lars | Uppgift saknas | |
'Layout' är ett väldigt omfattande begrepp, som i websammanhang har kommit att betyda flera olika saker, t.ex det sätt som en sida presenteras på i webläsaren. Utseendet på sidan bestäms då dels av hur webläsaren är inställd, och dels på hur sidan är HTML-kodad. Med stylesheets - stilmallar - har man möjlighet att påverka layouten in i minsta detalj.
Här skall jag dock inte ta upp stylesheets, utan bara de möjligheter som finns att styra layouten med hjälp av tabellkommandona. Jag har t.ex redan beskrivit hur man bestämmer bredden och höjden på vissa celler och hur man justerar texten inne i cellerna. Nu skall jag förklara några ytterligare kommandon, som finns tillgängliga i HTML 3.2-standarden. I avsnitt 4 på [nästa sida om tabeller] sida tar jag upp mer specifika funktioner som tillkommit i HTML 4.0.
Jag skall passa på att ge några tips:
|
|
Avsluta alla element, t.ex </TD> efter <TD>. Det behövs kanske inte för de nyaste webläsarna, men fortfarande finns gott om äldre browsers i omlopp, som inte alltid klarar ofullständig kodning. |
|
|
Undvik därför också element och koder som inte är standard, om det är viktigt att alla skall kunna se allt du skrivit som du tänkt. Jag vet att det finns många som har webläsare som är inställda för HTML 2.0 och som inte förstår sådant som tabeller inuti tabeller eller färgade tabellceller. |
|
|
En tom tabellcell kan fyllas med ett översatt mellanslag ( eller  ) eller ett streck ( - ), annars kan tabellen få skev form eller krascha helt. |
|
|
Använd inte tabeller för att skapa två spalter, åtminstone inte för längre textstycken. Den som sparar din fil som en textfil och har en omodern eller felaktigt inställd webläsare, riskerar nämligen att tabellkolumnernas textrader vävs in i varandra, i stället för att visas separat. |
|
|
Använd alltid <TABLE width="100%"> om du vill att tabellen skall sträcka sig över hela skärmbredden. |
'bgcolor' bestämmer bakgrundsfärgen i hela tabellen eller i en tabellcell. Skrivs:
<TABLE bgcolor="#färgkoden">
men fungerar även i <TR>, <TD> och <TH>.
Tips: Om du använder färg i cellerna måste du tänka på att den skall harmonisera med textens färg. Och den måste även gå att läsa mot bakgrundsfärgen, om besökarens webläsare inte förstår attributet 'bgcolor'. Tänk också på att många är färgblinda! Använd bakgrundsfärg och textfärg som kontrasterar tydligt mot varandra.
Ett exempel:
<TABLE>
<TR>
<TD bgcolor="#FFFF00">Aristoteles</TD>
<TD bgcolor="#00FFFF">Sokrates</TD>
<TD bgcolor="#00FF00">Cicero</TD>
</TR>
</TABLE>
som blir:
| Aristoteles | Sokrates | Cicero |
Både 'cellspacing' och 'cellpadding' skrivs inne i <TABLE>, t.ex så här:
<TABLE cellspacing="10" cellpadding="5" >
<TR>
<TD>Aristoteles</TD>
<TD>Sokrates</TD>
<TD>Cicero</TD>
</TR>
<TR>
<TD>Platon</TD>
<TD>Epikuros</TD>
<TD>Protagoras</TD>
</TR>
</TABLE>
som ser ut så här:
| Aristoteles | Sokrates | Cicero |
| Platon | Epikuros | Protagoras |
'cellspacing' anger hur tjock kanten skall vara runt cellerna och 'cellpadding' anger hur långt avståndet skall vara mellan texten inne i tabellcellen och innerkanten på cellen. Man kan alltså skapa en hel del variation med dessa båda attribut.
Man kan också använda procentvärden; värdet räknas då i procent av det tillgängliga utrymmet, d.v.s cellpadding="10%" ger en vänsterkant som är 5% av cellens utrymme och en högerkant som också är 5% av cellutrymmet. Samma sak för värden i toppen och botten av cellen. Det totala värdet delas alltså i två lika stora delar.
Border-attributet bestämmer i HTML 3.2 både kanten på tabellen och kanterna runt varje tabellcell. (I HTML 4.0 finns det olika attribut för alla dessa egenskaper.) Det skrivs inne i <TABLE>. Jag har använt border="1" i de flesta exemplen ovan för att förtydliga tabellernas gränser. Border="0" skall du använda om du inte vill ha kanter eller ramar runt tabellen. Den här tabellen har border="5":
| Knapp 1 | Knapp 2 | Knapp 3 | Knapp 4 | Knapp 5 | Knapp 6 |
Med hjälp av border-attributet kan man alltså skapa en hel del fräcka effekter, eftersom kanten runt tabellen gör att den ser ut att ligga ovanför resten av dokumentet. Men testa alltid tabellen i flera olika webläsare; Netscape och Explorer har nämligen lite olika sätt att visa ramar runt tabeller på. Som vanligt, alltså.
Den som vill lägga en tabell längst upp på sin sida och inte vill ha en glipa mellan tabellkanten och fönsterkanten, måste söka sig lite utanför de gängse HTML-kommandona. Följande fyra attribut förflyttar tabellen så att den ligger tätt intill fönsterkanten. De går även att använda i andra sammanhang, när man vill mellanrummet mellan tabellen eller dess celler och någonting annat. Används med fördel ihop med border:
<TABLE border="0" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
I Explorer finns många olika sätt att lägga in färger, t.ex med attributet bordercolor. Det fungerar i tabeller och på andra ställen:
<TABLE border="1">
<TR>
<TD bordercolor="#FF0000">Aristoteles</TD>
<TD>Sokrates</TD>
<TD bordercolor="#00FF00">Cicero</TD>
</TR>
</TABLE>
Ger följande tabell:
| Aristoteles | Sokrates | Cicero |
(Eftersom det här är ett Explorer-specifikt kommando fungerar det ju inte i Netscape.)
Texten är lånad från www.jonasweb.nu,
men redigerad av
.