Nya funktioner i HTML 4.0

Med HTML 4.0 har det tillkommit en hel del nya funktioner för tabelller. Nu kan man ange tabellhuvud och tabellfötter. Man kan även gruppera rader och kolumner.

Justering

Nya funktioner för justering av cellinnehåll har tillkommit.

Baseline HTML 4.0

Attributet VALIGN har fått det nya värdet "Baseline". Om man skriver: <TR VALIGN=>"Baseline", vilket gör att alla celler på samma rad som VALIGN-attributet skrivs på, får sin text justerad, så att första textraden i alla celler kommer att ligga på samma höjd.

Justify, Char och Charoff HTML 4.0

Attributet ALIGN har fått tre nya värden Justify, Char och Charoff.
Om man skriver: <TR ALIGN=>"Justify" kommer innehållet i cellerna att marginaljusteras, med rak höger- och vänstermarginal.

"Char" gör att cellinnehållet justeras runt ett visst tecken, t.ex komma eller punkt. Man kan med detta attribut göra tabeller med decimaltal där cellerna justeras så att alla decimalkomman kommer under varandra även om talen har olika många decimaler. För att välja vilket tecken cellen ska justeras runt använder man attributet Char om ALIGN="Char". För att ange avståndet eller förskjutningen i cellen, till det tecken texten ska justeras efter.
Ett exempel för att illustrera detta:

<TABLE>
<CAPTION>Char och Charoff</CAPTION>
<COL ALIGN="Char" CHAR="," CHAROFF="5">
 <TR>
  <TD>456.067,89</TD>
 </TR>
 <TR>
  <TD>345,01</TD>
 </TR>
 <TR>
  <TD>7.987.325,87</TD>
 </TR>
 <TR>
  <TD>34.908,23</TD>
 </TR>
 <TR>
  <TD>45,65</TD>
 </TR>
</TABLE>

Om det inte fungerar i din webbläsare, vilket det inte gjorde i min Internet Explorer 4.01, kommer innehållet i cellerna inte att centreras runt ","-tecknet, vilket du i så fall ser i vänstra tabellen. För att illustrera hur det är tänkt att se ut har jag fått fuska lite vilket du ser till höger.

Char och Charoff
456.067,89
345,01
7.987.325,87
34.908,23
45,65

Char och Charoff
456.067,89
345,01
7.987.325,87
34.908,23
45,65

<THEAD>,<TFOOT> och <TBODY> HTML 4.0

För att märka ut delar av tabeller har det tillkommit tre nya märken. Med <THEAD>, kan man skapa ett tabellhuvud, <TFOOT>, märker ut en tabellfot och <TBODY>, är själva kroppen i tabellen där man skriver in tabelltexten. I märkerna kan man ha med så många rader man vill. Märkena gör att man kan gruppera raderna i en tabell i olika sektioner. Tanken är att raderna i tabellhuvudet och tabellfoten ska innehålla rubriker eller sammanfattningar av tabelllens innehåll och att tabellkroppen innehåller tabellens data.

Det är särskilt användbart om man har långa tabeller och vill att besökaren skall få en bättre överblick över tabelllens innehåll. Webbläsaren skriver ut tabellhuvudet högst upp. Tabellfoten skrivs ut längst ner på sidorna och tabellens innehåll fylls i utrymmet däremellan. Viktigt att tänka på är att tabellfoten måste stå före tabellkroppen. Anledningen är att då kan webbläsaren visa eller skriva ut början tabellen innan hela tabellen kommit fram.

Exempel på <THEAD>,<TFOOT> och <TBODY>:

<TABLE BORDER WIDTH="60%">
<CAPTION>THEAD, TFOOT OCH TBODY</CAPTION>
<THEAD>
 <TR>
  <TH COLSPAN=2>Här skriver man in tabellhuvudets text, som blir första
      raden i tabellen.</TH>
 </TR>
 <TR>
  <TD COLSPAN=2>Det går att använda flera rader och kolumner om man
      vill. När man använder THEAD måste det komma före TFOOT, som i
      sin tur måste komma före TBODY.</TD>
 </TR>
</THEAD>
<TFOOT>
 <TR>
  <TD COLSPAN=2Efter tabellhuvudet skriver man in tabellfoten, som
      blir den sista raden i tabellen></TD>
 </TR>
