|
|
|
|
|
|
|
|
Tillbaka till HTML-guiden
Layout med hjälp av tabeller |
|
|
|
Med hjälp av tabeller kan man
faktiskt göra väldigt snygga hemsidor den här sidan visar hur
det kan se ut och här ska jag också förklara hur man går till
väga. Har man lärt sig lite om tabeller så är det faktiskt inte
så svårt som det kan se ut. Eftesom det är enkelt att kopiera
de delar som ska ha samma utformning, behöver det heller inte
ta så lång tid som man tror. Nåväl nog om det, är du beredd? Då
sätter vi igång!
|
|
|
|
Stommen till sidan |
|
|
|
Allra högst upp på sidan har
jag lagt in en tabell som täcker 100% av bildskärmens bredd.
Tabellen består endast av en rad med tre dataceller. Den vänstra
datacellen, där gifanimationen RK finns, har en bredd på 100 punkter.
Den högra datacellen, där gifbilden på älgen finns, har likaså en bredd
på 100 punkter. Datacellen i mitten, där texten Roberts hemsida står,
tar upp resten av bildskärmens bredd. HTML-koden för tabellen är:
<TABLE BORDER=0 CELLPADDING=6 CELLSPACING=0 WIDTH="100%"
BGCOLOR=FFFFFF>
<TR>
<TD BGCOLOR=0099FF ALIGN=CENTER WIDTH="100">
<IMG SRC="rk.gif"></TD>
<TD BGCOLOR=0099FF ALIGN=CENTER WIDTH="*">
<FONT FACE="arial" COLOR="FFFFFF" SIZE=+5>
<B><I>Roberts Hemsida</I></B></FONT></TD>
<TD BGCOLOR=0099FF ALIGN=CENTER WIDTH="100">
<IMG SRC="moose.gif"></TD>
</TR>
</TABLE>
I tabellen anges också BORDER=0, det bilr inga ramar runt tabellen,
CELLPADDING=6, vilket gör att innehållet i cellerna hamnar 6 punkter
ifrån cellernas ramar, CELLSPACING=0, gör att det inte blir några
mellanrum mellan cellerna. Cellerna får bakgrundsfärgen BGCOLOR=0099FF,
som är blå och som jag tillsammans med vitt använder som färger för
tabellen. Texten i mittersta cellen får färgen vitt.
|
|
|
|
Den nedre tabellen med tre kolumner |
|
|
|
Det som hamnar under den översta tabellen är en tabell bestående
av en rad med tre dataceller som delar upp resten av sidan i tre
kolumner. I dessa dataceller finns det ytterligare tabeller, vilket gör
att vi får en s.k nästlad tabell.Hela tabellen har en bredd på 100%
av bildskärmen. Den vänstra datacellen har en bredd på 100 punkter.
Högra datacellen har en bredd på 115 punkter och den mittersta fyller
ut resten av utrymmet. HTML-koden och själva sturkturen av tabellen
lyder som följande:
<TABLE WIDTH="100%" BGCOLOR=FFFFFF>
<TR>
<TD WIDTH="100" VALIGN=TOP>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2 WIDTH="100">
</TABLE>
</TD>
<TD WIDTH="*" VALIGN=TOP>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="*">
</TABLE>
</TD>
<TD WIDTH="115" VALIGN=TOP>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="115">
</TABLE>
</TD>
</TR>
</TABLE>
|
|
|
|
Vänstra kolumnen med knapparna |
|
|
|
Vänstra kolumnen med knapparna
med länkar till olika sidor skapar man på följande sätt.
<TD WIDTH="100" VALIGN=TOP>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2 WIDTH="100">
<TR>
<TD HEIGHT="4"></TD>
</TR>
<TR>
<TD>
<A HREF="start.htm"><TABLE BORDER=4 CELLPADDING=2
BGCOLOR=":0099FF": WIDTH="100">
<TR>
<TD ALIGN=CENTER>
<FONT FACE="arial" COLOR="#FFFFFF" SIZE=5>
<B>Start</B></FONT></TD>
</TR>
</TABLE></A>
</TD>
</TR>
<TR>
<TD HEIGHT="4"></TD>
</TR>
<TR>
<TD>
<A HREF="resor.htm"><TABLE BORDER=4 CELLPADDING=2
BGCOLOR=":0099FF": WIDTH="100">
<TR>
<TD BGCOLOR=":0099FF": ALIGN=CENTER>
<FONT FACE="arial" SIZE=5>
<B>Resor</B></FONT></TD>
</TR>
</TABLE></A>
</TD>
</TR>
... o.s.v.
</TABLE>
</TD>
Datacellen, eller kolumnen, får en bredd på 100 punkter. Med
VALIGN=TOP bestämmer man att innehållet i datacellen ska hamna
längst upp, istället för att det som i vanligt fall centreras. I
datacellen skapar jag en tabell som har fler tabeller i sig, s.k
nästlad tabell.CELLSPACING=0 gör att cellerna hamnar intill
varandra och tabellramen. Varje tabell får en blå bakgrundsfärg och
genom att ge BORDER värdet 3, får man en tredimesionell ram runt
tabellen så att den ser ut som en knapp. Varje tabell består endast av
en tabellrad och en enda datacell. CELLSPACING=2 gör att
innehållet i cellerna hamnar 2 punkter ifrån cellramen. För att skapa
lite utrymme i vertikal led mellan knapparna lägger jag in en tom
datacell som är 4 punkter hög. Själva tabellerna ,som är länkar till
andra sidor, ger jag typsnittet Arial, med storleken 5 och med vit färg.
Innehållet centeras i dom med ALIGN=CENTER.
Man kan givetvis om man vill lägga in knappar i form av gifbilder i
tabellcellen, kolumnen, istället för att lägga in en tabell för varje
länk.
|
|
|
|
Högra kolumnen med länkar m.m |
|
|
|
Den högra kolumnen får en
bredd på 115 punkter. Den här datacellen innehåller också en nästlad
tabell där tabellerna placeras under varandra. Så här ser
HTML-koden ut:
<TD WIDTH="115" VALIGN=TOP>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="115">
<TR>
<TD HEIGHT="20"></TD>
</TR>
<TR>
<TD>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="115">
<TR>
<TH BGCOLOR=":0099FF": COLSPAN=3>
<FONT FACE="arial" COLOR="#FFFFFF" SIZE=3>
Nyheter;</FONT></TH>
</TR>
<TR>
<TD BGCOLOR=":0099FF": WIDTH="4"</TD>
<TD BGCOLOR=":FFFFFF": WIDTH="4"</TD>
<TD><FONT FACE="times">Här kan man till exempel
skriva in vilka dom senaste uppdateringarna man
har gjort på sin hemsida.</FONT></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD HEIGHT="20"></TD>
</TR>
<TR>
<TD>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="115">
<TR>
<TH BGCOLOR=":0099FF": COLSPAN=3>
<FONT FACE="arial" COLOR="#FFFFFF" SIZE=3>
Länkar;</FONT></TH>
</TR>
<TR>
<TD BGCOLOR=":0099FF": WIDTH="4"</TD>
<TD BGCOLOR=":FFFFFF": WIDTH="4"</TD>
<TD><FONT FACE="times">
<A HREF=http"://www.altavista.com/":
TARGET=":_top":>Altavista</A><BR>
<A HREF=http"://www.yahoo.com/":
TARGET=":_top":>Yahoo</A><BR>
<A HREF=http"://www.lycos.com/":
TARGET=":_top":>Lycos</A><BR>
<A HREF=http"://infoseek.go.com/":
TARGET=":_top":>Infoseek</A><BR>
<A HREF=http"://www.excite.com/":
TARGET=":_top":>Excite</A><BR>
<A HREF=http"://www.hotbot.com/":
TARGET=":_top":>HotBot</A><BR>
<A HREF=http"://www.looksmart.com/":
TARGET=":_top":>Looksmart</A><BR>
</FONT></TD>
</TR>
</TABLE>
</TD>
</TR>
... o.s.v.
</TABLE>
</TD>
Tabellen i själva kolumnen får också bredden WIDTH="115".
Varje tabell som i sin tur ingår i denna tabell får också bredden
WIDTH="115". Allra högst upp lägger jag en tom tabellrad
med höjden HEIGHT="20". Detta gör att man får ett tomrum
mellan den översta tabellen och första tabellen i kolumnen. Därefter
lägger man in den första tabellen, i den nästlade tabellen. Först lägger
man in en tabellrad som innehåller en rubrikcell, <TH>.
Cellen får den blåa bakgrundsfärgen, BGCOLOR=":0099FF":, och
sträcker sig över tre kolumner med hjälp av COLSPAN=3. Anledningen
till detta är att den undre tabellraden kommer att innehålla tre
dataceller som rubrikcellen måste sträcka sig över. Texten i
rubrikcellen får teckensnittet Arial, med storleken 3 och vit
tecken färg. Under rubrikcellen finns det som sagt en tabellrad med
tre dataceller. Den första har bredden, WIDTH="4", och blå
bakgrundsfärg. Den gör att tabellen får en blå rand till vänster. Nästa
cell har också bredden, WIDTH="4", men har en vit
bakgrundsfärg. Denna cell skapar ett tomrum mellan den blåa randen och
själva texten. Nästa cell har ingen bestämd bredd, utan fyller upp
resten av tabellens bredd. Här skriver man in själva texten. Genom att
efter första tabellen, lägga in en tom tabellrad med höjden
HEIGHT="20", skapar man ett tomrum till nästa tabell.
|
|
|
|
Den mittersta kolumnen med brödtexten |
|
|
|
I den mittersta kolumnen
där själva texten på sidan ingår består av en egen datacell. I
datacellen består av endast en tabell, för att kontrollera innehållet,
HTML-koden för den ser ut på följande sätt:
<TD WIDTH="*" VALIGN=TOP>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD BGCOLOR=0099FF WIDTH="3"></TD>
<TD BGCOLOR=FFFFFF WIDTH="4"></TD>
<TD BGCOLOR=FFFFFF WIDTH="*" HEIGHT="10"></TD>
<TD BGCOLOR=FFFFFF WIDTH="3"></TD>
</TR>
<TR>
<TD BGCOLOR=0099FF WIDTH="3"></TD>
<TD BGCOLOR=FFFFFF WIDTH="4"></TD>
<TD BGCOLOR=FFFFFF WIDTH="*">
<H1>Layout med hjälp av tabeller</H1></TD>
<TD BGCOLOR=FFFFFF WIDTH="3"></TD>
</TR>
<TR>
<TD BGCOLOR=0099FF WIDTH="3"></TD>
<TD BGCOLOR=FFFFFF WIDTH="4"></TD>
<TD BGCOLOR=FFFFFF WIDTH="*">Med hjälp av
tabeller kan man faktiskt göra väldigt snygga
hemsidor den här sidan visar hur det kan se ut
och här ska jag också förklara hur man går till
väga.<BR>
</TD>
<TD BGCOLOR=FFFFFF WIDTH="3"></TD>
<TR>
<TD BGCOLOR=0099FF WIDTH="3"></TD>
<TD BGCOLOR=0099FF WIDTH="4"></TD>
<TH BGCOLOR=0099FF WIDTH="*" ALIGN=LEFT>
<FONT FACE="arial" COLOR="#FFFFFF" SIZE=3>
 Stommen till sidan</FONT></TH>
