|
Opgave 8: Layout for tabel
|
| Definer størrelse på tabellen |
Vi skal bruge tabeller til at strukturere layout'et af vores
websider. Tabellen skal derfor fylde hele skærmbilledet. Der er to måder at angive
tabellens størrelse på:
- den absolutte størrelse i antal pixel
- den relative størrelse i procent af hele skærmbilledet
De to metoder skal kort præsenteres her:
|
Absolut størrelse
Din aktuelle skærmopløsning er : pixels.
|
Du kan angive tabellens bredde og højde i
absolutte tal, altså antal pixels , f.eks width="800px" og height="600px".
Fordelen herved er at tabellens ( og dermed sidens) indhold altid vil have samme
dimensioner uanset at skærmopløsningen er større end f.eks 800*600
Se eksempel her med 800*600
Bemærk : at selvom din skræm er 800 pixels bred , vil du formentlig ikke kunne se
den yderste højre del af tabellen uden at skulle scrolle horisontalt, ligesom du heller
ikke vil have hele tabellens højde vist, da en del af skærmhøjden anvendes til
browserens menulinje og værktøjslinjer.
|
|
- Åbn din tabel fra opgave 7 (opgave_7.html)
- Gem nu opgaven som opgave_8.html
- Rediger tabellens størrelse ved i tabel-tag'et at indsætte absolut højde og bredde
på følgende måde :
<table Border=1 width="800px" height="600px">
- Gem igen din opgave_8 og check resultatet i browseren
- Forsøg evt. med andre bredde og højde værdier for at se hvordan det virker.
|
|
Relativ størrelse |
Du kan også vælge at angive tabellens størrelse som procent
af den maximale skærmbredde og skærmhøjde.
F.eks width="100%" og height="100%".
Tabellen vil her altid udfylde hele skærmbilledet. Det er ikke nødvendigvis pænt hvis
siden er designet på en skærm med en opløsning på 800*600 pixels og så vises på en
skærm med 1600*1200 pixels.
- Åbn opgave_8.html og indstil værdierne for bredde og højde til 100% på følgende
måde :
<table border=1 width="100%" height="100%"
- Gem filen igen - og check i browseren
Se eksempel her.
Om man anvender den ene eller anden metode, vil primært afhænge af designmæssige
overvejelser. Skal jeg anbefale noget her & nu, vil jeg nok tro at det er lettest for
dig at arbejde med de relative værdier. Dette har også den fordel at hele
siden vises selv om browser-vinduet er reduceret ... check selv.
|
| Definer bredde på kolonner |
Ved kun at definere størrelsen på hele tabellen , vil de
enkelte kolonners (eller cellers) bredde afhænge af hvor meget tekst / grafik der er
puttet ind i dem. Det dur ikke. Derfor skal vi nu definere størrelsen på de enkelte
kolonner/celler.
Vi behøver egentlig kun at angive celle bredden i den første række i tabellen - da de
følgende rækker vil nedarve bredde værdierne fra den øverste række.
Se eksempel her.
- Åbn opgave_8
- Indsæt relativ bredde værdier i den første rækkes <td> tags, idet du i det
første <td> tag skriver:
<td width="30%"> og i det næste tag
<td width="70%">
- gem opgaven og check resultat i browseren
|
| Definere højde på rækker |
Vores tabel indeholder tre rækker - defineret ved <tr> tag'et.
Vi kan indstille højden på de enkelte rækker - såvel relativt som absolut ,ved i de
enkelte række definitioner at definere værdien af 'height'. F.eks. <tr height="100px">
som giver en række højde på 100 pixels.
Eller relativt som <tr height="20%"> som
giver en række højde på 20% af skærmhøjden.
Rækkehøjden kan også defineres i cellerne sammen med bredden . F.eks. således:
<tr width="25%" height="100px">, hvor bredden er angivet som procent og højden i absolutte
pixels.
- Åbn opgave_8.html
- angiv højden af den første række til 100 pixels
- sæt højden af den sidste (tredje) række til 10%
- Gem din fil og check resultatet i browseren
Se eksempel her
Bemærk at højden på den 2. række i tabellen ikke defineres. Den tager simpelthen bare
resten af pladsen på skærmen.
|
| Vertikal justering |
Du har sikkert bemærket at dine tekster står
midt i
cellerne. Default værdien for den vertikale justering af cellerne er nemlig (desværre)
'middle'. Det er sjældent det man ønsker. Vi skal derfor ændre justeringen af tekstens
vertikale placering i cellerne.
Det gør vi ved i række definitionen <tr> at tilføje attributten 'valign=top' ,
hvor 'valign' står for vertical alignment.
- Åbn opgave_8.html, og
- indsæt i de tre række definitioner attributten valign="top", altså således at der i
første række definition nu står står
<tr height="100px" valign="top">
etc.
- Gem og check i browser.
Se eksempel
|
| Hva' er meningen ....? |
Ok - nu er det begyndt at ligne noget. Kan du se ideen ...?
Tabellen vi laver her skal bruges som en skabelon til vores web-sider.
Den første række skal anvendes til Overskrift- logo og evt navigationsmenu.
Den første kolonne er venstre margen
web-siden egentlige indhold skal indsætte i anden række anden celle
Den nederste række skal bruges til sidefod / bundtekst. |
| Baggrundsfarve |
Du kan definere baggrundsfarve for hele tabellen og/eller for
enkelte celler i tabellen, ved at indsætte koden 'bgcolor="xxxxxx"' i de
pågældende tags.
Eksempel :
<table bgcolor="beige"> giver hele tabellen
beige baggrund
<tr bgcolor="gray"> giver den pågældende række
grå baggrund.
<td bgcolor="black"> giver cellen sort baggrund
Se eksempel Bemærk kildekoden på
siden.
|
 |
Der er et par ting mere du skal
lære om tabeller - men først skal der noget indhold i din tabel . Det
ser vi på i næste opgave. Men måske det var tid til en kop kaffe... |