</TFOOT>
<TBODY>
 <TR>
  <TD>Här skrivs tabellens data in som vanligt.</TD>
  <TD>Detta är första raden och andra tabellcellen.</TD>
 </TR>
 <TR>
  <TD>Det här är andra raden och tredje tabellcellen.</TD>
  <TD>Viktigt att tänla på är att man använder sig av rätt antal rader
      och kolumner</TD>
 </TR>
</TBODY>
</TABLE>

THEAD, TFOOT OCH TBODY
Här skriver man in tabellhuvudets text, som blir första raden i tabellen.
Det går att använda flera rader och kolumner om man vill. När man använder THEAD måste det komma före TFOOT, som i sin tur måste komma före TBODY.
Efter tabellhuvudet skriver man in tabellfoten, som blir den sista raden i tabellen
Här skrivs tabellens data in som vanligt.	Detta är första raden och andra tabellcellen.
Det här är andra raden och tredje tabellcellen.	Viktigt att tänla på är att man använder sig av rätt antal rader och kolumner

<COLGROUP> och <COL> HTML 4.0

I HTML-4.0 kan man utforma enskilda kolumner i tabeller. I en vanlig tabell är kolumnerna grupperade som en enda grupp, numera kan man också gruppera de enskilda kolumnerna i en tabell. Detta gör det möjligt att ge vissa kolumner ett visst utseende. Om man exempelvis vill markera en kolumn från andra kolumner, kan man ge den en fetare ram. Själva tabellinnehållet anger man som tidigare rad för rad, men man kan lägga till information om kolumnerna i början av tabellen.

För att utforma en kolumn använder man märket <COL>. Detta märke kan ha de vanliga attributen för justering ALIGN, VALIGN, CHAR och CHAROFF. <COL> kan också ha attributen WIDTH, för att ange hur bred kolumnen ska vara och SPAN, vilket man använder för att utforma flera kolumner med ett märke. Märket kan inte ha något innehåll, och man får inte ange något slutmärke. Det går att ha flera märken av typen <COL> i en tabell. De utformar då kolumner från vänster till höger i tabellen.

Exempel på <COL>:

<TABLE BORDER>
<CAPTION>Medlemslista</CAPTION>
<COL WIDTH=50>
<COL WIDTH=100 SPAN=2>
<THEAD>
 <TR>
  <TH>Nr</TH>
  <TH>Förnamn</TH>
  <TH>Efternamn</TH>
 </TR>
</THEAD>
<TBODY>
  <TR>
   <TD>1</TD>
   <TD>Robert</TD>
   <TD>Karlsson</TD>
  </TR>
  <TR>
   <TD>2</TD>
   <TD>Dan</TD>
   <TD>Ivarsson</TD>
  </TR>
  <TR>
   <TD>3</TD>
   <TD>Magnus</TD>
   <TD>Sköld</TD>
  </TR>
  <TR>
   <TD>4</TD>
   <TD>Ronnie</TD>
   <TD>Karlsson</TD>
  </TR>
</TBODY>
</TABLE>

Den första kolumnen blir 50 bildpunkter bred. De två följande kolumnerna blir 100 pixlar breda. Tabellen ser ut på följande sätt:

Medlemslista
Nr	Förnamn	Efternamn
1	Robert	Karlsson
2	Dan	Ivarsson
3	Magnus	Sköld
4	Ronnie	Karlsson

Med de nya märkena för tabelldelar <THEAD>,<TFOOT> och <TBODY>, kan man även gruppera rader. Tabellens huvud, fot och kropp är tre olika radgupper. Om man delar in tabellen i flera kroppar kan man få fler grupper - varje <TBODY> ger en ny radgrupp.

För kolumner finns det ingen motsvarighet till dessa märken. Det finns däremot ett annat märke, <COLGROUP>, som kan användas för att gruppera kolumner. Märket kan ha samma attribut som <COL>, och innehålla kolumnmärken. <COLGROUP> måste ha avslutningsmärket </COLGROUP>. Efter </COLGROUP> skriver man in datan i de olika cellerna precis som vanligt. Om man exempelvis vill ha en tabell som innehåller 15 kolumner, som man vill ska se likadana ut och vara lika breda skriver man:

<TABLE>
 <COLGROUP SPAN="15" WIDTH="30">
 </COLGROUP>
  <TR>
   <TD>Kolumn 1</TD>
   <TD>Kolumn 2</TD>
   <TD>o.s.v</TD>
  </TR>
</TABLE>

