10. Tables

Tables kan vara grymmt praktiska saker.

Nu när du vet lite grann om mer elemtära saker som textformatering o.s.v. vill du säkert lära dig hur man ställer upp texten på ett mer kontrollerat sätt.

Det gör du förslagsvis med en table.

not: Den här sektionen kommer säkert bli ganska stor, skriv till mig med vad du vill veta, så tar jag nog med det. Det känns jobbigt att fundera ut alla upptänkliga exempel själv.

Låt oss direkt ge oss i kast med att skapa en enkel table.

På sina ställen i det här avsnittet kommer jag förresten introducera nya växlar utan att förklara dem. Tycker du att de behöver en förklaring så får du säga till, annars tror jag de är ganska självklara.

<TABLE WIDTH=200 BORDER=2>
        <TR>
                <TD>Cell #1</TD>
                <TD>Cell #2</TD>
        </TR>
        <TR>
                <TD>Cell #3</TD>
                <TD>Cell #4</TD>
        </TR>
</TABLE>

ger resultatet:

Cell #1	Cell #2
Cell #3	Cell #4

Taggarna som alltid är inblandade i en table är alltså TABLE, TR och TD. Det finns andra, men vi väntar med dem.

TABLE skapar tabellen. TR påbörjar en ny rad och TD påbörjar en ny cell på raden. Låter det rörigt? Det klarnar...

Kolla på koden där uppe.
Först skapar vi en tabell. Nästa rad skapar första raden med sin TR. Därefter kommer två celler (TD = Table Data), sedan avslutas första raden. Därefter skapas andra raden, två celler till, andra raden avslutas, och tabellen avslutas.

Det är varken nödvändigt att indentera koden likt ovan, eller att avsluta alla taggarna. Det är bara TABLE-taggen som egentligen måste avslutas, men det är i mest korkat att göra på något annat sätt.
Netscape har en speciell vana att tjura på buggig tabell-kod, och jag tjurar på oläslig kod som inte är indenterad osv. Du gör det mycket lättare för dig själv när du bygger sidan om du åtminstone ser till att koden som hanterar tabellerna är prydligt skriven.

Vi drar raskt vidare.
Självklart går det göra mer än bara raka tabeller. Tabellen ovan kan du expandera åt alla håll, men låt oss säga att vi vill lägga till en cell till höger, som liksom ska spänna över båda raderna. Så här blir det då:

<TABLE WIDTH=200 BORDER=2>
        <TR>
                <TD>Cell #1</TD>
                <TD>Cell #2</TD>
                <TD ROWSPAN=2>Cell #3</TD>
        </TR>
        <TR>
                <TD>Cell #4</TD>
                <TD>Cell #5</TD>
        </TR>
</TABLE>

Ger resultatet:

Cell #1	Cell #2	Cell #3
Cell #4	Cell #5	Cell #3

Inte helt oförståeligt eller?
Notera numreringen av cellerna och hur de hamnat. Rad två har bara två celler, men Cell #3 fyller ut även rad två med sin ROWSPAN. Vi ställer till det ännu lite mer, följ med i de här cellerna om du kan.

<TABLE WIDTH=200 BORDER=2>
        <TR>
                <TD>Cell #1</TD>
                <TD>Cell #2</TD>
                <TD ROWSPAN=2>Cell #3</TD>
        </TR>
        <TR>
                <TD ROWSPAN=2>Cell #4</TD>
                <TD>Cell #5</TD>
        </TR>
        <TR>
                <TD COLSPAN=2>Cell #6</TD>
        </TR>
</TABLE>

Ger resultatet:

Cell #1	Cell #2	Cell #3
Cell #4	Cell #5
	Cell #6

För att förstå den koden gäller det bara att tänka på att browsern tar första bästa lediga plats och fyller den med nästa cell, från vänster till höger, uppifrån och ned.
Som för Cell #6, Cell #4 har redan fyllt första kolumnen i den raden, då börjar Cell #6 först i den andra kolumnen.
Som du säkert noterat har jag nu alltså introducerat ROWSPAN och COLSPAN, rowspan spänner över flera rader, colspan spänner över flera kolumner.
Bara för skojs skull bygger vi på lite till, för att stilla dina outtalade frågor om hur det kan bli:

<TABLE WIDTH=200 BORDER=2>
        <TR>
                <TD>Cell #1</TD>
                <TD>Cell #2</TD>
                <TD ROWSPAN=2>Cell #3</TD>
                <TD>Cell #4</TD>
        </TR>
        <TR>
                <TD ROWSPAN=2>Cell #5</TD>
                <TD>Cell #6</TD>
                <TD ROWSPAN=2>Cell #7</TD>
        </TR>
        <TR>
                <TD COLSPAN=2>Cell #8</TD>
        </TR>
