Innehållet i en sida är beroende av bildskärmens upplösning och webbläsarfönstrets storlek och det är svårt att bestämma exakt var text ska radbrytas och annat innehåll ska placeras. Med hjälp av tabeller kan du bestämma den exakta bredden och höjden på en yta. En tabell består av rader och kolumner som är indelade i celler. Du kan ha olika bredd på kolumner och rader och du kan sammanfoga flera celler till en.
OBS! Tabellens totala bredd är oberoende av kantlinjebredd, padding eller avstånd mellan celler. Om du ökar måtten på en kantlinje blir ytan för tabellens innehåll mindre:
se exemplet ovan i eget fönster »
Tabell där celler sträcker sig över två kolumner (colspan) och två rader (rowspan):
Cell över 2 kolumner |
||
Cell över 2 rader |
||
Du kan även skapa tabeller inuti tabeller - nästlade tabeller:
Tabell 1 | |||||
|
Bredden på tabellerna kan variera med fönstrets storlek eller ha en fast bestämd storlek angiven i procent eller pixlar. Vanligt på webbsidor är att man anpassar bredden på webbsidan så att användaren aldrig behöver bläddra i sidled (nedre horisontella bläddringslisten). Läs mer om bildskärmars upplösning i avsnittet om bildskärmsupplösning »
Lämplig bredd på tabeller för anpassning till olika upplösningar ser du nedan. Kom ihåg att bläddringslisterna i webbläsaren också tar plats, räkna med att de har ca 20 pixlars bredd. Vill du ha lite luft runt innehållet i tabellen så gör du den tex 100 pixlar mindre. Här är några riktmärken när du bestämmer tabellbredd för ditt textinnehåll. Tänk på att långa textrader är svårlästa och att en tabellbredd på ca 500-550 pixlar ungefär motsvarar en A4-pappersbredd vid utskrift.
Märket <TABLE> anger att det är en tabell, <TR> definierar rader och <TD> en cell. Alla Rader består av en eller flera tabellceller.
En tabell med 1 rad och 1 kolumn kan ut så här:
Exempel:En tabell med en rad och en kolumn... |
Attributen som bestämmer tabellens övriga egenskaper:
WIDTH (tabell- eller
cellbredd)
HEIGHT (tabell- eller cellhöjd)
BORDER (kantlinje)
CELLSPACING (avstånd
mellan celler)
CELLPADDING (avstånd
mellan cellkant och innehåll)
BORDERCOLOR (kantlinjefärg)
BGCOLOR (bakgrundsfärg
i tabell)
BACKGROUND (bakgrundbild
i tabell)
COLSPAN (cell över
flera kolumner)
ROWSPAN (cell över
flera rader)
Bredd på tabell och kolumner anges i pixlar eller procent. Tabellen nedan har bredden 100 pixlar:
En tabell med en rad och en kolumn i 100 pixlars bredd... |
Tabell med 100% bredd:
En tabell med en rad och en kolumn i 100 procents bredd... |
Flera rader och kolumner anges genom att upprepa <TR> och <TD>:
cell1 | cell2 |
cell3 | cell4 |
Bredden på kolumn anger du genom att ange ett värde för cellen <TD>. Alla celler i samma kolumn har samma bredd och du kan inte ha olika bredd på cellerna i samma kolumn.
Exempel:cell1 150 pixlars bredd | cell2 |
cell3 | cell4 |
Höjden på cellen ger samma höjd för alla celler i samma rad:
cell1 150 pixlars höjd | cell2 |
cell3 | cell4 |
Attributet COLSPAN och ett värde för antalet kolumner eller rader som ska "spannas" vilket innebär att en cell sträcker sig över över flera kolumner:
cell1 | cell2 |
cell3 |
Sammanfoga rader med attributet ROWSPAN och ett värde för antalet rader som ska "spannas":
cell1 | cell2 |
cell3 |
Olika celler kan sträcka sig över flera kolumner och rader som i exemplet nedan:
cell1 | cell2 | |
cell3 | ||
cell4 | ||
cell5 | cell6 | cell7 |
Bakgrund i form av färg eller bild kan anges för tabellen men om du anger både bakgrundsfärg och bakgrundsbild så är det bilden som syns. Bakgrundsfärg kan anges även i cellerna och ersätter då tabellens färg i den aktuella cellen:
cell1 | cell2 |
cell3 | cell4 |
cell1 | cell2 |
cell3 | cell4 |
Bredden på kantlinjerna är desamma för hela tabellen men färgen kan du bestämma individuellt för varje cell..
Exempel:cell1 | cell2 |
cell3 | cell4 |
Tabellens kantlinje visas även runt alla celler men bredden på kantlinjen - 5 pixlar i exemplet nedan - påverkar bara ramen runt tabellen:
cell1 | cell2 |
cell3 | cell4 |
Ett attribut till <TABLE> som påverkar den yttre kantlinjen är FRAME som kan ha någon av följande värden:
ABOVE (ovanför)
BELOW (under)
BORDER (alla sidor)
BOX (alla sidor, samma som
"border")
HSIDES (ovan och under)
VSIDES (höger och vänster)
LHS (vänster)
RHS (höger)
VOID (inga kantlinjer alls)
frame="above" | ovan | |
frame="below" | nedan | |
frame="hsides" | ovan under | |
frame="vsides" | höger vänster | |
frame="lhs" | vänster | |
frame="rhs" | höger | |
Du kan själv styra avståndet mellan cellerna med attributen CELLSPACING som anges i antal pixlar:
cellspacing="1" | cellspacing="5" | ||||||||||||
|
|
Avståndet mellan cellkant och innehåll i själva cellen kallas CELLPADDING (cellstoppning):
cellpadding="0" | cellpadding="5" | ||||||||||||
|
|
Justering av tabellen och cellernas innehåll sker med attributen VALIGN för vertikal justering och ALIGN för horisontell justering. Tabellen är som standard vänsterjusterad och cellernas innehåll är vänsterjusterat i sidled och centrerat i höjdled. OBS! Innehållet i cellerna är alltså centrerat vertikalt som standard vilket ofta inte syns förrän cellernas innehåll ger olika höjd på cellerna.
Exempel:En cell med ganska mycket textinnehåll som får den andra cellens innehåll att centreras vertikalt när så mycket utrymme krävs så att höjden ändras | Centrerat i höjdled som standard... |
cell3 | cell4 |
Genom att ange att alla celler i en rad <TR> ska justeras vertikalt i överkant (TOP) så undviker du att någon cells innehåll hamnar i mitten.
En cell med ganska mycket textinnehåll som får den andra cellens innehåll att centreras vertikalt när så mycket utrymme krävs så att höjden ändras | ...Nu är innehållet justerat mot överkanten. |
cell3 | cell4 |
Hela tabellen kan justeras med attributet ALIGN och
då standard är left behöver det inte anges. Attributen right och center kan
du använda och tabellen nedan är centrerad.
En cell med ganska mycket textinnehåll som får den andra cellens innehåll att centreras vertikalt när så mycket utrymme krävs så att höjden ändras | ...Nu är innehållet justerat mot överkanten. |
cell3 | cell4 |
Här är fler exempel där cellinnehållet är justerat horisontellt och vertikalt med attributen ALIGN och VALIGN:
En cell med ganska mycket textinnehåll som dessutom är justerat åt höger med attributet ALIGN som avser den horisontella justeringen | innehållet i denna cell justerat mot botten med VALIGN. |
...höger | standard för cellers innehåll (vänster) |
Nästlade tabeller är när du placerar en tabell i en annan tabell . Användbart när cellernas kanter inte ska ligga kolumnvis eller när du vill ha celler både med och utan kantlinjer:
Genom att ändra avstånd mellan och i cellerna (SPACING och PADDING) kan du ge intrycket av att cellerna tillhör samma tabell och sträcker sig över kolumnernas gränser.
Exempel 2:Om du vill ha en ram runt tabellen endast på tabellens yttre kant och inte mellan cellerna kan du infoga din tabell i en annan tabell som endast består av 1 rad och 1 kolumn men har kantlinjer. I exemplet nedan har den "inre" tabellen inga kantlinjer men den övre raden har samma bakgrundsfärg som kantlinjefärgen i den "yttre" tabellen:
1.) En tabell som består av en rad och en kolumn med kantlinje (200 pixlars bredd):
2.) En till tabell med det huvudsakliga innehållet men utan kantlinjer och 100% bredd:
Rubrik | ||
cell1 | cell2 | cell3 |
cell4 | cell5 | cell6 |
3.) ...placeras i den första tabellen:
|
En tabell kan ha flera attribut som påverkar cellernas egenskaper. Du kan tilldela vissa celler egenskapen TH (rubrik) vilket gör att textstilen blir kraftigare och innehållet centrerat.
Exempel:cell | Rubrik | cell |
---|---|---|
Cellen ovanför dennna har egenskapen TH (rubrik) och textinnehållet blir då centrerat och krafigare... |
Genom att använda attributet NOWRAP anger du att textinnehållet i en cell inte får radbrytas.
Exempel:cell 1 i rad nr 1 där texten inte radbryts då attributet nowrap används | cell 2i rad nr 1 där innehållet radbryts. | cell 3 i rad nr 1 där innehållet radbryts |
(nowrap) | standard | standard |
Ett alternativ är att använda märkena THEAD (tabellhuvud), TFOOT (tabellfot) och TBODY (tabellkropp) vilket ger en logisk uppdelning av tabellen. Viktigt är då att du anger tabellen huvud och fot innan du anger kroppen.
cell1 | cell2 | cell3 |
---|---|---|
cell7 | cell8 | cell9 |
cell4 | cell5 | cell6 |
Tillämpa skugga i boxar, tabeller, bilder etc genom att ange box-shadow.
Cell 1 | Cell 2 | Cell 3 |
Cell 4 | Cell 5 | Cell 6 |
Cell 7 | Cell 8 | Cell 9 |
Skuggans placering anges i X- och Y-led (h-shadow, v-shadow) och parametrar som kan anges är blur (oskärpa), spread (spridning), color (färg) och inset (inre skugga).
Läs mer skugga (box-shadow) här »