Detta ger 15 lika breda kolumner, tack vare attributet SPAN. Fördelen med detta är att man slipper definiera varje kolumn för sig. Alla kolumner som hamnar innanför <COLGROUP> och </COLGROUP> ärver de värden man angett i elementet.
Om man istället vill ha en kolumn med en annan bredd i mitten, måste man skriva 3 stycken <COL>/kommandon. Man skriver då:

<TABLE>
 <COLGROUP>
 <COL SPAN="10" WIDTH="30">
 <COL WIDTH="50">
 <COL SPAN="4" WIDTH="30">
 </COLGROUP>
  <TR>
   <TD>Kolumn 1</TD>
   <TD>Kolumn 2</TD>
   <TD>o.s.v</TD>
  </TR>
</TABLE>

Varje kolumn definieras för sig när man använder <COL>. Alla kolumner inom SPANS räckvid ärver det första <COL>/elementets egenskaper. Efter det följer en kolumn med egen bredd vilket bestäms av det andra <COL>/elementet. I det tredje <COL>/elementet fortsätter man med den gamla bredden igen och använder SPAN för det antal kolumner som är kvar.
Om man anger kolumnernas utseenden med <COL>, skall man inte ange någon information om SPAN och WIDTH i <COLGROUP>

Nya attribut till <TABLE>

Detta märke har fått fyra nya attribut. Dessa är SUMMARY, BGCOLOR, FRAME och RULES.

SUMMARY HTML 4.0

Detta attribut skall man använda för att ge en sammanfattning av tabellens innehåll, det är tänkt att fungera som ett komplement till tabellens rubrik. Texten är intressant för synskadade med talande webbläsare, som kan få en uppfattning av vad tabellen innehåller, innan den läses upp.

Exempel på SUMMARY:

<TABLE SUMMARY="Denna tabell innehåller statistik över
invånarantalet i olika kommuner">

FRAME HTML 4.0

Detta attribut används för att bestämma vilka ramar tabellen ska ha. Attributet kan ha följande värden:

VOID

Tabellen ska inte ha någon ram alls
Skriv:
<TABLE FRAME=VOID>

BORDER

Tabellen ska ha ram på alla sidor
Skriv:
<TABLE FRAME=BORDER>

BOX

Samma sak som BORDER - ram runt hela tabellen
Skriv:
<TABLE FRAME=BOX>

VSIDES

Ram på vänster och höger sida om tabellen (vertikala sidorna)
Skriv:
<TABLE FRAME=VSIDES>

HSIDES

Ram ovanför och under tabellen (horisontella sidorna)
Skriv:
<TABLE FRAME=HSIDES>

ABOVE

Ram endast ovanför tabellen
Skriv:
<TABLE FRAME=ABOVE>

BELOW

Ram endast under tabellen
Skriv:
<TABLE FRAME=BELOW>

RHS

Ram endast på höger sida om tabellen
Skriv:
<TABLE FRAME=RHS>

LHS

Ram endast på vänster sida om tabellen
Skriv:
<TABLE FRAME=LHS>

RULES HTML 4.0

Detta attribut bestämmer vilka linjer som ska ritas ut mellan celller, för att markera rader, kolumner eller grupper av rader eller kolumner. Attributet kan ha följande värden:

NONE

Tabellen ska inte ha några inre linjer alls
Skriv:
<TABLE RULES=NONE>

A B C D

E F G H

I J K L

ALL

Rita linjer runt alla celler i tabellen
Skriv:
<TABLE RULES=ALL>

A B C D

E F G H

I J K L

ROWS

Ritar endast linjer mellan raderna i tabellen
Skriv:
<TABLE RULES=ROWS>

A B C D

E F G H

I J K L

COLS

Ritar endast linjer mellan kolumnerna i tabellen
Skriv:
<TABLE RULES=COLS>

A B C D

E F G H

I J K L

GROUPS

Ritar endast linjer mellan rad- och kolumngrupper
Skriv:
<TABLE RULES=GROUPS>

A B C D

E F G H

I J K L

Genom att kombinera FRAME och RULES kan man få ramar och linjer nästan precis där man vill.

Nya attribut till <CAPTION> HTML 4.0

Man kan numera även ange att rubriken ska stå till vänster om <ALIGN=LEFT> eller till höger om <ALIGN=RIGHT> tabellen.

Exempel:

CAPTION ALIGN=LEFT
För att få rubriken att hamna till vänster om tabellen skriver man: `<CAPTION ALIGN=LEFT>Rubiktext</CAPTION>`

