Logga in
Att använda tabeller har varit det bästa sättet att få önskad formatering och placering av text och objekt på sidan. Genom att använda tabeller på rätt sätt kan du få dina webbsidor att visas exakt som du vill ha dem avseende bredd på textrader och placering av bilder mm. Däremot kan du aldrig vara säker på att textradernas längd och teckensnittens storlek stämmer då det varierar beroende på plattform och webbläsare, läs mer om det i övningen Text »
En tabell består av rader och celler. Om du är van att använda tabeller i ordbehandlings- eller layoutprogram har du nytta av det även i HTML-tabeller även om det finns en del skillnader.
Tabeller skapar du med menyn "Insert/Table" (Infoga/tabell) eller med snabbkommandot CTRL+ALT+T. Du kan också använda paletten "Object":
Om du godkänner valen i dialogrutan ovan får du tabellen nedan. Den består av 3 rader och 3 kolumner och upptar 75% av webbläsarens bredd. Om du minskar eller ökar bredden på webbläsaren (eller Dreamweavers fönster så ändras även tabellens bredd. Storleken är alltså relativ till fönstrets bredd.
Tabellens storlek är 75% av fönstrets bredd:
... och tabellens bredd minskar relativt med fönstrets
bredd:
Kolla koden för tabellen. Märket för tabell är <TABLE>. Varje rad anges som <TR> (table row) och cellerna <TD> (table definition). I varje cell finns ett hårt mellanslag (non breaking space)   (se mer om specialtecken i övningen "Skapa webbplats, HTML-grunder" ») Dreamweaver placerar ett   i varje cell för att de inte ska vara tomma. Tomma celler visar inte viss formatering och kan dessutom "kollapsa", mer om det längre fram...
Avstånden mellan cellerna kallas "cell spacing" (cellmellanrum) och avståndet inom cellerna "cell padding" (cellutfyllnad).
Skriv in text i dina tabellceller. Avståndet mellan texten
och cellernas kanter (cell padding) är som standard ca 2 pixlar och avstånd mellan cellerna (cell spacing) är ca 1 pixel.
Tabell med standardavstånd mellan och inom cellerna:
... och samma tabell med ändrade avstånd:
Koden anges inom <TABLE> med attributen cellspacing och cellpadding:
(OBS!
Om tabellen "kollapsar" i någon kolumn när
du skriver texten så beror det på att innehållet
i de övriga kolumnerna tar mer utrymme än vad som behövs.
Du åtgärdar detta genom att ange bredd på alla celler,
mer om det längre fram...)
Du ändrar enklast tabellens egenskaper med paletten "Properties"
(Egenskaper).
OBS! skilj på tabellens egenskaper och cellernas egenskaper.
Vilka egenskaper du ser beror på vad du markerat.
Egenskaperna för Tabellen:
Egenskaperna för en av cellerna:
TIPS! se till att du ser allt i paletten "Properties" genom att klicka på pilen i nedre högra hörnet. Annars är vissa egenskaper
dolda: |
Markera tabellen genom att placera textmarkören någonstans
i tabellen och använda snabbkommando CTRL+A ett par gånger
eller genom att föra muspekaren i ytterkant på tabellen
och klicka när du ser ett "hårkors".
Markera med "hårkors" eller CTRL+A:
Markerad tabell:
Exempel på resultat med olika värden i Cell padding och Cell spacing:
Tabellen och cellerna ha olika egenskaper och kan formateras var för sig. För att ge de olika delarna egenskaper markerar du dem först.
Enklast är att placera textmarkören i tabellen och använda snabbkommandot CTRL+A ett par gånger.
Textmarkören i tabellen... |
CTRL+A ett par gånger markerar tabellen: |
Genom att placera textmarkören i cellen så kan du ange dess egenskaper i paletten "Properties". Vill du markera fler celler kan du klicka+dra eller SHIFT+klicka för att markera sammanhängande celler. För markering av celler som inte gränsar till varandra använder du CTRL+klick.
Klicka+Dra eller SHIFT+Klick markerar flera celler:
CTRL+Klick markerar celler som inte är sammanhängande:
Klicka i kanten av raden:
...för markering av hela raden:
Klicka i överkant av kolumn: |
För markering av hela kolumnen: |
Tabellens bredd kan anges i procent av webbläsarens bredd eller i fast storlek i pixlar. Cellernas bredd anges i procent av tabellens bredd eller i pixlar.
Viktigt när du använder tabeller är att du förgranskar i en webbläsare regelbundet (F12). Felaktiga värden på tabell- eller cellbredder kan ge förskjutningar som inte syns i Dreamweaver! För att måtten ska stämma så bör bredden på alla kolumnerna inte överstiga eller understiga tabellens bredd.
Ändra bredd på hela tabellen genom att dra i kanten. Du kan se bredden i procent eller pixlar i paletten "Properties":
För ett exakt värde kan det vara enklare att markera tabellen och ange värdet numeriskt direkt i "Properties"...
Genom att dra i cellernas kanter ändrar du bredden. Enheten (% eller pixlar) blir densamma som i tabellen.
OBS! Kontrollera så att summan av kolumnbredderna inte är mer eller mindre än tabellens bredd.
Cellernas bredd, 39+31+30=100%
Om du har fått felaktiga bredder eller höjder på cellerna kan du markera tabellen och använda knapparna "Clear Cell Heights" (Nollställ Cellhöjder) och "Clear Cell Widths" (Nollställ Kolumnbredder) och börja om med måttsättningen:
Om du vill byta enhet från tex procent till pixlar bör du använda knappen "Convert Table Width to Pixels" (Konvertera tabellbredd till bildpunkter). Fördelen är att även cellernas enheter byts ut då.
Ett bra hjälpmedel är att visa linjalerna med menyn "View/Rulers/Show" (Visa/Linjaler/Visa) eller CTRL+ALT+R. Du kan flytta "nollpunkten" genom att dra i hörnets skärningspunkt. Släpp sedan nollpunkten nedanför linjalen:
Dra från skärningspunkten mellan linjalerna för flyttning
av nollpunkten:
...nollpunkten placerad i vänster kant av tabell för kontroll
av bredd:
Cellernas totala bredd = tabellens bredd 350 pixlar:
Den totala bredden på tabellen är lätt att få att stämma, 350 pixlar är 350 pixlar. Bredden på kolumnerna/cellerna är svårare att beräkna beroende på om du angivit cellpadding, cellspacing eller border (kantlinje), vilkas bredd då måste räknas bort från cellernas bredd.
Exemplet nedan har ingen kantlinje och cellspacing är angivet till 0. Däremot är cellpadding=5 vilket innebär att varje cell har 10 pixlars bredd från början som måste tas med i beräkningen. Alltså blir 100+100+120=350 och inte 320 pixlar...
När du jobbar med innehållet i tabellerna så märker du snart att bredd och höjd inte ändras automatiskt. Dreamweaver uppdaterar inte tabellerna kontinuerligt eftersom det kan innebära belastning av datorns kapacitet vid komplexa tabeller.
Textinnehållet gör att cellen blir högre:
...vid radering av text blir inte cellen mindre automatiskt:
...du måste uppdatera tabellens och cellens höjd manuellt
med
CTRL+MELLANSLAG:
Vill du att tabellerna ska uppdateras automatiskt anger du det i menyn "Edit/Preferences..." (Redigera/Inställningar...) och kategorin "General" (Allmänt). Avaktivera "Faster Table Editing" (Snabbare tabellredigering):
Om du upplever att det blir en fördröjning när du jobbar med tabellerna bör du återställa valet igen och istället uppdatera manuellt med CTRL+MELLANSLAG.
Cellerna kan sträcka sig över flera kolumner genom att attributet colspan (column spanning) läggs till <TD> för att ange hur många kolumner som avses. Om celler sträcker sig över flera rader används rowspan.
Markera de celler som ska läggas samman och använd knappen i paletten "Properties" (Egenskaper):
Markera de celler som ska delas och använd knappen i paletten "Properties" (Egenskaper):
Celler kan delas i rader eller kolumner:
Innehållet i cellerna är som standard vänsterställt horisontellt och centrerat vertikalt.
Standard (default) är vänsterställd horisontellt:
Ändra cellernas horisontella justering:
Standard är också att cellinnehållet
justeras centrerat
vertikalt (i höjdled) vilket syns först när någon
av cellernas innehåll gör tabellraden högre:
Ändra cellinnehållets vertikala justering:
<tr valign="top"> ger justering i överkant:
Justering av hela tabellen i horisontellt läge med attributet align gör att tabellen placeras relativt till webbläsarens kanter.
Centrering av hela tabellen horisontellt:
...gör att tabellen positioneras mitt emellan webbläsarens
fönsterkanter:
Vänsterjustering behövs ju normalt inte då det är default (standard). En anledning till att justera vänster eller höger är om du vill placera två eller flera tabeller bredvid varandra. I exemplet nedan är "tabell 1" vänsterjusterad:
Vänsterjustering av den ena tabellen för att placera dem
bredvid varandra:
Du kan styra ombrytningen av textraderna på fler sätt än att ange bredd på cellerna. Om du har text som ska vara rubriker vill du kanske inte att raderna bryts. Genom att ange attributet nowrap märket <TD> hindrar du att en rad bryts. OBS! Det innebär ofta att övriga cellers bredd påverkas om innehållet är längre än cellens bredd.
Exempel på rubriker som bryts i cellkanten:
Ange att cellinnehåll ej ska brytas:
...rubriken radbryts ej i första cellen:
Ett formateringsalternativ som liknar rubrikmärkena <H1> - <H6> (läs mer i övningen "Texformatering" ») är att ange att cellen ska vara en rubrikcell (header cell) med märket <TH> istället för <TD>. Det innebär att textens storlek och utseende ändras. <TH> och <H> är mer användbara tillsammans med stilmallar, CSS »
Rubrik nr 2 angiven som "header":
Kantlinjerna i tabellen kan anpassas avseende bredd och färg. Attributet BORDERCOLOR används inom <TABLE>. För att kunna använda kantlinjeegenskaper krävs naturligtvis att du valt en bredd på kantlinjen border="1" eller annat värde. I exemplen nedan används cellmellanrum 0 pixlar (cellpspacing=0):
Färg på kantlinjen bordercolor tar
bort det "3-dimensionella" utseendet:
Ange färg med tabellen markerad:
Vill du ha kvar 3D-utseende när du ändrar färg måste du ange det i koden:
<table border="10" bordercolorlight="#FFE67D" bordercolor="#C59B1D" bordercolordark="#947516">
Färg på kantlinjer i cellerna anger du inom <TD> med attributet BORDERCOLOR:
Ange färg med celler markerade:
Standard för kantlinje är att den omger varje cell i tabellen. Vill du ha kantlinjen runt tabellen och inte i varje cell måste du lägga din tabell utan kantlinje i en annan tabell som har kantlinjen. Den yttre tabellen kan bestå av en enda cell.
Standardutseende med kantlinjer runt varje cell:
Kantlinje endast runt tabellen:
...med hjälp av nästlade tabeller. Den yttre tabellen har
kantlinjen:
Så här kan koden se ut:
<table border="1" cellspacing="0"
cellpadding="3" bordercolor="#FF3366">
<tr>
<td>
<table border="0" cellpadding="5" width="100%"
cellspacing="0">
<tr><td>textinnehållet här...</td></tr>
</table>
</td>
</tr>
</table>
Exempel på inställning för den inre tabellen:
Exempel på inställning för den yttre tabellen:
Vill du kunna anpassa kantlinjerna på fler sätt gör du det med CSS » som i exemplet nedan:
Färg eller bild som bakgrund i celler ger en bra möjlighet att använda tabeller för att formge webbsidan. Genom att variera avståndet mellan cellerna och kombinera med kantlinjer så kan du få olika utseenden. Färg som bakgrund till tabellen eller cellen anges med attributet BGCOLOR till märket <TABLE>, <TR> eller <TD>.
<tr bgcolor="#CCFF00">Här är några exempel med variation i cellmellanrum och kantlinjer:
Ange färg som cell- eller tabellegenskap i paletten "Properties":
OBS! Tabeller tolkas olika av webbläsare. Dreamweaver lägger alltid (non breaking space, se mer i övningen "Skapa webbplats - grunderna" ») för att cellerna alltid ska ha ett innehåll. Om cellerna inte har något innehåll visas inte färg, kantlinjer och bilder i vissa webbläsare och versioner. Exemplen nedan visar hur samma tabell tolkas olika i Netscape och Internet Explorer.
Innehåll i alla celler:
Om vissa celler är tomma bör du ha eller tex en transparent GIF-bild i cellen för att ge den innehåll:
<td> </td>
Celler utan innehåll i Internet Explorer:
Celler utan innehåll i Netscape 6:
Bakgrundsbild används på samma sätt som färg och använder attributet BACKGROUND till märket <TABLE>. Den stora skillnaden är att bilden upprepas (tiling) åt höger och nedåt. Se mer om bilder i övningen "Bilder" ». Även här gäller vissa skillnader i olika webbläsare och versioner.
Ange bakgrundsbild som cell- eller tabellegenskap i paletten "Properties":
OBS! Tabeller tolkas olika av webbläsare. Dreamweaver lägger alltid (non breaking space, se mer i övningen "Skapa webbplats - grunderna" ») för att cellerna alltid ska ha ett innehåll. Om cellerna inte har något innehåll visas inte färg, kantlinjer och bilder i vissa webbläsare och versioner. Exemplen nedan visar hur samma tabell tolkas olika i Netscape och Internet Explorer.
Internet Explorer visar det rätta utseendet:
...och tolkningen av samma tabeller i Netscape 6:
skriv ut »