<TD BGCOLOR=FFFFFF WIDTH="3"></TD>
</TR>
<TR>
<TD BGCOLOR=0099FF WIDTH="3"></TD>
<TD BGCOLOR=FFFFFF WIDTH="4"></TD>
<TD BGCOLOR=FFFFFF WIDTH="*"> <BR>Allra högst
upp på sidan har jag lagt in en tabell
som täcker 100% av bildskärmens bredd.
</TD>
<TD BGCOLOR=FFFFFF WIDTH="3"></TD>
</TR>
... o.s.v.
</TABLE>
</TD>
Den här kolumnen fyller ut utrymmet som blir kvar mellan den vänstra
och högra kolumnen. Själva datacellen som utgör kolumnen får därför
bredden WIDTH="*". I datacellen finns det som sagt en
tabell, där innehållet står. Tabellen delas sedan upp i fyra dataceller.
Den längst till vänster får en bredden WIDTH="3" och den
blåa färgen. Cellen får samma utssende i varje tabellrad vilket gör att
vi får en blå rand uppifrån och ned på sidan. Nästa datacell får
bredden WIDTH="4". Syftet med denna datacell är att
åstadkomma ett tomrum mellan den blåa randen och själva texten, för att
texten inte ska hamna alldeles intill randen. Cellen har antingen vit
eller blå färg, varför kommer jag till lite senare. Nästa cell har
bredden WIDTH="*", vilket gör att den upptar resten av
utrymmet. I den här cellen skriver man in själva texten, och den har
antingen vit eller blå färg. Textcellen upptar faktiskt inte resten av
utrymmet, för allra längst till höger har jag lagt in ytterligare en cell.
Denna cell har bredden WIDTH="3" och gör att man får ett
litet tomrum mellan textkolumnen och den högra kolumnen. Cellen har
hela tiden vit färg.
Först lägger jag in en tabellrad som har en höjd av 10 punkter. Denna
rad skapar ett tomrum mellan den översta tabellen och texten i kolumnen.
under denna lägger jag in en tabellrad där jag skriver in själva
rubriken för sidan. Under denna kommer tabellraden där första
textavsnittet står. Efter denna lägger jag in ytterligare tabellrad.
Här byter cellen med bredden WIDTH="4", och cellen med
textinnehållet, bakgundsfärg från vitt till blått. Då får man en
tabellrad som får en blå botten, som går horisontellt över textkolumnen.
Här använder jag mej av teckensnittet Arial med teckenstorleken 3 och
teckenfärgen vitt. Detta gör att man får en snygg rubrikcell. Genom att
lägga in ett fast mellanslag med hjälp av teckenkoden  
får man texten i rubrikcellen att hamna lite mer till höger än den
vanliga texten.
Efter detta fortsätter man med nästa tabellrad som ska innehålla nästa
textavsnitt. Allra först, i datacell där man skriver in texten, skriver
man in ett fast mellanslag,  , följt av en radbrytning,
<BR>. Detta gör att man får ett tomrum mellan rubrikcellen och
den underliggande texten. Samma sak kan åstadkommas med hjälp av en
tom tabellrad, med specifierad höjd.
Tillbaka till HTML-guiden
|
|
|
| Nyheter |
|
|
Här kan man till exempel
skriva in vilka dom senaste uppdateringarna man har gjort
på sin hemsida. |
|
|
|
|
|
|
|
|