</TABLE>

Ger resultatet:

Cell #1	Cell #2	Cell #3	Cell #4
Cell #5	Cell #6		Cell #7
	Cell #8

Det är rörigare, men det går också att följa med i, bara man vänjer sig vid att tänka efter vilka positioner som är lediga.

Låt oss gå vidare.

Det är viktigt att man är noggrann med att man bygger sina tabeller korrekt. Det här är ett av de jobbigaste problemen, när tabeller inte fungerar som de ska. Troligen har man då tappat bort en cell, eller kanske glömt avsluta en annan. I vilket fall som helst så brukar browsern bli mycket förvirrad. Se till att du alltid fyller alla positionerna i en tabell på ett regelmässigt och prydligt sätt, det är grunden för att över huvud taget kunna kontrollera hur en tabell beter sig. Låt oss säga att vi råkar lägga till en COLSPAN=2 på fel ställe. Då får vi:

<TABLE WIDTH=200 BORDER=2>
        <TR>
                <TD>Cell #1</TD>
                <TD>Cell #2</TD>
                <TD ROWSPAN=2>Cell #3</TD>
                <TD COLSPAN=2>Cell #4</TD>
        </TR>
        <TR>
                <TD ROWSPAN=2>Cell #5</TD>
                <TD>Cell #6</TD>
                <TD ROWSPAN=2>Cell #7</TD>
        </TR>
        <TR>
                <TD COLSPAN=2>Cell #8</TD>
        </TR>
</TABLE>

Ger resultatet:

Cell #1	Cell #2	Cell #3	Cell #4
Cell #5	Cell #6		Cell #7
	Cell #8

Denna lilla felskrivning ger en konstig liten oönskad marginal, och dessutom kan felet vara mycket svårt att lokalisera, speciellt om det är fullt med text runtomkring. Så för allt i världen, lär dig hålla ordning i tabell-koden!. Det finns oräkneliga exempel på fel som kan dyka upp, och du kommer behöva lära dig känna igen allihop...

Låt oss nu pula ihop en vanlig användning av tabeller, ett litet bildgalleri. Vi gör det fel först...(och färgar cellerna blåa, så vi ser var det blir fel)

<TABLE BORDER=2>
        <TR>
                <TD BGCOLOR="#0000FF">
                        <IMG SRC="peng.gif" WIDTH=150 HEIGHT=150 ALT="Pingvin">
                </TD>
                <TD BGCOLOR="#0000FF">
                        <IMG SRC="peng1.gif" WIDTH=150 HEIGHT=150 ALT="Blå pingvin">
                </TD>
                <TD BGCOLOR="#0000FF">
                        <IMG SRC="peng2.gif" WIDTH=150 HEIGHT=150 ALT="Grön pingvin">
                </TD>
                <TD BGCOLOR="#0000FF">
                        <IMG SRC="peng3.gif" WIDTH=150 HEIGHT=150 ALT="Röd pingvin">
                </TD>
        </TR>
        <TR>
                <TD ALIGN=CENTER>
                        Frisk pingvin
                </TD>
                <TD ALIGN=CENTER>
                        Blå pingvin
                </TD>
                <TD ALIGN=CENTER>
                        Grön pingvin
                </TD>
                <TD ALIGN=CENTER>
                        Röd pingvin
                </TD>
        </TR>
</TABLE>

Ger resultatet:


Frisk pingvin	Blå pingvin	Grön pingvin	Röd pingvin

Åtminstone ifall du kör netscape ska det ha blivit fula blåa marginaler runt bilderna.
Inte alls snyggt ju...
Ok att vi kanske vill ha marginaler runt bilderna, men då ska de vara mer kontrollerade. Händer något sånt här i nästa avsnitt, då vi vill ha noggrann kontroll över hela sidors tabeller kan saker gå mycket fel.
Det finns två vägar att lösa det här. Den ena som verkar fungera är att starta och avsluta cellen på samma rad. Den andra är att infoga en radbrytning precis innan cellens slut. Jag visar båda, låt oss städa! Dessutom, ah, jag glömde, man måste ta bort tabellens automatiska marginaler, CELLPADDING=0:

<TABLE BORDER=2 CELLPADDING=0>
        <TR>
                <TD BGCOLOR="#0000FF"><IMG SRC="peng.gif" WIDTH=150 HEIGHT=150 ALT="Pingvin"></TD>
                <TD BGCOLOR="#0000FF"><IMG SRC="peng1.gif" WIDTH=150 HEIGHT=150 ALT="Blå pingvin"></TD>
                <TD BGCOLOR="#0000FF">
                        <IMG SRC="peng2.gif" WIDTH=150 HEIGHT=150 ALT="Grön
                        pingvin"><BR>
                </TD>
                <TD BGCOLOR="#0000FF">
                        <IMG SRC="peng3.gif" WIDTH=150 HEIGHT=150 ALT="Röd
                        pingvin"><BR>
                </TD>
        </TR>
        <TR>
                <TD ALIGN=CENTER>
                        Frisk pingvin
                </TD>
                <TD ALIGN=CENTER>
                        Blå pingvin
                </TD>
                <TD ALIGN=CENTER>
                        Grön pingvin
                </TD>
                <TD ALIGN=CENTER>
                        Röd pingvin
                </TD>
        </TR>
</TABLE>

Ger resultatet:


Frisk pingvin	Blå pingvin	Grön pingvin	Röd pingvin

Mycket bättre! Observera att bakgrundsfärgen fortfarande är blå, men nu har vi fått bort de oönskade marginalerna runt bilderna.

Låt oss gå vidare med växlarna CELLPADDING, CELLSPACING, BORDER, ALIGN och VALIGN.
Vi tar och minskar ned vår tabell lite, så kan vi åskådliggöra de olika där...

<TABLE BORDER=4 CELLPADDING=4 CELLSPACING=10>
        <TR>
                <TD BGCOLOR="#0000FF"><IMG SRC="peng.gif" WIDTH=150 HEIGHT=150 ALT="Pingvin"></TD>
                <TD BGCOLOR="#FFFF00"><IMG SRC="peng1.gif" WIDTH=150 HEIGHT=150 ALT="Blå pingvin"></TD>
        </TR>
        <TR>
                <TD VALIGN=BOTTOM ALIGN=RIGHT>
                        Frisk pingvin
                </TD>
                <TD WIDTH=150>
                        Blå pingvin, blåa pingviner är ganska ovanliga saker,
                        får du se en ska du nog vara lyckligt lottad...
                </TD>
        </TR>
</TABLE>

Ger resultatet:


Frisk pingvin	Blå pingvin, blåa pingviner är ganska ovanliga saker, får du se en ska du nog vara lyckligt lottad...

Observera att vi var tvungna att lägga till ett breddvärde i den stora textcellen, annars tar den den bredd den tycker sig behöva.

En förtydligande bild:

Alles klar? Du får testa dig fram nu...skriv ett mail om det är mycket som saknas.

Bakgrundsfärger går förutom i TD, även att sätta i TR och TABLE.

Då ger vi oss nu in på hur man ta sig runt diverse problem med tabeller.

Vad det gäller marginaler och sånt, så har jag förstått att man ska vara försiktig där. En HSPACE runt en IMG kan t.ex. ställa till saker, så att bilden bryter igenom kanten på tabellen. Överallt, där tabeller får det trångt och det ska vara marginaler till höger och vänster, försök sköta sakerna manuellt, att kanske göra en ny kolumn för att få marginaler, istället för att använda CELLPADDING.

Det går att använda bakgrundsbilder, likväl som färger i tabeller också. Netscape 4, Exporer 3 och uppåt stöder det vad jag vet. Se upp med bakgrundsbilder, då det kan bli konstiga effekter om du har bilder med i cellen. Mycket krångligt...har du en transparent gif så kommer inte bakgrundsbilden synas där bilden ska vara transparent, utan sidans bakgrund, ev. cellens bakgrundsfärg. Så, se upp med sånt, och försök hitta en kombination som fungerar om du måste använda det.

Du kanske kommer stöta på problem ifall du använder många COLSPAN. Browern kommer ta ett tiotal pixlar mer på bredden än den egentligen behöver för att skapa tabellen. Ibland går det att kontrollera genom att sätta ut WIDTH-växlar, men en smidig lösning är annars att skapa en slags "initierings-rad", om det är möjligt.
Det går till så, att man gör en separat TR, och där skapar en rad med celler, var och en med en bild i.
Bilden bör förslagsvis vara en 2x2 vit fyllnadsbild.
Bilderna sätts till t.ex. HEIGHT=2 och WIDTH till så bred som vi vill ha just den kolumnen. I varje TD peter vi in en WIDTH, så att cellen inte kan bli bredare än bilden.
Genom att göra en sån här rad, låser vi kolumnbredderna, och browsern slipper försöka krångla till det med alla COLSPANS. Initierings-raden skapas förslagsvis i början eller slutet på tabellen, och bör inte synas...

Det var allt jag hade att säga f.t., hör av er så fyller vi på sektionen.