HTML Referensbok
HTML © Eva von Pepel
* [ HTML-referensbok ] * [ Referensböcker ] *
Introduktion, TABLE, CAPTION, TR, TH/TD, COL, COLGROUP, THEAD, TFOOT, TBODY, Exempel
Markeras: <TH></TH> - starttagg obligatorisk, sluttagg valfri
<TD></TD> - starttagg obligatorisk, sluttagg valfri
Får innehålla: blockelement, inlineelement
Får finnas i: TR
TH (table heading) skapar rubrikceller medan TD (table data) skapar "vanliga" dataceller. Du skriver alla data mellan start- och sluttaggarna för de två elementen. Det spelar ingen roll <TR> följs av <TH> eller <TD> om på en specifik rad men en och bara en elementtyp måste följa. Du kan inte ha både <TH> och <TD> på samma rad. Antingen det ena eller det andra.
Du kan ha ett obegränsat antal element TH (eller TD) på en rad men tänk på att ju fler kolumner/celler som används desto längre blir raden. Om en rad är för lång måste man skrolla efter den och det gör inte någon användare speciellt glad.
<TH> använder du när du vill rubricera kolumner. Rubriker kan förekomma på en valfri rad och inte bara den första.Texten som skrivs här visas normalt i fet stil och centrerad.
<TD> använder du för vanliga data. Reglerna är desamma som för <TH> men texten är vänsterställd och visas i normal stil. Förutom vanlig text kan både TH och TD innehålla andra element, t ex stycken, listor, bilder och även andra tabeller. Sådana tabeller kallas för nästlagda tabeller.
En tom cell, dvs en cell utan något innehåll, ramas inte in och kan dessutom kollapsa. HTML 3.2 tillåter inga tomma celler. HTML 4.0 däremot gör det. Om du av någon anledning inte vill ha data i en av cellerna måste du (HTML 3.2) eller bör (HTML 4.0) fylla den med något som skapar någon form av innehåll men ändå är osynligt, t ex
<TD> </TD> (non breaking space)
<TD> </TD> (samma som ovan)
Många använder en tom kolumn för att skapa en vänstermarginal, t ex:
<TABLE>
<TR><TD WIDTH=100> </TD><TD>cellens/tabellens innehåll</TD></TR>
</TABLE>
Då fasta mått bör undvikas och HTML 3.2 inte tillåter procentsatsen samtidigt som www-klienter kan "fuska" med cellernas bredd använd följande konstruktion istället:
<TABLE WIDTH="90%" ALIGN=RIGHT> ... </TABLE>
Om du vill ändra fonter i cellerna måste du ändra fonter i varje cell. Det är otillåtet att ha en tabell inuti elementet FONT (T), STRONG eller andra inlineelement. HTML är ett logiskt språk och oftast är det lätt att intuitivt gissa om ett element får innehålla ett annat. Det är uppenbart att en tabell innehåller fonter (bokstäver) däremot är det omöjligt för en font (bokstav/tecken) att innehålla en tabell.
| Fel: | Rätt: |
|---|---|
<STRONG>
|
<TABLE>
|
Du kan även använda elementet BASEFONT (T) om du vill ändra dokumentets fonter. BASEFONT tar tre attribut: SIZE, COLOR och FACE. OBS! HTML 3.2 ger endast stöd för SIZE. Elementet saknar sluttag och skrivs direkt efter BODY om det ska gäller i hela dokumentet, t ex:
<BODY><BASEFONT SIZE="-1"> ... </BODY>
Elementet BASEFONT ska ändra fonter i hela dokumentet inklusive tabeller. Tyvärr gör inte alla www-klienter det. De ändrar fonterna i hela dokumentet förutom just i tabellerna. Om du vill ändra fonter i cellerna ska du därför använda elementet FONT som beskrivs ovan eller använda stilmallar som gör hela proceduren mycket enklare. Observera att elementen FONT och BASEFONT endast är tillåtet i HTML 3.2 och 4.0 Transitional. Vill du ändra fonter i HTML 4.0 skall du använda stilmallar.
Att formatera varje tabellcell med s.k. stilistiska element som FONT eller STRONG kan vara tidskrävande. Därför är stilmallar den absolut bästa metoden att "stajla" tabellceller med.
Skapa en fil och namnge den, t ex stil.css. I filen skriver du:
TD {font-weight: bold}
om du vill visa cellernas innehåll i fetstil, eller t ex:
TD {font: bold 80% Arial; color: white; background: black}
om du vill visa cellernas innehåll enligt följande 1) fetstil, 2) fontstorlek lika med 80% av föräldraelements fontstorlek, 3) typsnitt Arial, 4) vita bokstäver på 5) svart bakgrund.
Nu kommer varje förekomst av elementet TD att visas enligt den deklarerade stilen.
P.g.a. buggar i Netscapes implementering av tabeller ärver inte cellerna färälderelementet och därför bör du deklarera den önskade stilen det berörda elementet och inte TABLE.
Länka filen med dina HTML-dokument - filen kan länkas med ett obegränsat antal dokument med hjälp av elementet LINK.
<HEAD>
<TITLE>Dokumentets titel</TITLE>
<LINK REL=STYLESHEET HREF="stil.css" TYPE="text/css">
</HEAD>
Stilmallen kan även bäddas in i själva dokumentet. I sådana fall gäller stilen bara det dokument i vilket den bäddas.
<HEAD>
<TITLE>Dokumentets titel</TITLE>
<STYLE>
<!--
TD {font: bold 80% Arial; color: white; background: black}
-->
</STYLE>
</HEAD>
OBS! Stilinformationen skrivs som en kommentar för att dölja den i de www-klienter som inte stödjer stilmallar.
Stilinformationen kan även skrivas direkt i taggen:
<TABLE STYLE="font: bold 80% Arial; color: white; background: black">
| HTML 4.0 | HTML 4.0 Transitional | HTML 3.2 |
|---|---|---|
%attrs; ABBR=%Text AXIS=Cdata ALIGN=left|center| right|justify|char CHAR=tecken CHAROFF=%Length VALIGN=top|middle| bottom|baseline HEADERS=IDREFS SCOPE=row|col| rowgroup|colgroup ROWSPAN=Number COLSPAN=number |
Samma som i HTML 4.0 plus NOWRAP=nowrap BGCOLOR=%Color WIDTH=%Pixels HEIGHT=%Pixels |
ALIGN=left| center|right VALIGN=top| middle|bottom WIDTH=pixlar HEIGHT=pixlar ROWSPAN=Number COLSPAN=Number NOWRAP=nowrap |
Beskrivs i HTML 4.0 - Attribut
Horisontell placering av cellens innehåll
Med detta attribut kan du placera individuella cellers innehåll horisontellt. Vill du ha samma placering i varje cell som finns på den aktuella raden använder du detta attribut tillsammans med TR. Om du har redan tilldelat TR attributet ALIGN kan du överskrida dess värde med det värde som du anger i TD/TH. Tillåtna värden är:
Tillåtna värden är:
HTML 3.2 - LEFT | CENTER | RIGHT
HTML 4.0 - LEFT | CENTER | RIGHT | JUSTIFY | CHAR
Om attributet inte specificeras gäller standardvärden som är CENTER för TH och LEFT (vänster) för TD. Om attributet tilldelas både TR och TH/TD kommer det som specificeras i TH/TD att överskrida det som är specificerat i TR. Om TR men inte TH specificeras kommer TRs attribut att överskrida THs standardvärde.
<TR ALIGN=CENTER><TD>...
TD centreras<TR><TH>...
TH centreras (standardvärde)<TR><TD>...
TD vänsterplaceras (standardvärde)<TR ALIGN=CENTER><TD ALIGN=RIGHT>...
TD högerplaceras<TR ALIGN=LEFT><TH>...
TH högerplaceras<TH ALIGN=char> eller <TH ALIGN=char>
placerar cellens innehåll vid det tecken som specificeras i attributet CHARPlaceringens offset
CHAR används om celler innehåller data som ska placeras enligt ett visst schema, till exempel om cellerna innehåller decimaler. Tecknet som uppges som attributets värde fungerar som axel för placeringen. Det kan vara en punkt som används i engelska språket eller ett komma som används i det svenska språket. Standard-värdet beror på det språk som specificerades genom attributet LANG. Om LANG är specificerat och standardvärde ska användas behöver du inte tilldela attributet CHAR något värde.
><TH align="char" char=".">
CHAROFF specificerar offset av det första placeringstecknet. "OFF" i CHAROFF står för offset och inte "av". Riktning kan specificeras genom attributet DIR. Om DIR saknas gäller textens nuvarande riktning. Standardvärdet är från vänster till höger (DIR=ltr), dvs offset beräknas från den vänstra marginalen. CHAROFF="20%" (kan även uppges i pixlar) placerar tecknet 20% från cellens början.
Vertikal placering av cellens innehåll
Med detta attribut kan du placera hela cellens innehåll vertikalt. Vill du ha samma placering i alla celler som finns på den aktuella raden använder du detta attribut tillsammans med TR. Om du har redan tilldelat TR attributet VALIGN kan du överskrida dess värde med det värde som du anger i TD/TH.
Tillåtna värden är:
HTML 3.2 - TOP | MIDDLE | BOTTOM
HTML 4.0 - TOP | MIDDLE | BOTTOM | BASELINE
Om attributet är frånvarande kommer cellens innehåll att placeras i mitten av cellerna, dvs enligt standarden MIDDLE.
<TH VALIGN=baseline> eller <TH VALIGN=baseline> placerar cellens innehåll på den gemensamma baslinjen.
Vertikal spännvidd av celler
Med detta attribut kan du spänna celler vertikalt. Den berörda cellen spänns x antal efterföljande celler (rader). Till exempel:
<TD ROWSPAN=4> kommer att uppta 4 rader
<TD ROWSPAN=0> ger en spännvidd som börjar från den aktuella raden och slutar vid tabellens sista rad
Om attributet är frånvarande kommer raden att uppta en cell då standardvärdet är 1. ROWSPAN tar även relativa värden - integer.
Horisontell spännvidd av celler
Med detta attribut kan du spänna celler horisontellt. Den berörda cellen spänns x antal efterföljande celler (kolumner). Till exempel:
<TD COLSPAN=2> kommer att uppta 2 kolumner.
<TD COLSPAN=0> ger en spänvidd som börjar från den aktuella kolumnen och slutar vid tabellens sista kolumn.
Om attributet är frånvarande kommer kolumnen att uppta en cell då standardvärdet är 1. COLSPAN tar även relativa värden - integer.
Den specifika cellens rubrikinformation
Detta attribut tillåter icke visuella www-klienter att presentera rubrikinformation som tillhör en viss datacell. Attributet specificerar en lista på rubrikceller (TH) som tillhör en befintlig datacell (TD). Värdet är en lista som innehåller cellernas namn. Cellerna namnges med hjälp av attributet ID. Namnen i listan åtskiljs av ett mellanslag. Kan användas tillsammans med attributet SCOPE (se exempel nedan)
Specificerar cellen som tillhör en viss rubrikinformation (HEADERS)
Bör användas endast om rubrikinformationen är tillgänglig (HEADERS). Attributet specificerar cellen för vilken rubrikinformation (HEADERS) är tillgänglig och tillåter på så sätt icke visuella www-klienter presentera rubrikinformationen som tillhör en viss grupp av dataceller. Tillåtna värden är:
Förkortning (abbreviation)
Bör användas endast om rubrikinformationen är tillgänglig (attributet HEADERS). Attributet ger en förkortad version av cellens innehåll. Denna korta version kan användas av visuella www-klienter om det inte finns tillräckligt med utrymme. Icke visuella www-klienter kan däremot förse cellen med förkortad rubrikinformationen innan cellerna tolkas.
<TH abbr="NAMN">Deltagarnas namn</TH>
Axel
Bör användas endast om rubrikinformationen är tillgänglig (attributet HEADERS). Attributet tillåter en uppdelning av cellers innehåll i olika kategorier och på så sätt ge dels en mer detaljerad förklaring dels låta användaren extrahera endast den information han/hon vill. Det är upp till författaren hur informationen kategoriseras. En och samma cell kan tillhöra olika kategorier då attributets värde är en lista med namn på kategorier. Namn separeras med ett komma.
<TD axis="land, Norden, Europa">Sverige</TD>
Cellens bakgrundsfärg. Nedskrivet attribut.
Om attributet saknas är cellens bakgrundsfärg transparent, dvs den bakgrundsfärg (eller bakgrundsbild) som tilldelades dokumentet kommer att skina igenom. Attributet är nedskrivet till förmån för CSS. Färgen i TH/TD överskrider den uppgivna i TR och/eller TABLE.
Cellens bredd. Nedskrivet attribut
Cellernas bredd i likhet med tabellens bredd anpassar sig till innehållet. Om en tabell till exempel har tre kolumner kan var och en ha annorlunda bredd beroende på innehållet. Med attributet WITDH kan du specificera cellernas bredd exklusive fyllnad.
Värdet uppges i pixlar som är ett fast mått. Därför bör du undvika detta attribut om du vill behålla tabellens portabilitet, dvs dess förmåga att anpassa sig till plattformen, t ex skärmstorleken och upplösningen.
Några www-klienter accepterar även procentsatsen (OBS! Ogiltigt värde.) Procentsatsen relaterar då till tabellen och inte till skärmen. <TD WIDTH="20%"> kommer att uppta 20 % av tabellens bredd.
Du kan alltid vara säker på att cellen kommer att ha den specificerade bredden. Några www-klienter ger support åt pixlar, andra åt procentsatsen och vissa ger ingen support alls. Om bredden av någon anledning är "livsviktig" måste du använda dig av olika tricks, t ex ha en bild i en av cellerna med den önskade bredden eller "mäta avståndet" med elementet PRE. Normalt infogar <PRE> </PRE> vertikalt avstånd, men om elementet finns i en tabellcell kommer det mellanrum som elementet innehåller renderas horisontellt. OBS! Den möjlighet finns inte längre i Internet Explorer 4.0 då den tolkar PRE vertikalt även om elementet förekommer i en tabellcell. Elementet PRE eller IMG garanterar minimal bredd. Maximal bredd anpassas till tabellens innehåll.
<TABLE> <TR> <TD><PRE> </PRE></TD> <TD>data</TD></TR> <TR> <TD>data</TD><TD>data</TD></TR> </TABLE>
Cellens höjd. Nedskrivet attribut.
Med detta attribut kan du specificera cellens höjd exklusive fyllnad. Värdet uppges i pixlar men några www-klienter accepterar även procentsatsen. En höjd på 80% (HEIGHT="80%") kommer att uppta 80% av skärmen och inte 80% av tabellen.
Boole-, nedskrivet attribut.
Då cellernas bredd anpassar sig till innehållet kan en textrad automatisk brytas var som helst. Attributet används om en radbrytning ska undvikas.
Markering:
<TABLE BORDER>
<TR><TH>Länder</TH><TH>Städer</TH></TR>
<TR><TD ROWSPAN=2 VALIGN=TOP>Sverige</TD>
<TD>Stockholm</TD></TR>
<TR><TD>Göteborg</TD></TR>
</TABLE>
Tolkning:
| Länder | Städer |
|---|---|
| Sverige | Stockholm |
| Göteborg |
Markering:
<TABLE BORDER>
<TR><TH>Länder</TH><TH>Städer</TH></TR>
<TR><TD ROWSPAN=3>Sverige</TD> <TD>Stockholm</TD></TR>
<TR><TD>Göteborg</TD></TR>
<TR><TD>Malmö</TD></TR>
</TABLE>
Tolkning:
| Länder | Städer |
|---|---|
| Sverige | Stockholm |
| Göteborg | |
| Malmö |
Markering:
<TABLE BORDER>
<TR><TH>Städer</TH><TH>Länder</TH></TR>
<TR><TD>Stockholm</TD><TD ROWSPAN=3>Sverige</TD></TR>
<TR><TD>Göteborg</TD></TR>
<TR><TD>Malmö</TD></TR>
<TR><TD>London</TD><TD ROWSPAN=3>England</TD></TR>
<TR><TD>Liverpool</TD></TR>
<TR><TD>Bristol</TD></TR>
</TABLE>
Tolkning:
| Städer | Länder |
|---|---|
| Stockholm | Sverige |
| Göteborg | |
| Malmö | |
| London | England |
| Liverpool | |
| Bristol |
Markering:
<TABLE BORDER>
<TR><TH>Länder</TH><TH>Städer</TH></TR>
<TR><TD>Sverige</TD><TD>Stockholm</TD></TR>
<TR><TD COLSPAN=2 ALIGN=CENTER>Brasil</TD></TR>
</TABLE>
Tolkning:
| Länder | Städer |
|---|---|
| Sverige | Stockholm |
| Brasil | |
Dessa två attribut tillåter en bättre tolkning av cellernas innehåll i icke visuella www-klienter, dvs kopplar ihop dataceller med tillhörande rubriker. Om du vill sammankoppla en datacell med en viss rubrik namnger du rubriken med hjälp av attributet ID och kopplar senare det ID-namnet med cellens attribut HEADER:
<TABLE SUMMARY=" Denna tabell listar världens länder och deras huvudstäder sorterade i bokstavsordning"> <CAPTION>Länder och deras huvudstäder</CAPTION> <TR> <TH ID=namn1>Länder</TH> <TH ID=namn2>Städer</TH> <TR> <TD HEADERS=namn1>Sverige</TD> <TD HEADERS=namn2>Stockholm</TD> <TR> <TD HEADERS=namn1>England</TD> <TD HEADERS=namn2>London</TD> </TABLE>
Sverige och England (HEADERS=namn1) är sammankopplade med Länder (ID=namn1) medan Stockholm och London (HEADERS=namn2) är sammankopplade med Städer (ID=namn2).
Samma resultat kan åstadkommas med attributet SCOPE. Värdet COL sammankopplar alla celler i den aktuella kolumnen med dess rubrik:
<TABLE SUMMARY=" Denna tabell listar världens länder och deras huvudstäder sorterade i bokstavsordning"> <CAPTION>Länder och deras huvudstäder</CAPTION> <TR> <TH SCOPE=col>Länder</TH> <TH SCOPE=col>Städer</TH> </TR> <TR><TD>Sverige</TD><TD>Stockholm</TD></TR> <TR><TD>England</TD><TD>London</TD></TR> </TABLE>
| Markering: | Tolkning: | ..och inte: | eller: |
|---|---|---|---|
| <TD NOWRAP>Hej alla barn | Hej alla barn | Hej alla barn | Hej alla bar n |
Varje TH och TD kan innehålla en annan tabell. Den nästlagda tabellen kommer då att ha samma bredd som cellen den befinner sig i. Den nästlagda tabellen kan innehålla en annan tabell osv. I exemplet nedan står T för tabell, R för rad och C för cell.
Markering:
<TABLE BORDER><TR><TD>T1-R1-C1</TD>
<TD><TABLE BORDER>
<TR><TD>ABC</TD><TD>DEF</TD></TR>
<TR><TD>GHI</TD><TD>JKL</TD></TR>
</TABLE>
</TD>
<TD>T1-R1-C3</TD></TR>
</TABLE>
Tolkning:
| T1-R1-C1 |
| T1-R1-C3 |
| T1-R1-C1 |
| T1-R1-C3 |
| T1-R1-C1 |
| T1-R1-C3 |
Markering:
<TABLE BORDER>
<TR><TD><TABLE BORDER>
<TR><TD>A</TD><TD>B</TD></TR>
<TR><TD>C</TD><TD>D</TD></TR>
</TABLE>
</TD>
<TD>T1-R1-C2</TD></TR>
<TR><TD>T1-R2-C1</TD><TD>T1-R2-C2</TD></TR>
</TABLE>
Tolkning:
| T1-R1-C2 | ||||
| T1-R2-C1 | T1-R2-C2 |
Markering:
<TABLE BORDER>
<TR><TD ALIGN=center COLSPAN=2><TABLE BORDER>
<TR><TD>A</TD><TD>B</TD></TR>
<TR><TD>C</TD><TD>D</TD></TR>
</TABLE>
</TD></TR>
<TR><TD>T1-R2-C1</TD><TD>T1-R2-C2</TD></TR>
</TABLE>
Tolkning:
| |||||
| T1-R2-C1 | T1-R2-C2 | ||||
CSS-formatering bygger på box-formatering. En box är det område som ett enstaka element upptar. En HTML 4.0-tabell är uppbyggd av 6 olika boxar - lager. Varje lager kan formateras för sig själv. Lagren är uppbyggda enligt följande:
I cellerna kan andra boxar/lager finnas, till exempel stycken eller andra tabeller. Varje element kan ha sin egen stil. Stilmöjligheterna är oändliga och begränsas bara av din egen fantasi.
TD {background: red; color: white; border: double white}Varje tabellcell kommer att visas mot röd bakgrund och med vitt typsnitt samt ramas in av en dubbel vit ram
.namn1 {background: red; color: white; border: double white}samma som ovan men stilen är tilldelad en klass och inte alla TD-element. Det betyder att du kan tilldela valfritt element denna stil - vid behov. Om du vill tilldela denna stil enstaka TD-element skriver du det i elementets starttag:
<TD CLASS=namn1> detta TD-element kommer att tilldelas den specificerade stilen medan andra TD-element kan tilldelas en annan stil
.namn2 {border-left: double white; border-right: solid red}element med denna klass kommer att ha en dubbel vit vänsterram och en enkel röd högerram
TABLE {background: navy}
TD {background: red; border: solid white}
i denna tabell kommer mellanrummet mellan cellerna (CELLSPACING) att vara mörkblått, cellerna vita och ramen vit
TD {height: 100px; width: 100px}alla celler i denna tabell kommer att vara 100 pixlar bred och 100 pixlar höga
TH {font: bold italic 12pt Arial}alla rubriker i denna tabell kommer att visas med typsnitt: Arial, fet, kursiv, 12 punkter
TD {background: black}
TD, P {background: red}
varje tabellcell visas mot svart bakgrund. Om cellerna innehåller stycken kommer att dessa visas mot röd bakgrund
COL och COLGROUP - kolumner och kolumngrupper Nästa
http://vonpepel.com/ref/ - Senaste uppdatering 10 september 1998