Globale linker

HTML

<table>

Tabeller er det viktigste elementet man idag bruker for nøyaktig plassere eller distribuere innhold på en side.

Ved hjelp av tabeller kan man med presisjon plassere elementer slik at designet på siden blir slik man ønsket det.

Man kan putte hva som helst i en tabellcelle; tekst, bilder, forms-elementer, filmsnutter, tabeller......

En enkel tabell med tre rader og to kolonner ser slik ut:

Kode:

Resultat

<table width="250" border="1" cellpadding="0" cellspacing="0">
<caption>Overskrift</caption>
  <tr>
    <th>Tekst</th>
    <th>Tekst</th>
  </tr>
  <tbody>
  <tr>
    <td>Rad 1:1</td>
    <td>Rad 1:2</td>
  </tr>
  <tr>
    <td>Rad 2:1</td>
    <td>Rad 2:2</td>
  </tr>
  </tbody>
</table>

Overskrift
Tekst	Tekst
Rad 1:1	Rad 1:2
Rad 2:1	Rad 2:2

Med <tr> forteller vi at her begynner en ny rad.
Med <td> forteller vi at her er en celle. Pass på at det er like mange celler i hver rad, for ellers vil tabellen se rar ut.
Innholdet i tabellen plasseres mellom <td>-taggene.

<table>-elementet har fem vanlige sub-elementer:

<th> = tableheader; tekst i <th>-elementet blir bold
<tr> = tablerow
<td> = tabledata (eller celle). Pass på å ha like mange celler i hver rad.
<tbody> = tablebody; ikke påkrevet. Forteller at mellom <tbody>-taggene ligger tabelldataene. Man kan også bruke både <thead> og <tfoot> (header og footer).
<caption> = Overskrift; ikke påkrevet. Teksten mellom <caption>-taggene vil bli sentrert. Man bruker <caption> i begynnelsen eller slutten av en tabell for å få en overskrift eller en undertekst ved bruk av attributtet align og med verdiene top eller bottom

<table>-attributter:

Bgcolor = bakgrunnsfarge i hele tabellen, angis med hexakode
NB! Utgått til fordel for CSS.
Width = tabellens bredde i pixler eller prosent
Border = linjene som danner kantlinjene rundt tabellen og hver enkelt celle. Du kan velge en numerisk verdi som spesifiserer kantlinjen i pixler. Border="0" vil gi en tabell med usynlige kantlinjer.
Cellspacing = verdien angir avstanden i pixler mellom cellene. Gir «luft» mellom cellene.
Cellpadding = verdien angir avstanden i pixler fra kantlinjen til cellens innhold. En slags indre marg i cellene.
Align = tabeller kan justeres left, center eller right i forhold til tekst på samme linje.
NB! Utgått til fordel for CSS.
Background = bakgrunnsbilde angitt ved adressen til bildet. Bildet vil bli repetert til horisontalt og vertikalt hvis det ikke er stort nok til å dekke hele tabellen.
NB! Utgått til fordel for CSS.

<td>-attributter:

Colspan = angir hvor mange celler bortover som skal slås sammen i en tabell.
Rowspan = angir hvor mange celler nedover som skal slås sammen i en tabell.
Align = celledata kan være left, center eller right justert.
Valign = celledata kan være top, middle eller bottom justert.
Background = bakgrunnsbilde i en celle angitt med adressen til bildet.
NB! Utgått til fordel for CSS.
Bgcolor = bakgrunnsfargen i cellen.
NB! Utgått til fordel for CSS.
Width = bredden til cellen målt i pixler eller prosent.
NB! Utgått til fordel for CSS.
Height = høyden til cellen målt i pixler eller prosent.
NB! Utgått til fordel for CSS.

Skal du angi attributter for en hel rad, for eksempel ha rød bakgrunnsfarge på alle cellene i en rad, kan attributtet angis i <tr>-taggen istedet -
<tr bgcolor="#FF0000">
Attributter som deklareres i <tr>-taggen gjelder hele raden.

Noen browsere tegner ikke kantlinjer rundt tomme celler. For å komme rundt dette kan du sette inn en non-breaking-space i den tomme cellen ( ), eller en blank gif.
<td> </td> eller <td><img src="images/blank.gif" width="10" height="1"></td>

En blank gif, er en 1pixel x 1pixel stor gjennomsiktig gif som kan brukes til å sperre ut tabellceller enten i høyden eller i bredden ved å angi width og height attributtene for bildet.

rad 1 kolonne 1	rad 1 kolonne 2
rad 2 kolonne 1	rad 2 kolonne 2
rad 3 kolonne 1	rad 3 kolonne 2

Koden for denne tabellen ser slik ut:

<table width="100%" border="1">
  <tr align="center">
    <td width="50%">rad 1 kolonne 1</td>
    <td width="50%">rad 1 kolonne 2</td>
  </tr>
  <tr align="center">
    <td width="50%">rad 2 kolonne 1</td>
    <td width="50%">rad 2 kolonne 2</td>
  </tr>
<tr align="center">
    <td width="50%">rad 3 kolonne 1</td>
    <td width="50%">rad 3 kolonne 2</td>
  </tr>
</table>

COLSPAN

Med colspan="x" slår man samme to, eller flere celler i en rad, man spenner over flere kolonner, derav colspan-navnet. Bruker du colspan må du slette celler i samme rad.

rad 1 kolonne 1
rad 2 kolonne 1	rad 2 kolonne 2
rad 3 kolonne 1	rad 3 kolonne 2

Koden for denne tabellen ser slik ut:

<table width="100%" border="1">
  <tr align="center">
    <td colspan="2">rad 1 kolonne 1</td>
  </tr>
  <tr align="center">
    <td width="50%">rad 2 kolonne 1</td>
    <td width="50%">rad 2 kolonne 2</td>
  </tr>
  <tr align="center">
    <td width="50%">rad 3 kolonne 1</td>
    <td width="50%">rad 3 kolonne 2</td>
  </tr>
</table>

ROWSPAN

Med rowspan="x" slår man samme to, eller flere celler i en kolonne, man spenner over flere rader, derav rowspan-navnet. Bruker du rowspan, må du slette celler i påfølgende rader.

Rad 1 kolonne 1	rad 1 kolonne 2
Rad 1 kolonne 1	rad 2 kolonne 2
rad 3 kolonne 1	rad 3 kolonne 2

Koden for denne tabellen ser slik ut:

<table width="100%" border="1">
  <tr align="center">
    <td width="50%" rowspan="2">rad 1 kolonne 1</td>
    <td width="50%"> rad 1 kolonne 2</td>
  </tr>
  <tr align="center">
    <td width="50%">rad 2 kolonne 2</td>
  </tr>
  <tr align="center">
    <td width="50%">rad 3 kolonne 1</td>
    <td width="50%">rad 3 kolonne 2</td>
  </tr>
</table>

Skal man bruke tabeller for å plassere elementer på en side bør man ikke ha kantlinjer i tabellen. Sett derfor border="0" cellpadding="0" cellspacing="0" som attributter i <table>.

Gå til neste side hvor vi ser på frames