Lage tabeller

Last ned vedlegget som heter Lage_tabeller.htm og lagre filen på din egen harddisk med. Åpne filen i Notisblokk og i browseren for å lese oppgaveteksten, og jobb i HTML-koden på de anviste stedene (istedenfor HTML-kommentarene) for å lage tabellene som beskrevet.

Etter hvert av skrittene skal du lagre filen og ta den opp i browseren for å se på hvordan tabellen vises. Du skal også gjenopprette browservinduet og endre vindusstørrelsen. Sjekk siden også i Netscape, Firefox og Opera inklusive eldre versjoner.

Noen browser viser ikke en tabell ikke hvis den inneholde tomme celler. Derfor setter man ofte en "non-breaking space" (koden  ) inn i "tomme" celler.

1. En enkel tabell

Nedenfor dette avsnitt lager du en enkel tabell med en rad og to celler, samt kantlinje rundt (border="1"). Skriv inn i cellene teksten "celle 1" og "celle 2".

2. Tabell med to rader og to kolonner

Nedenfor dette avsnitt lager du en tabell med to rader og to kolonner, samt kantlinje rundt (border="1"). Skriv inn i cellene teksten "celle 1", "celle 2", "celle 3" og "celle 4".

3. "Gummitabell"

• Kopier den første tabellen inn i steden for avsnittet nedenfor. 
• Skriv inn i celle 1: "Den mest ignorerte og beste vennen jeg har er meg selv." 
• Lagre filen og se i browseren hvordan tabellen oppfører seg - også etter du endrer vindusstørrelsen. 
• Skriv inn i celle 2: "Jeg lover fra nå av å være min egen beste venn." 
• Lagre filen og se i browseren hvordan tabellen oppfører seg - også etter du endrer vindusstørrelsen.

4. Tabell med bredde i pixel

• Kopier den tredje tabellen inn i steden for avsnittet nedenfor. 
• Gi hele tabellen en bredde på 500 pixel
• Lagre og se i browseren hvordan tabellen oppfører seg - også etter du endrer vindusstørrelsen.

5. Tabell med bredde i prosent

• Kopier den tredje tabellen inn i steden for avsnittet nedenfor.
• Gi hele tabellen en bredde på 90 prosent,
• Lagre og se i browseren hvordan tabellen oppfører seg - også etter du endrer vindusstørrelsen.

6. Slå sammen celler horisontalt (over flere kolonner)

Les om å "Slå sammen celler" i HTML-webben nederst til venstre. Overskriv avsnittet nedenfor med tabellen beskrevet på side 48 nederst til venstre.

7. Slå sammen celler vertikalt (i rader)

Les om å "Slå sammen celler" i HTML-webben nederst til høyre. Overskriv avsnittet nedenfor med tabellen beskrevet på side 48 nederst til høyre.

Hvordan lage tabell med COLSPAN og ROWSPAN

Ønsker du å ha mer forståelse for og øvelse i å lage tabeller med colspan og rowspan, kan du løse oppgaven "Slå sammen celler".

8. Sette farge på kantlinjen

• Kopier tabell nummer 2 og lim den inn i steden for avsnittet nedenfor.
• Gi tabellen en rød kantlinje og en rammebredde på 10 piksel.
  NB! Farge på kantlinje kan kun manipuleres gjennom CSS (Cascading Style Sheet) hvis vi skal kode gyldig HTML. Derfor foregriper vi begivenhetene og gir en forsmak på CSS-koding:
  1. Skriv inn en ny attributt i <table>-elementet som du kaller style
  2. Gi denne attributten verdien border: solid #FF0000 10px
     Bruk vanlige regler for skriving av attributter og deres verdier
     Tips: Beveg musen din over denne linjen for å se hvordan koden skal se ut
• Lagre og se på tabellen i Internet Explorer, Netscape og Opera, gjerne flere versjoner

9. Sette farge på kantlinjen og tabellen

OBS! Farge skal man ifølge HTML 4-standarden sette med stylesheets. Eldre Netscape-browsere vil uansett ikke vise farge.

• Kopier tabell nummer 8 og lim den inn i steden for avsnittet nedenfor.
• Behold den røde kantlinjen og rammebredden på 10 piksel.
• Sett gul bakgrunnsfarge på tabellen ved å gi style-attributtet verdien "background-color:#FFFF00".
  Tips: Beveg musen din over denne linjen for å se hvordan koden skal se ut
• Lagre og se på tabellen i Internet Explorer, Netscape og Opera, gjerne flere versjoner.

10. Sette farge på celler

• Kopier tabell nummer 8 og lim den inn i steden for avsnittet nedenfor.
• Fjern rammefargen, gi tabellen en rammebredde på 1 pixel.
• Sett grønn bakgrunnsfarge på celle 1 og 4 ved å sette style-attributtet til den riktige verdien.
• Lagre og se på tabellen i Internet Explorer, Netscape og Opera, gjerne flere versjoner.

11. Sette avstand mellom cellene

Kopier tabell nummer 2 og lim den inn i steden for avsnittet nedenfor. Gi cellene en avstand (cellspacing) på 6 piksel.

12. Sette avstand innenfor cellene

• Kopier tabell nummer 2 og lim den inn i steden for avsnittet nedenfor.
• Gi cellene innvendig 10 piksel luft (cellpadding).
• Lag "dummytekst" og la denne flyte rundt tabellen på venstre side
• Lagre og se på tabellen i browseren.

13. Tabell i tabell

• Kopier tabell nummer 2 og lim den inn i steden for avsnittet nedenfor.
• Lag litt plass i celle 4 (nederst til høyre), og erstatt teksten ved å lime inn tabellen en gang til.
• Lagre og se på tabellen i browseren.

14. Oppdelte bilder i kompakt tabell (sliced image)

• Kopier tabell nummer 2 og lim den inn i steden for avsnittet nedenfor.
• I første raden erstatt teksten "celle 1" med bilde "esel1.gif", "celle 2" med "esel2.gif";
  i andre raden erstatt teksten "celle 3" med "esel3.gif" og "celle 4" med "esel4.gif"
• Kantlinjen skal ikke være synlig. Gi tabellen attributtet border="0".
• Lagre og se på denne tabellen i browseren. Legg merke til at det fortsatt er "luft" mellom bildene.
• Se i HTML-presentasjonen på side 73 for å lære hva som må til for å lage en kompakt tabell, hvor der ikke er noen skille mellom bildene.
• Gi tabellen attributtene cellspacing="0" og cellpadding="0".
  OBS! Pass også på at det ikke er noen mellomrom eller linjeskift mellom <img>-koden og </td>.
• Lagre og se på tabellen i browseren.

Til informasjon

Kodene col, colgroup, thead, tfoot og tbody er ny i HTML 4 spesifikasjonen. Derfor vil de ikke virke i eldre browsere. Attributtet frame som i HTML 4 kan settes på en table-tag er også for ny. Det er greit å ha kjennskap til disse kodene, men det finnes fortsatt for mange eldre browsere, og derfor må vi bruke disse tagger og attributter med omhu.