apasje.COM Startside og startportal for Tromsø

Legg i Favoritter  |  Bytt Startside

 

HTML Programmering, del 5 av 7

Tabeller

Bruk av tabeller gjør det mulig å plassere innhold på en side i bestemte seksjoner, struktur og plasseringsmessig korrekt i forhold til hverandre.

Tabeller kan holde på plass alle designmessige deler en side består av, slik som tekst, bilder og annen layout. Ved enkle websider kan det være svært hensiktsmessig å bruke tabell oppsett til all layout, så lenge man ikke behersker CSS!

Dette er en tabell, og kan ha definert bredde og høyde, synlige eller usynlige kant-linjer, definert tykkelse samt farge og luftighet inni.

Tabellen kan også ha mindre seksjoner innlemmet, og kalles da celler. Det er ved bruk av disse at tabellen virkelig kommer til sin rett. Innenfor de satte målene i selve tabellen, kan cellene ha ulik størrelse.

Alt her er en tabell, hvor denne teksten er i en celle!
Dette er en liten celle!	Dette er en stor celle, og har en annen bakgrunnsfarge en tabellen!
	Du kan justere tekst og/eller bilder inni tabellen eller cellen!	I denne er et bakgr.bilde, og kan skrives over

Du kan bruke så mange tabeller du vil på en side, og du kan ha tabeller inni en annen tabell, men ved utstrakt bruk får du også en mer tunglastet side. Hver tabell skal dessuten spesifiseres med en ID for å skille tabellene fra hverandre.

Strukturen og oppbyggingen i en tabell kan ligne på et web dokument, som forklart i forrige del. Den består av tre innholdselementer, med start og slutt!

1. Hele tabellen begynner med <table>, og vil med utforming også innbefatte et attributt.
2. For å skille cellene skrives elementet <tr>.
3. For hver celle som skrives til, brukes <td>. Hver celle kan ha sin egen form, og kan derfor også inneholde egne attributter.

Vi lager en tabell, med 4 celler innlemmet. Bredde og høyde på tabellen er uvesentlig, siden vi kun skal bruke cellene til opplysning av tall! Vi setter derfor celle bredde <td> til 50, som blir 50 punkter.

Vi vil ha tabellen synlig, så linjer settes til 1 punkt. Om ingenting er spesifisert (attributt) settes farge automatisk til windows verdi. Luftigheten inne i cellen er heller ikke satt, så tallene blir kloss opp i linjene;

1	2
3

På grunn av at vi heller ikke har satt noe annet attributt noen plasser, vil den som forhåndssatt bli venstrejustert. Tabellen har da denne HTML koden:

Vi oppsummerer:

• Elementet <table> inneholder attributtet border="1" og en ID.
• Elementet <tr> setter to kolonner og to celler i hver.
• Elementet <td> inneholder attributtet width="50", og har et tall skrevet til i tre celler, samt en tom celle.

Vår eksempel side, igjen!

Da var litt tabellisering unnagjort, og vi kan gå tilbake til den lille web eksempel siden vår som vi skulle forbedre utseende til ved bruk av tabeller.

Vi har fra før satt inn et bilde, en tekst/overskrift, linker og en vannrett linje. Disse er ikke plassert i noen bestemt form designmessig, simpelthen fordi vi kun har brukt rene tagger, foruten det lille STYLE attributtet i img og p tagg!

På forhånd er det greit å vite hvordan du har tenkt å sette opp en webside. Her er det bare å bruke ark og blyant og starte med skissering.

Den tenkte siden skal ha innhold sentrert på siden. Innhold skal ikke være bredere enn 468 piksler bredt, likt bildet. Altså skal vi benytte en tabell som er 468 piksler bred.

For å skape luft i tabellen, setter vi celleutfyllingen til 2 piksler. Attributtet her er padding="2" For å skape oversikt på siden, skal tabellen ha tre kolonner, som hver skal inneholde linkene, tekst/bilde og en sidemarg til reklame (i kolonne 3)!

kolonne 1

kolonne 2

kolonne 3

Plasseringsmessig er det lettere også å ha flere rader i en tabell. Har jo en ide om hvordan dette skal være, så 5 rader skal være i tabellen.

Rad/kolonne 1	kolonne 2	kolonne 3
Rad 2
Rad 3
Rad 4
Rad 5

Innenfor rammen på 468 piksler tabellbredde, settes kolonnecellene til henholdsvis 73 piksler i første, 254 i midten og 133 for cellene i kolonne 3.

Da blir tabellen omtrentlig slik:

(Omtrentlig fordi dette er en litt forminsket versjon.) Du ser at kantlinjene vises, og det skal de ikke gjøre i det ferdige eksemplet. Heller ikke skal alle cellene ha lik størrelse, fordi bildet krever for eksempel hele tabell bredden, og den vannrette linjen skal bare bruke ca 4/5 deler av bredden.

Vi korrigerer litt, og da blir det slik:

Tiltenkt plass bilde
Tom celle 1
Meny	Innhold/tekst + Reklame	Reklame
Tom 2	Vannrett linje
Tom 3	Bunntekst	Copyright

Vi kan også titte litt på hvordan koden blir:

Ved å bygge tabellen slik, blir vi presentert for en ny attributt; colspan="3", i de tomme cellene som er større en den originale cellen.

Denne betyr bare at cellen ikke har andre verdier en selve grunntabellen, og at delingen er utelatt og slått sammen til en enhet. I dette tilfelle er tre kolonne celler sammenslått.

I en tabell eller celle kan innholdet som du også vet justeres til høyre, venstre eller midtjusteres ved bruk av align=" x " attributtet. (x = right, left eller center). Vi har sentrert hele tabellen.

Verdt å merke seg er at det også finnes justerings muligheter i høyden! Attributtet blir da valign=" x ", der x kan erstattes med top (øverst), middle (midt på) eller bottom (bunn).

Pause

Uufff! Tungt å lese? Og forstå...kanskje? Rolig, bare rolig! Dette er ting du skjønner bedre etter litt grundigere studier. Det kommer etter hvert..

Husk! Går du for fort gjennom ting og tang som er viktige, blir selve forståelsen av hvordan ting henger sammen borte!

Skal ikke mase, men dess mer som leses grundig og prøves ut i praksis, større er sjansene for å lære. Det betyr at det ikke er nok å se på bare en læreside om et emne, man må gjerne finne et halvt dusin!

Men uansett, vi begynner å nærme oss slutten. Det som gjenstår er å fylle inn en tekst på siden, lime inn linkene og sette inn den reklamen som er annonsert! La oss gå til neste del.

 

---