Administreres af:

• Tabellayout
• Tabelopsætning
• Retningslinier for brug

Af: novicen.dk

Tabellayout

Til brug i web-design kan en tabel bedst sammenlignes med et designgitter, hvor adskillelsen mellem tabellens enkelte celler betragtes som styrelinier. Styrelinierne kan kun opsættes som lodrette eller vandrette adskillelser, der adskiller tabellens rækker og kolonner. Den vandrette inddeling giver antallet af rækker og den lodrette inddeling giver antallet af kolonner. Nedenstående tabel har tre rækker og fire kolonner.

	En tekst	En anden tekst

Hvis en tabel ikke målsættes, vil den krympe sig sammen omkring de indsatte elementer. Størrelsen vil da aldrig kunne blive mindre end det største af de indsatte elementer. Bredden kan angives i pixel (fast bredde) eller i procent (% af tilgængelig plads). Højden kan - med visse begrænsninger - angives på tilsvarende måde men det kan anbefales at indsætte et gennemskinneligt .gif billede til at tvinge højden på plads, da dette vil give en mere ensartet og sikker fremvisning i de forskellige browsere. Højreklik her for at hente et gennemskinneligt .gif billede, vælg "Gem destination som...".

Du kan regulere på forskellige parametre, der påvirker udseendet af tabellen. Parametrene vil påvirke samtlige celler (de enkelte rum) i tabellen:

WIDTH: Bredde af hele tabellen. Angives i pixel eller i procent.

BORDER: Kantbredde på tabellen. Angives i pixel.

CELLSPACING: Afstand mellem de enkelte celler. Angives i pixel.

CELLPADDING: Afstand fra cellekant og ind til indholdet i cellen. Gælder ud mod alle fire kanter. Angives i pixel.

ALIGN: Justering med ombrydning. Kan udelades - medfører venstrestilling uden tekstomløb - eller sættes til "left" eller til "right", der begge giver tekstomløb omkring tabellen. ALIGN="center" vil centrere tabellen uden at give tekstomløb men "center" er ikke en defineret værdi (den er ikke officielt anerkendt). I stedet for "center" kan tabellen centreres på samme vis, som almindelig tekst: <center> tabel her </center>.

WIDTH="500" BORDER="1" CELLSPACING="0" CELLPADDING="0":

WIDTH="50%" BORDER="1" CELLSPACING="5" CELLPADDING="0" (prøv at skalere dit browservindue):

WIDTH="500" BORDER="1" CELLSPACING="0" CELLPADDING="3":

Kodemæssigt indsættes tabellen med en TABLE TAG. Senest viste tabel er gengivet herunder:

<table border="1" cellpadding="3" cellspacing="0" width="500">
   <tr>
    <td>Tekst 1</td>
    <td>Tekst 2</td>
    <td>Tekst 3</td>
   </tr>
   <tr>
    <td>Tekst 4</td>
    <td>Tekst 5</td>
    <td>Tekst 6</td>
   </tr>
   <tr>
    <td>Tekst 7</td>
    <td>Tekst 8</td>
    <td>Tekst 9</td>
   </tr>
  </table>

Tabelopsætning

Forsøg om du kan gennemskue nedenstående layout, hvor der er anvendt tre tabeller:

Når du arbejder med web-design, er det væsentligt, at du har forståelse for, at der er mange muligheder for at frembringe et givet layout. Den her viste gennemgang er derfor ikke "den eneste ene" men en af flere muligheder. Det vil altid være slutresultatet som tæller og når der er taget behørig hensyn til mindskelse af kodeforbruget og der ikke er fejl i koden, så er resultatet se-værdigt.