CAPTION ALIGN=RIGHT
För att få rubriken att hamna till höger om tabellen skriver man: `<CAPTION ALIGN=RIGHT>Rubiktext</CAPTION>`

Nya attribut till <TR> HTML 4.0

Det enda attributet som tillkommit är BGCOLOR, vilket gör att man ge en viss tabellrad en egen bakgrundsfärg.

Nya attribut till <TH> och <TD> HTML 4.0

Dessa märken har också bland annat fått attributet BGCOLOR, vilket gör att man kan ge enskilda celler en viss bakgrunsfärg.
Fler attribut som tillkommit är ABBR, SCOPE, HEADERS, ID och AXIS. Attributen är så pass nya att de flesta moderna webbläsare ännu inte förstår dem.

Attributet ABBR HTML 4.0

Attributet ABBR använder man för att ange en förkortning av innehållet i cellen. Webbläsare med talsyntes kan läsa upp det förkortade värdet i stället för det långa om de måste läsa upp en cells innehåll många gånger (till exempel för rubrikceller). Om det är trångt i en tabell kan en vanlig webbläsare också välja att visa detta värde i stället för cellens innehåll.

Attributet SCOPE HTML 4.0

Attributet SCOPE använder man för att ange vilka dataceller som rubriken gäller för. Attributet skrivs in i rubrikcellen <TH>
Attributet kan ha följande värden:

ROW	Rubriken gäller för cellraden den står i
COL	Rubriken gäller för kolumnen cellen står i
ROWGROUP	Rubriken gäller för alla celler i radgruppen den står i
COLGROUP	Rubriken gäller för alla celler i dess kolumngrupp

Attributet HEADERS HTML 4.0

Attributet HEADERS kan man använda för att ange vilka rubrikceller som är relevanta för just den rubrikcellen. Detta attribut är främst bra för talande webbläsare. För att använda HEADERS behöver man känna till attributet ID.

Attributet ID HTML 4.0

Attributet ID använder man för att ge rubrikceller olika identitet. Värdet på ID ska vara en textsträng med ett unikt "namn" på cellen, det får inte finnas två rubrikceller med samma ID. I dataceller ger man sedan attributet HEADERS ett värde som består av alla relevanta rubrikcelllers ID.

Exempel på HEADERS och ID:

<TABLE BORDER>
<CAPTION>Medlemslista</CAPTION>
<COL WIDTH=50>
<COL WIDTH=100 SPAN=2>
 <THEAD>
 <TR>
  <TH ID="N1">Nr</TH>
  <TH ID="F2">Förnamn</TH>
  <TH ID="E3">Efternamn</TH>
 </TR>
 </THEAD>
 <TBODY>
  <TR>
   <TD HEADERS="N1">1</TD>
   <TD HEADERS="F2">Robert</TD>
   <TD HEADERS="E3">Karlsson</TD>
  </TR>
  <TR>
   <TD HEADERS="N1">2</TD>
   <TD HEADERS="F2">Dan</TD>
   <TD>Ivarsson</TD>
  </TR>
  <TR>
   <TD HEADERS="N1">3</TD>
   <TD HEADERS="F2">Magnus</TD>
   <TD>Sköld</TD>
  </TR>
  <TR>
   <TD HEADERS="N1">4</TD>
   <TD HEADERS="F2">Ronnie</TD>
   <TD HEADERS="E3">Karlsson</TD>
  </TR>
 </TBODY>
</TABLE>

Detta ger:

Medlemslista
Nr	Förnamn	Efternamn
1	Robert	Karlsson
2	Dan	Ivarsson
3	Magnus	Sköld
4	Ronnie	Karlsson

Attributet AXIS HTML 4.0

Attributet AXIS kan man använda för att etablera olika kategorier av celler som sedan kan användas för att analysera tabellens innehåll. Användarna ska kunna använda kategorierna för att kunna söka efter eller sammanställa information.

Exempel på en snygg tabell med attribut i HTML 4.0

Här nedan följer en tabell för att illustrera hur man kan använda de olika nya attributen i HTML 4.0.

**Kostnader för resan**
	Mat	Hotell	Transporter	Utflykter	Totalkostnad
Totalt	251	840	192	500	1783
Mexico City
27 Apr-99	52	280	83		415
28 Apr-99	123	280	64	240	627
29 Apr-99	76	280	260	45	661

Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.