Opgave 7

Sidst opdateret
26. februar 2005

Opgave 7: Opret tabeller

Tabeller Den hurtigste og nemmeste måde at få kontrol over placering af tekst og grafik på hjemmesiden er med anvendelsen af tabeller, på samme måde som du måske kender det fra almindelig tekstbehandling.
Teksten på disse web-sider her er også skrevet i en tabel med to kolonner, som der dog almindeligvis refereres til som celler.

<table> En tabel består af rækker - hver række opdeles igen i et antal kolonner/celler. De 'tags' som bruges til at lave en tabel er meget simple :

<table border="1"> - definerer begyndelsen på en tabel med synlig ramme
<tr> -  definerer den første række
<td>  - definerer starten på den første kolonne (celle)
</td> - afslutter første kolonne (celle)
<td> - starten på anden celle
</td> - anden celle afsluttes (lukkes)
</tr> - afslutter første række
</table> tabellen afsluttes

Ovenstående vil give en tabel med én række og to kolonner (celler)


Eksempel

 

Måske du tænker nu, hva' har han gang i her ....!
Men du vil - før eller siden - give mig ret. Man må bare kunne læse og anvende tabelkoderne ;-)

 

 

Til gengæld skal jeg indrømme at det er meget nemmere at arbejde med tabeller i FrontPage end på den måde vi gør her og nu!

  • du skal nu prøve at oprette en tabel med 3 rækker og 2 kolonner. Koden ser sådan ud :

Se eksempel her med ovenstående kode....
 

Nej, indrømmet , der var ikke meget at se.
Det er simpelthen fordi de enkelte celler i tabellen endnu ikke indeholder noget; f.eks tekst eller billeder m.v.

Tabel koderne viser et generelt princip i html, nemlig at alle tags skal afsluttes / lukkes igen.
Det gælder her for
celler </td>
rækker </tr>
og selve tabellen </table>

Nå vi skal ha' puttet noget indhold i cellerne.

 

 

 

 

 

  • Indsæt nu noget tekst i de enkelte celler i tabellen, dvs. mellem <td> ....og </td>
  • Her kan du se hvordan tabellen gerne skal se ud: Se eksempel her. ( Ja - det er fortsat ret dødsygt at se på ..;-)
  • Husk at sætte table border="1" , ellers kan du ikke se tabellens rammer i browseren.
    Senere fjerner vi rammerne igen, men mens vi arbejder med tabllen er det praktisk at kunne se cellerne. 
  • Vælg evt. Vis-> Kildekode i browseren med ovenstående eksempel for at se hvordan jeg har indsat teksten.

Du skulle gerne nu ha en fornemmelse af tabellens opbygning:
Først oprettes tabellen med koden <table>, dernæst oprettes den første
række med <tr> herefter følger celler som starter med <td>
her følger cellens indhold af tekst etc. og cellen afsluttes med </td>
endelig afsluttes rækken med </tr>. Nye rækker indsættes på samme måde
og tilsidst afsluttes hele tabellen med </table>

 

I opgave 8 skal du lære hvordan du redigerer tabellens størrelse, og anvender den til vores layout af websiden.

 

 

© Otto leholt

Til top af siden