:: HTML - Kodspråket #1 ::
:: Tables och Frames ::
Grundläggande om tabeller
När en större mängd data skall presenteras, till exempel ekonomi eller
en lista med olika sorters data, säg ett recept till exempel.
De flesta känner till programmet Excel, tabeller ritar upp ett liknande
system av rutor.
Se exemplet nedan:
Detta är koden för den ovanstående tabellen.
<table border="1" width="50%" height="50%">
<tr valign="top" width="50%">
<td bgcolor="#ffcc55">Ruta 1</td>
<td background="../bilder/yoshi.jpg">Ruta 2</td>
<td bgcolor="#44ff11">Ruta 3</td>
</tr>
</table>
Efter att studera denna kod en stund ser du att den har
en inledning och avslutning med taggen <table>.
Allt emellan denna tagg och dess sluttagg räknas som tabelldata,
och formateras därefter.
Efter taggen table ser vi en annan tagg, <tr>. Denna tagg
inleder en ny rad i tabellen, alltså en horisontal brytning.
Motsvarande ger taggen <td> en vertikal brytning.
Emellan tr- och td-taggen och deras respektive sluttaggar kan vanlig
text skrivas in.
Det finns många andra användningsområden för tabeller, till exempel kan
man (obs! rekommenderas dock inte ;) ) använda dem för att bygga en
hemsidelayout.
Prova att skriva en egen tabell, och experementera sedan vidare med nästling,
då man skriver "tabeller i tabeller".
Med detta kan man bygga mycket komplexa tabellstrukturer.
Frames
Tänk dig den första hemsidan som ett ark papper.
Om du skulle klippa det pappret i två eller flera delar, och sedan
lägga olika typer av information på de olika pappersbitarna, då
har du upplägget av frames.
En hemsida uppbyggd av frames är i grund och botten en mall, där andra
sidor med innehåll länkas in i den färdigställda ramen.
Ovanstående bild representerar index.html, sidan som (vanligtvis) öppnas
när en hemsida besöks.
De andra sidorna i bilden, navigation, sida1 och sida2, öppnas "innuti" index.html.
Vi ska nu gå igenom koden för att bygga en hemsida likt den i bilden ovan.
Här kan du se ett exempel på sidan ovan.
Nu till koden:
<frameset cols="15%, 85%">
<frame name="nav" src="navigation.html">
<frame name="main" src="sida1.html">
</frameset>
Ja, det är så enkelt!
Den första taggen, frameset, definerar hur sidans frames skall byggas upp,
i exemplet två kolumner (cols), en med 15% vidd och en med 85%.
Det går givetvis att nästla frames och göra mer invecklade strukturer, men tänk
på att frames inte används i stor utsträckning idag, de flesta föredrar att använda
Cascading Stylesheets, vilket är mer funktionellt och ger fler möjligheter.
En sorts frame är dock väl värd att nämna, det är Inline-frame, förkortat iframe.
Denna frame är en "ruta" där andra sidor öppnas, samma princip som frames egentligen.
Detta är faktiskt den sorts frame du läser i just nu!
Se ett exempel här.
Koden är rent otroligt lätt, i din index lägger du till:
<iframe name="iframe_namn" width="50%" height="50%" href="sökväg/filnamn.html" border="1"></iframe>
Nästa sida >>