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.
Justering af tabellens dimensioner
Siden er opdateret 7. 12. 2011
Når vi nu har fået lavet tabellen med det nødvendige antal kolonner (lodret) og rækker (vandret), skal vi til at justere tabellen, så det passer til vores formål.
- Tabeller kan breddejusteres med attributten width i pixels eller % af sidebredden. Justeringen sker ved at du i tabelerklæringen kalder en klasse, som på forhånd skal være erklæret i din *.css-fil. Eller du kan sætte inline-css på tabellen.
- Cellers bredde og højde kan på samme måde fastlægges med attributten width og med antallet af pixels eller % af sidebredden (må naturligvis ikke overskride tabellens samlede bredde). Vær dog opmærksom på, at hvis et indsat billedes størrelse overstiger den definerede størrelse på cellen, er det billedet, der bestemmer cellens størrelsen. Cellers højde kan justeres med height og med værdien sat i pixels.
- Afstanden fra cellevæg til indhold kan defineres i pixels med padding.
- Afstanden mellem de enkelte celler kan defineres i pixels med border-spacing - det virker ikke i MSIE, så der må man ty til den gammeldags html-specifikation cellspacing.
Skal du opnå nul afstand mellem celler, defineres det med border-collapse - dette virker dog i MSIE.
- Tabeller kan afgrænses synligt et antal pixels i forhold til baggrunden med attributten border og med en af parametrene solid, groove, ridge, outset, inset, dashed eller dotted + et antal pixels + evt. en farvedefinition.
Denne afgrænsning defineres i en klasse i din *.css-fil - det kan udmærket lægges sammen med en breddedefinition for tabellen. Eller du kan definere det i inline-css.
- Tabelceller kan få hver deres synlige afgrænsning, hvis border erklæres i css. Tabelceller kan desuden tildeles individuelle afgrænsinger ved, at der i kaldet til den enkelte tabelcelle tilføjes et kald til en klasse, som definerer border's beskaffenhed (type, bredde og farve) - eller med inline-css.
- Tabellens placering horisontalt er som standard til venstre på siden, men kan fastlægges centreret ved definere en bredde og margin:auto på tabellen bredde plus float:right hvis man ønsker en højrestillet tabel.
- Placering af cellers indhold horisontalt er som standard til venstre i cellen, men det kan ændres ved at man i sin *.css-fil har erklæret nogle klasser (se ovenfor) til formålet og derefter kalder disse klasser efter behov i hver enkelt celle eller ved at sætte en generel justeringsdefinition i css.
- Placering af cellers indhold vertikalt er som standard i midten af cellen, men det kan man i sin *.css-fil ændre ved at definere f.eks. topjustering af celleindhold. Desuden kan man samme sted erklære klasser, der kan afvige fra standarden. Se mere om det på siden om CSS-formatering i HTML.
<table class="t100b3" cellspacing="5">
<tr>
<td class="c50"></td>
<td class="hoj"></td>
</tr>
</table>
|
Her er et eksempel, hvor tabellen er defineret til at fylde hele sidebredden.
Afstanden mellem de enkelte celler er sat til 5 pixels (cellspacing="5").
Afstanden fra cellevæggene til cellernes indhold er i css sat til 5 pixels (padding:5).
Cellernes indhold er i min_css-fil fastlagt topjusteret (td{vertical-align:top}).
Venstre cellers indhold er default venstrejusteret mens højre celles indhold er højrejusteret.
Tabellen er "tilsyneladende løftet" 3 pixels fra baggrunden (border:outset 3px). |
Her ser du klassedefinitionen, som fra *.css-filen styrer tabellens bredde og kant:
.t100b3{
border: outset 3px;
width: 100%
}
|
Her ser du klassedefinitionen, som fra *.css-filen styrer cellernes border og padding:
table.t100b3 td{
border: 1px solid #999;
padding: 5px
}
|
^ Tilbage til sidens top
Valid XHTML og CSS / Copyright © Hjemmesideskolen
april 2000