Övningsuppgifter - Använda tabeller

Redan nu skall du bestämma bredden på dina tabeller - eftersom den i sin tur kommer att bestämma bredden på din hemsida.

Om du gör sidan för bred, kommer besökarna att få en rullningslist på bredden. Det gör sidan svårläst.

Statistiken från SDN:s webbplats visar att en överväldigande majoritet av alla surfare använder skärmupplösningarna 1024X768 (45%) eller 800X600 (43%). Lägre upplösning, 640X480, används av 3%.

Här har det skett en förändring under det senaste året. På hösten 1999 använde mer 70% upplösningen 800X600 och andelen med upplösningen 640X480 var mindre än 1%.. 

Eftersom du vill att så många besökare som möjligt skall kunna se din sida utan att få rullningslister på bredden. Om du inte har ett speciell "mål" för din hemsida, så att du redan från början vet att de allra flesta besökarna har en lägre upplösning, bör du utgår från upplösningen 800X600. 

Sidan får alltså inte bli mer än 800 pixlar bred, minus rullningslister på höjden och litet utrymme för själva webbläsarens ramar. Om sidan totalt inte är mer än 700 pixlar bred har du god marginal.

Två avsnitt längre fram skall du göra om din hemsida så att den får ramar. Ramsidor består av flera webbsidor som ligger intill varandra och visas samtidigt, och det finns många stora fördelar med att bygga upp webbsidan på det sättet.

Men varje ram kräver sitt utrymme. Räkna bort 150 pixlar på bredden för en vänsterram, och låt din tabell - som kommer att ligga i högerramen - hålla sig till 550 pixlars bredd.

Om jag vill ändra tabellbredd på SDN:s webbplats, måste jag göra det på nästan 700 webbsidor. Tabellens bredd finns nämligen inte angiven i stilmallen.

Du kommer troligen att göra många webbsidor. Du gör det enklare för dig om du redan nu direkt i stilmallen anger standardbredd för tabeller. Om du sedan vill variera tabellens egenskaper, kan du göra det direkt i HTML-koden. Det du skriver där "råder" över stilmallen, eftersom koden är hierarkisk.

För att få en tabell som är 550 pixlar bred, har 3 pixlars mellanrum mellan cellernas innehåll och cellgränserna samt inte visar några kantlinjer, skriver du in följande i stilmallen:

/* 550 pixlar bred tabell med padding 3 pixlar och utan kantlinje*/
TABLE {
border: 0px;
width: 550px;
padding: 3px;
}

Spara stilmallen

Öppna din indexfil - index.html - i textredigeraren.

Nu blir resten beroende av om du har lagt tabellegenskaperna i stilmallen eller inte. Om du har gjort det, utesluter du helt enkelt attributen WIDTH och PADDING nedan, men låt BORDER finnas kvar även om det attributet finns i stilmallen. Då blir det lättare att se vad tabellerna egentligen gör med hemsidan.

Alla förändringar du nu kommer att göra i indexfilen, skall göras mellan BODY-taggarna. Direkt efter den inledande BODY-taggen skriver du

<TABLE WIDTH="550" BORDER="1" CELLPADDING="3">
<TR>
<TD>

Alldeles före den avslutande BODY-taggen skriver du

</TD>
</TR>
</TABLE>

Spara indexfilen. Öppna hemsidan i webbläsaren för att kontrollera resultatet. Dra ut webbläsarfönstret så mycket det går på bredden, och använd de länkar du har till din andra sida för att växla mellan sidorna.

Du ser nu, att din förstasida ligger i en tabell medan den andra sidan dras ut på bredden när du ändrar storleken på webbläsarfönstret. 

Gå tillbaka till förstasidan och maka ihop webbläsarfönstret så att det blir smalare än tabellen. Du får då en rullningslist på bredden - du ser genast hur bökigt det blir att läsa en sida när man måste maka den fram och tillbaka med rullningslisten. Växla - fortfarande med samma bredd på webbläsarfönstret - över till din andra sida. Här försvinner troligen rullningslisten, eftersom texten anpassar sig efter webbläsarfönstrets bredd. Om sidan till exempel har en bild som är bredare än webbläsarfönstret, kommer rullningslisten att finnas kvar.

Öppna textredigeraren igen. Skriv nu in tabellkoden även i din andra sida och spara den.

Nu när du kan principerna för hur tabeller byggs upp, kan du leka litet med dem.

• Dela upp texten i spalter
• Ge enskilda celler egen bakgrundsfärg
• Lägg bilder i egna celler, så att du får dem precis där du vill ha dem
• Pröva olika bredder på BORDER
• Undersök hur CELLSPACING och CELLPADDING förändrar tabellens utseende
• Sätt BORDER="0" så att du ser hur sidan blir då
• Justera textens placering i olika celler, genom att använda attributet ALIGN="..."
• Flytta hela tabellen på bredden, genom attributet
• Ange värden för TOPMARGIN="..." och LEFTMARGIN="..." i den inledande BODY-taggen för att lägga tabellen exakt där du vill ha den på sidan.
  Exempel Koden nedan placerar tabellens övre vänstra hörn 100 pixlar in i webbläsarfönstret och 50 pixlar från överkanten.

<BODY TOPMARGIN="50" LEFTMARGIN="100">

• Ge tabellen en bakgrundsbild - du kan använda någon av de här bakgrundsbilderna om du vill. Koden för detta ser ut så här - ändra sökvägen till bilden så att den stämmer för den bild du använder.

<TABLE BACKGROUND="bilder/bakgrund.jpg">
<TR>
<TD>Innehållet i cellen</TD>
</TR>
</TABLE>

• Ge den enskilda cellen en bakgrundsbild, som i den här cellen. Visst är det fult! Koden är densamma som ovan, men du lägger den i TD-taggen i stället.

Jag har ändrat tabellerna i Haj i Hjälmaren så att texten ligger i spalter.

Gå gärna tillbaka till Använda tabeller och läs igenom avsnittet igen, innan du övergår till Kunskapstestet.

© SupportData.Net