For at gennemskue, hvordan det viste layout er skruet sammen, kan det være en hjælp at dele indholdet op i blokke. Inddelingen er her valgt til: området med den centrerede overskrift, område med den indsatte menu, området med det egentlige indhold og området med de angivne copyright. Da overskriften er centreret i forhold til hele bredden og ikke alene i forhold til den tekst, som er angivet nedenunder, vil det farvede område også skulle udfylde hele bredden som ét stort område. Det er muligt at smelte flere celler sammen - både vandret og lodret - og derfor kan vi, med udgangspunkt i de angivne områder, opsætte en tabel med tre rækker og to kolonner, hvor den øverste række er smeltet samme til én stor celle:

Sammensmeltning af celler sker med attributterne COLSPAN og ROWSPAN, der skal indsættes i TD TAG'en på den første/øverste af de celler, som skal smeltes sammen. Arbejder du i et grafisk web-værktøj vil de overskydende celler formodentlig blive fjernet automatisk men du bør sikre dig, at dette sker. I modsat fald eller hvis du anvender et kildekode-værktøj skal du manuelt fjerne de overskydende celler.

<td colspan="2">Overskriften placeres her</td>

Den anvendte tabelbredde er her 80% af browservinduets samlede bredde men fremgangsmåden vil være den samme også ved andre procentvise breddeangivelser (eks. 100%).

Læg mærke til, at teksten Menu er placeret lodret i midten ud for teksten i området, hvor indholdet placeres. Dette er standard og vi skal derfor have topjusteret indholdet, hvilket kan ske enten på hver enkelt celle eller samlet på alle celler i en række. Attributten hedder VALIGN og den kan sættes til: "top", "middle" (er standard, hvis den udelades) eller "bottom". VALIGN kan indsættes enten på TR (række) TAG eller på TD (celle/kolonne) TAG.

<tr valign="top">
  <td>Menu</td>
  <td>Indholdet kan 
    <p>inds&aelig;ttes her</p>
  </td>
</tr>

Den indsatte angivelse af copyright skal centreres. Det er også her muligt at justere hver enkelt celle eller alle celler samlet i en række. Mulighederne er: "left" (er standard, hvis attributten udelades), "center" eller "right". Her indsættes attributten direkte på den pågældende celle.

<td align="center">Copyright angives her</td>

Resultatet ser nu sådan ud:

I stedet for den nuværende overskrift indsættes en tabel med WIDTH="100%", BORDER="1" og CELLPADDING="5". Indholdet centreres og der indlægges baggrundsfarve (anvend styles som class angivet i eksternt stylesheet) på tabellens eneste celle.

Ordet Menu erstattes med en tabel med kun én celle, hvor bredden angives til 100 pixel. Tabellen vil virke som et grafisk element (billede) og vil bevirke, at menu-kolonnen ikke kan blive smallere end 100 pixel. For at holde menu-kolonnen fast på de 100 pixel, sætter vi den yderste celle i rækken til 98% bredde. Denne værdi er erfaringsmæssigt bedst mulig virksom i alle betydende browsere under flest mulige driftbetingelser.

For den yderste tabel skal CELLPADDING sættes til 2, CELLSPACING og BORDER til 0. For menu-tabellen fjernes BORDER og samtlig tekster tilrettes.

Retningslinier for brug

Tabellens bredde kan angives i faste pixel eller som procent af den tilgængelige bredde. Tilgængelig bredde kan være browservinduets størrelse eller bredden for en kolonne, hvis tabellen er indsat i en anden tabel.

Hvis en tabelbredde angives i pixel, bør alle kolonnebredder angives i pixel eller alle som procent. Der skal i begge tilfælde tages behørig hensyn til, at summen af kolonnebredder skal være lig med tabellens bredde i pixel eller 100%.

Angives en tabelbredde i procent, vil én af kolonnerne kunne tildeles en bredde på 98% for at tvinge bredden ud til størst muligt bredde. Det er herved muligt at opsætte layout med fast menubredde uanset browservinduets størrelse.

Højden på en tabel eller på en række vil ikke entydigt og i alle tilfælde kunne fastholdes og det kan anbefales at bruge gennemskinnelige .gif elementer til at regulere en mindste højde.

En tabel indsat i en anden tabel vil ikke med sikkerhed kunne højdereguleres.