Tabellers opbygning

Indlæs andet indhold på denne side:

I gamle dage - før css - var det almindeligt at bruge tabeller til at styre hjemmesidens indhold. Men i dag må tabellen siges kun at være beregnet til 'tabulære data', dvs. oplysninger, som det også på et stykke papir vil være naturligt at ordne i et skema.

Det kan i den forbindelse undertiden være en fordel, rundt omkring i tabellen at sammenlægge enkelte celler på tværs eller langs - det vender vi tilbage til om lidt, først skal vi have den simple tabel oprettet.


Læg farver i tabellen

Siden er opdateret 7. 12. 2011

Ud over at definere en tabels dimensioner, kan man også lægge baggrundsfarve eller baggrundsbilleder i såvel den samlede tabel som i de enkelte celler. Det vil jeg vise herunder:

<table class="gul">
<tr>
  <td></td>
  <td></td>
</tr>
</table>
Her har jeg vist en tabel med en "global" (hele tabellen) farvedefinition.
Her er klassedefinitionen, som skal indsættes i *.css-filen: .gul{
color:black;
background:#ffffbb;
border: outset 3px;
border-color:#bbbb00;
}
Vi husker, at man IKKE må erklære en baggrundsfarve, uden at erklære en tekstfarve samtidig!

Du kan efter eget ønske tilføje en tabelbredde til css-koden.

Du kan se mere om farvernes hexadecimale koder på min side om websikre farver, eller du kan hente dette lille nyttige værktøj: Color Helper, skrevet af Bjørn Aage Brandal.

<table class="rod">
<tr>
  <td> ...
Her har jeg vist en tabel med farvedefinition begrænset til rammens skrå sider.
Her er klassedefinitionen, som skal indsættes i *.css-filen: .rod{
border: outset 5px;
border-color:#bb0000
}

Som du kan se, er der ikke farve på tabelindramningens "vandrette" flader, kun de "skrå".

Du kan uafhængigt af dette tillige definere baggrund for tabellen, cellerækker og/eller celler efter behag.

<table>
<tr class="ffffbb">
  <td>...
Her har jeg lagt en baggrundsfarve ind i én cellerække.
Koden til dette ser du til venstre.
Her er klassedefinitionen, som skal indsættes i *.css-filen: .ffffbb{
color:black;
background:#ffffbb
}
Som du kan se, vil tabellens ramme og mellemrummet mellem cellerne nu ikke få farve.
Andre cellerækker i tabellen vil heller ikke få farve.
 
<table>
<tr class="ffffbb">
  <td></td>
  <td class="trans"></td>
  <td>...
  Her har jeg lagt en transparent baggrundsfarve ind i én celle.
Koden til dette ser du til venstre.
Desværre er det kun Internet Explorer, der forstår denne definition.
Her er klassedefinitionen, som skal indsættes i *.css-filen: .trans{
color:black;
background:transparent
}

Som du kan se, vil sidens baggrund nu kunne ses gennem den farve, der ellers er baggrund i resten af cellerækken.

Det kan desværre ikke lade sig gøre at lave en transparent celle, hvis der er blevet defineret global baggrundsfarve. Det kan kun lade sig gøre i forhold til definitioner i cellerækker.

Det kan heller ikke lade sig gøre at definere en transparent cellerække i en tabel, der har fået defineret global baggrund.

<table class="finer" border>
<tr>
  <...
Her har jeg lagt et baggrundsbillede ind i hele tabellen.
Koden til dette ser du til venstre.
Her er klassedefinitionen, som skal indsættes i *.css-filen: .finer{
color:black;
background:url(finer.gif)
}

Det kan ikke lade sig gøre at definere et baggrundsbillede gældende for en cellerække - kun for hele tabellen (globalt) eller en enkelt celle.

<td class="hessian"> Her har jeg yderligere lagt en baggrund ind i den højre celle. Koden til dette ser du til venstre.
Her er klassedefinitionen, som skal indsættes i *.css-filen: .hessian{
color:black;
background:url(hessian.gif)
}

Som du kan se, har en baggrundsdefinition i en celle højere prioritet en den globale definition.

Det samme gør sig gældende med eventuelle definitioner af baggrundsfarve.

<td class="graa"> Her har jeg lagt en baggrundsfarve ind i den højre celle. Koden til dette ser du til venstre.
Her er klassedefinitionen, som skal indsættes i *.css-filen: .graa{
color:black;
background:#eeeeee
}

Man kan også indsætte baggrundsbillede eller -farve i en celle, uden at der er defineret noget globalt.

Lad os sammenfatte:

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen april 2000
Hjemmesideskolen
Du er her: Forsiden - html - Tabellers opbygning
Brugere lige nu: 1
Home Mail