Den mest grundläggande tabelltaggen är <TABLE>. Grundregeln är att alla HTML-tabeller måste inledas med starttaggen <TABLE>, och de måste avslutas med sluttaggen </TABLE> och allt som hör till tabellen måste finnas emellan taggarna.
Om man ger attributet BORDER till starttaggen <TABLE> kommer tabellen att se ut som en traditionell sådan, med snygga linjer runt alla cellerna. Om man vill ha en "osynlig" tabell (perfekt för att arrangera bilder och text snyggt) struntar man i att ge det attributet.
Om man vill ge sin tabell någon form av beskrivning skriver man <CAPTION>Tabellrubrik</CAPTION>. Observera att texten inte kommer att hamna inuti själva tabellen, utan strax utanför den. Man kan bestämma var genom att ge attributet ALIGN (som kan ta värdena TOP eller BOTTOM) till starttaggen <CAPTION>. Om man använder <CAPTION> måste märket vara det första som står i <TABLE>.
Förutom tabellrubriken består tabellen förstås av rader. För att markera var de ska finnas måste man skriva starttaggen <TR>, en förkortning för Table Row, när man vill att en ny rad ska börja och sluttaggen </TR> när den tar slut. Inom raden skriver man sedan de olika cellerna. En tabell med fyra rader får strukturen:
<TABLE> <CAPTION>Tabellens rubrik<CAPTION> <TR> ... </TR> <TR> ... </TR> <TR> ... </TR> <TR> ... </TR> </TABLE>
Det finns också två olika typer av tabellceller. Dels finns det rubrikceller (som används då man vill ge en rad eller kolumn en förklaring) och så finns det vanliga dataceller (som man skriver data i).
En rubrikcell skapar man med starttaggen <TH> (Table Heading) varefter man skriver vad som ska finnas i den, naturligtvis följt av sluttaggen </TH>. En datacell skapar man på samma sätt, fast med taggarna <TD> (Table Data) och </TD> istället.
Dessa celldefinitioner gör man inuti en rad, alltså mellan <TR> och </TR>. Den rad som har flest celler avgör hur många kolumner det ska finnas i hela tabellen. Om man är ordentlig kommer alla rader att vara lika utfyllda med celler, men om någon rad saknar en cell kommer web-läsaren oftast att lämna ett tomrum där cellen borde ha varit.
<TABLE BORDER> <CAPTION ALIGN=BOTTOM> <CITE>En adressbok</CITE> </CAPTION> <TR> <TH>Namn</TH> <TH>Adress</TH> <TH>Telefonnummer</TH> </TR> <TR> <TD>Kalle Svensson</TD> <TD>Storskogsgatan 4</TD> <TD>012-34567</TD> </TR> <TR> <TD>Maria Andersson</TD> <TD>Hamnvägen 5</TD> <TD>0162-4711256</TD> </TR> <TR> <TD>Pelle Karlsson</TD> <TD>Storgatan 7</TD> <TD>08-1234711</TD> </TR> </TABLE> |
Resultat i web-läsaren
|
Webläsaren markerar vanligtvis rubrikceller genom att skriva dem med fetstil och med centrerad text. Datacellerna skrivs vänsterjusterade med vanlig text. Kolumnerna i tabellen bli så breda att den längsta celltexten får plats.
Om man inte ger <TABLE> attributet <BORDER> får inte tebellen någon ram eller några kanter inuti. I just detta fall är det bättre att ha en ram, men tabeller utan ramar kan vara mycket bra för andra ändamål.
| Namn | Adress | Telefonnummer |
|---|---|---|
| Kalle Svensson | Storskogsgatan 4 | 012-34567 |
| Maria Andersson | Hamnvägen 5 | 0162-4711256 |
| Pelle Karlsson | Storgatan 7 | 08-1234711 |
Ibland vill man sätta ihop flera celler till en enda. Exempelvis skulle man kanske vilja ha en tabellrubrik överst inuti själva tabellen, som sträcker sig från den vänstra sidan till den högra.
När man påbörjar en cell som man vet ska vara extra bred ger man cellens starttagg det extra attributet COLSPAN=antal kolumner som cellen skall sträcka sig över.
När man har gjort en sådan sak är det förstås viktigt att man definierar färre celler efter den breda cellen, för man får inte glömma att totalbredden ska hållas konstant. Annars får man ett konstigt utseende...
Det går också bra att låta en cell breda ut sig nedåt längs en kolumn. Då heter attributet ROWSPAN och fungerar på motsvarande sätt. En viktig sak får man inte glömma, och det är att man får definiera en cell mindre i de rader under som den extra höga cellen inkräktar på!
<TABLE BORDER> <CAPTION>En liten betygstabell </CAPTION> <TR> <TD COLSPAN=2 ROWSPAN=2></TD> <TH COLSPAN=3>Elever</TH> </TR> <TR> <TH>Magnus</TH> <TH>Henning</TH> <TH>Ronnie</TH> </TR> <TR> <TH ROWSPAN=2>Betyg</TH> <TH>Matematik</TH> <TD>MVG</TD> <TD>G</TD> <TD>MVG</TD> </TR> <TR> <TH>Svenska</TH> <TD>MVG</TD> <TD>VG</TD> <TD>VG</TD> </TR> </TABLE> |
Resultat i web-läsaren
|
|||||||||||||||||
Man kan ändra placeringen av innehållet i en cell. Attributet ALIGN (som ändrar placeringen i horisontell led) och VALIGN (vertikal led) kan ges till <TR>, <TH> och <TD>.ALIGN kan anta värdena LEFT, CENTER och RIGHT. VALIGN kan anta TOP, MIDDLE och BOTTOM. Om man ger attributen till radtaggen <TR> gäller inställningen för hela raden. Om man ger det till en cell (<TH> och <TD>) gäller det i den cellen, oavsett om raden har en annan inställning.
<TABLE BORDER> <CAPTION>Justering av cellinnehåll</CAPTION> <TR> <TD ROWSPAN=2></TD> <TH COLSPAN=3>ALIGN=</TH> </TR> <TR> <TH>LEFT</TH> <TH>CENTER</TH> <TH>RIGHT</TH> </TR> <TR VALIGN=TOP> <TH>VALIGN=<BR>TOP</TH> <TD ALIGN=LEFT>AB</TD> <TD ALIGN=CENTER>AB</TD> <TD ALIGN=RIGHT>AB</TD> </TR> <TR VALIGN=MIDDLE> <TH>VALIGN=<BR>MIDDLE</TH> <TD ALIGN=LEFT>AB</TD> <TD ALIGN=CENTER>AB</TD> <TD ALIGN=RIGHT>AB</TD> </TR> <TR VALIGN=BOTTOM> <TH>VALIGN=<BR>BOTTTOM</TH> <TD ALIGN=LEFT>AB</TD> <TD ALIGN=CENTER>AB</TD> <TD ALIGN=RIGHT>AB</TD> </TR> </TABLE> |
|
|||||||||||||||||||
Kolumnerna blir ofta så breda att den bredaste texten får plats. Om man tycker det ser konstigt ut är ett botemedel att sätta en vanlig radbrytning, <BR>, någonstans i celltexten.
Om man inte vill ha någonting i en cell skriver man kort och gott <TD></TD>. Web-läsaren gör då ett snyggt tomrum på dess plats.
För att kunna styra placeringen av tabeller samt kontrollera textflödet runt omkring dem kan man ge <TABLE> det extra attributet ALIGN. Det kan anta värderna LEFT eller RIGHT.
Om man inte vill att texten i en cell ska kunna radbrytas ger man cellen attributet NOWRAP. Det kan vara användbart i rubriker. Man bör använda NOWRAP med försiktighet, man kan skapa orimligt breda tabeller.
Man kan också om man vill ge <TABLE>-attributet BORDER ett värde, som helt enkelt talar om hur tjocka tabellens ytterkanter ska vara.
De flesta web-läsare klarar av att visa tabeller inuti andra tebeller, vilket ger ännu mer flexibitet! Osynliga tabeller, sådana utan attributet BORDER, kan användas för att skapa riktigt snygg och avancerad layout som annars är omöjlig med HTML.
<TABLE BORDER=8> <TR> <TH COLSPAN=2>Underbart dykställe</TH> </TR> <TR> <TD>Great Barrier Reef</TD> <TD>AUS</TD> </TR> </TABLE> |
Resultat i web-läsaren
|
||||
Ett annat smart attribut som kan ges till <TABLE> är CELLPADDING. Det talar om hur stort avståndet ska vara i bildpunkter räknat, från cellens innehåll till cellens kant.
<TABLE BORDER CELLPADDING=8> <TR> <TH COLSPAN=2>Megastjärnor</TH> </TR> <TR> <TD>Whitney Houston</TD> <TD>Celine Dion</TD> </TR> </TABLE> |
Resultat i web-läsaren
|
||||
Ett annat attribut som också kan ges till <TABLE> är CELLSPACING. Det talar om hur tjocka linjerna som går mellan cellerna skall vara räknat i bildpunkter.
<TABLE BORDER CELLSPACING=8> <TR> <TH>Original</TH> <TH>Look-alike</TH> </TR> <TR> <TD>Barbie</TD> <TD>Pamela Anderson<</TD >/TR> </TABLE> |
Resultat i web-läsaren
|
Ett användbart attribut till <TABLE> är WIDTH. Det talar om hur bred tabellen ska vara. Man kan ange hur många bildpunkter bred den ska vara, eller också kan man ange bredden i procent av själva web-fönstrets bredd. HEIGHT=attributet behöver man inte använda, eftersom cellerna anpassar höjden efter innehållet. Om man anger ett HEIGHT=värde, blir utrymmet maximerat och då finns det risk för att texten inte får plats, vilket kan göra tabellen oläslig.
<TABLE BORDER WIDTH=75%> <TR> <TH COLSPAN=2>Goda citrusfrukter</TH> </TR> <TR> <TD>Mandarin</TD> <TD>Apelsin</TD> </TR> </TABLE>
| Goda citrusfrukter | |
|---|---|
| Mandarin | Apelsin |
<TABLE BORDER WIDTH=120> <TR> <TH COLSPAN=2>Tips inför resan</TH> </TR> <TR> <TD>Kolla passet</TD> <TD>Växla till valuta</TD> </TR> </TABLE> |
Resultat i web-läsaren
|
||||
Det går faktiskt bra att ge attributet WIDTH till <TH> och <TD>. På så sätt kan man styra hur breda cellerna ska vara i förhållande till varandra. Problem uppstår dock om man får för sig att ange att samma kolumn ska vara olika bred på olika rader=undvik sådant! Förutom att ange bredden i procent och pixlar på en tabellcell, kan man även ange värdet "*" (=stjärna).
<TD> WIDTH="150"</TD> <TD> WIDTH="*"</TD> <TD> WIDTH="*"</TD>
Detta skapar tre kolumner, den vänstra 150 pixlar bred och de två andra delar på resten av skärmbredden.
<TD> WIDTH="*"</TD> <TD> WIDTH="*"</TD> <TD> WIDTH="*"</TD>
Detta skapar tre lika breda kolumner över skärmbredden.
<TD> WIDTH="1*"</TD> <TD> WIDTH="6*"</TD> <TD> WIDTH="3*"</TD>
Detta 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> <TD> WIDTH="60%"</TD> <TD> WIDTH="30%"</TD>
<TABLE BORDER WIDTH=80%> <TR> <TH WIDTH=70%>Nuvarande</TH> <TH>Föragångare</TH> </TR> <TR> <TD>Bill Clinton</TD> <TD>George Bush</TD> </TR> </TABLE>
| Nuvarande | Föregångare |
|---|---|
| Bill Clinton | George Bush |
Det går att lägga ytterligare en tabell inuti en cell. För att man ska få snygga resultat krävs att man använder WIDTH.
<TABLE WIDTH=100%>
<CAPTION>Konstiga tabeller...</CAPTION>
<TR VALIGN=MIDDLE>
<TD>
<TABLE BORDER CELLPADDING=9>
<TR>
<TH COLSPAN=2>Stjärnor från USA</TH>
</TR>
<TR>
<TD>Steven Seagal</TD>
<TD>Julia Roberts</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH=10%>
</TD>
<TD>
<TABLE BORDER=5 CELLSPACING=6>
<TR>
<TH COLSPAN=2>och sveriges svar:</TH>
<TR>
<TD>Stellan Skarsgård</TD>
<TD>Helena Bergström</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
|
|
|||||||||
Den yttersta tabellen är osynlig, och det enda man konkret ser av den är dess rubrik. Däremot gör den det möjligt att placera tabeller, eller vad man nu vill ha i dess celler, bredvid varandra. Lägg märke till att avståndet mellan de två synliga tabellerna skapas med hjälp av en tom cell.
BORDERCOLOR, BORDERCOLORLIGHT och BORDERCOLORDARK IE3
Om man inte tycker att tabeller är tillräckligt snygga som de är kan man ge en tabell en särskild bakgrundsfärg med hjälp av <TABLE>-taggens nya attribut BGCOLOR. Med de nya speciella attributen BORDERCOLOR, BORDERCOLORLIGHT och BORDERCOLORDARK (också de attribut till <TABLE>) kan man ändra färgen på de ljusa och mörka kantytor en tabell brukar ha.
<TABLE BORDER BGCOLOR="cyan"> <TR> <TH>BGCOLOR;</TH> </TR> <TR> <TD>Tabellfärg</TD> </TR> </TABLE> |
|
<TABLE BORDER BGCOLOR="cyan" BORDERCOLOR="white"> <TR> <TH>BORDERCOLOR</TH> </TR> <TR> <TD>Kantfärg</TD> </TR> </TABLE> |
|
<TABLE BORDER BGCOLOR="cyan" BORDERCOLORLIGHT="white"> <TR> <TH>BORDERCOLORLIGHT</TH> </TR> <TR> <TD>Kantfärg</TD> </TR> </TABLE> |
|
<TABLE BORDER BGCOLOR="cyan" BORDERCOLORDARK="white"> <TR> <TH>BORDERCOLORDARK</TH> </TR> <TR> <TD>Kantfärg</TD> </TR> </TABLE> |
|
Microsoft har gett <TABLE> attributet BACKGROUND som kan ge ännu snyggare tabeller. Med de tre attributen BORDERCOLOR, BORDERCOLORLIGHT och BORDERCOLORDARK, kan man styra cellramarnas färg och skuggor.
<TABLE BORDER BACKGROUND="bground\stbk005.jpg"
BORDERCOLORDARK="white">
<TR>
<TH>BACKGROUND</TH>
</TR>
<TR>
<TD>Bakgrundsbild</TD>
</TR>
</TABLE>
|
|
Dessa märken har Microsoft utökat med attributen BACKGROUND, BORDERCOLOR, BORDERCOLORLIGHT och BORDERCOLORDARK. Varje cell kan alltså ha sin egen bakgrund.
<TABLE BORDER BGCOLOR="black" BORDERCOLOR="black"> <TR> <TH BACKGROUND="bground\stbk057.jpg">Rubrikcellsbakgrund</TH> </TR> <TR> <TD BGCOLOR="teal">Tabellcellsfärg</TD> </TR> </TABLE> |
|
För att få din sida att se snyggare och mer professionell kan du dela upp olika textstycken i osynliga tabeller.
<TABLE ALIGN=CENTER WIDTH="90%" BORDER=0 CELLPADDING=10> <TR> <TD WIDTH="50%" VALIGN=TOP>Kolumn1</TD> <TD WIDTH="50%" VALIGN=TOP>Kolumn2</TD> </TR> </TABLE>
| Med hjälp av tabeller kan man arrangera texten i kolumner. Webbsidan blir då snyggare och det ger ett mer proffessionellt intryck. Det här textavsnittet är uppdelat i två kolumner. Tabellen är centerad och har en bredd på 90% av webbläsarfönstret, WIDTH="90%", vilket gör att man få marginaler på vänster och högersidorna. Genom att ge BORDER värdet 0 får man en osynlig tabell. För att få lite utrymme mellan innehållet i cellerna och ramen runt dom, använder man attributet CELLPPADDING som i detta fall har fått värdet 10, vilket ger 10 pixlars avstånd. | För att varje kolumn ska ha samma bredd måste man ange att varje datacell ska utgöra 50% av tabellens bredd, WIDTH="50%". För att texten ska hamna längst upp i varje datacell och inte centreras i datacellen, måste cellinnehållet justeras i höjdled. Detta åstadkommer man med attributet VALIGN som man ger värdet TOP, då justeras texten så att den hamnar högst upp i datacellen. För att dela upp texten tre kolumner istället för två, utökar man tabellen med ytterligare en datacell. Man ger då varje datacell en bredd på 33%, d.v.s WIDTH="33%" |
Klicka på länken för att komma till en sida med ett exempel på tabell-layout.
Den här sidan visar ett exempel på hur man kan åstadkomma en snygg layout på sin hemsida med hjälp av tabeller. OBS! denna sida kommer att öppnas i hela fönstret alla ramar kommer att försvinna. Anledningen är att du får en bättre överblick över hur sidan ser ut utan ramar. Vill du tillbaka till denna sida tryck på backknappen på webbläsaren.
Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.
Denna sida är skriven av Robert Karlsson.
E-post: karlsson.robert@vetlanda.mail.telia.com
Hemsida: http://w1.383.telia.com/~u38302477
Sidan uppdaterades senast:
© Copyright 1999