| <<< Förra avsnittet | Innehåll | Nästa avsnitt >>> |
En tabell inleds med styrkoden <TABLE> och avslutas med </TABLE>. Tabellens innehåll är uppdelat på en eller flera rader och varje rad är uppdelad i ett eller flera datafält. Det första man gör efter <TABLE> är att börja en ny rad med <TR> (table row). Sen kommer det första datafältet, som anges med <TD> (table data). I datafältet skriver man sedan själva texten. Man fyller sedan på med så många datafält man vill ha på den första raden. Varje datafält inleds med <TD>. Nästa rad inleds med en ny <TR> o.s.v.
Vill man kan man byta en eller flera <TD>-koder mot <TH> (table header). Innehållet i en sådan cell kommer att centreras och visas i fetstil, vilket kan vara lämpligt för rubriken för en kolumn, eller liknande.
Styrkoderna <TR>, <TD> och <TH> kan avslutas med </TR>, </TD> respektive </TH>, men det är inte nödvändigt. Det är underförstått att förra raden är slut när man börjar på en ny.
Ett datafält i en tabell kan innehålla i stort sett vad som helst: text, bilder, länkar, listor etc. Undvik att låta ett datafält i en tabell innehålla en ny tabell. Det är tillåtet enligt HTML-specifikationen, men det är få webbläsare som kan hantera detta.
| Kod |
|---|
<TABLE BORDER="1"> <CAPTION ALIGN="TOP">Min arbetsvecka</CAPTION> <TR><TH>Måndag<TH>Tisdag <TH>Onsdag<TH>Torsdag <TH>Fredag <TR><TD>Läser posten<TD>Kurs <TD>Läser posten<TD>Jobbar <TD>Möte <TR><TD>Jobbar<TD>Kurs<TD>Möte <TD>Sen lunch<TD>Ledig </TABLE>
| Visas som |
|---|
| Måndag | Tisdag | Onsdag | Torsdag | Fredag |
|---|---|---|---|---|
| Läser posten | Kurs | Läser posten | Jobbar | Möte |
| Jobbar | Kurs | Möte | Sen lunch | Ledig |
Attributen VALIGN="TOP", VALIGN="MIDDLE" och VALIGN="BOTTOM" används för att bestämma den vertikala justeringen av cellernas innehåll. Det kan göras radvis genom att attributen anges till <TR> eller för en enstaka cell genom att attributen anges till <TD> eller <TH>. <TR VALIGN="BASELINE"> anger att innehållet i alla celler på raden skall centreras vid en gemensam baslinje.
Attributet NOWRAP kan anges till <TD> och <TH> och gör så att cellens innehåll inte radbryts av webbläsaren för att det ska få plats i cellen. Detta kan ge väldigt breda celler. Det rekommenderas att man istället använder style sheets för att åstadkomma detta.
För att få en cell att sträcka sig över flera kolumner i tabellen anger man COLSPAN="n" som attribut till <TD> eller <TH>. n är en siffra som anger antalet kolumner. <TD COLSPAN="2"> gör att datafältet sträcker sig över två kolumner.
För att få en cell att sträcka sig över flera rader i tabellen anger man ROWSPAN="n" som attribut till <TD> eller <TH>. n är en siffra som anger antalet rader. <TD ROWSPAN="2"> gör att datafältet sträcker sig över två rader.
Bredden för en specifik cell kan anges med <TD WIDTH="50">. Använd detta med försiktighet, för även om det ser bra ut på din skärm, så kan texten inne i cellerna brytas väldigt fult om användaren har en annan upplösning på sin skärm. WIDTH anges i pixlar (bildpunkter) och dessa är olika stora på olika skärmar. Denna kod stöds inte av alla webbläsare.
Attributet BGCOLOR="#00FF66" kan anges till <TD> och <TH> och styr bakgrundsfärgen för en enstaka cell. Se avsnittet om färger för en genomgång av färgkoderna. Det rekommenderas att man använder style sheets istället för BGCOLOR (se avsnittet om style sheets).
| <<< Förra avsnittet | Innehåll | Nästa avsnitt >>> |