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.
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{ |
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{ |
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{ |
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{ |
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{ |
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{ |
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{ |
Man kan også indsætte baggrundsbillede eller -farve i en celle, uden at der er defineret noget globalt.
Lad os sammenfatte: