DESIGN UDEN TABEL?

Opgaven her går ud på at lave et design med flere bokse der tilsammen ligner én tabel med to rækker af henholdsvis én og tre celler. I en tabel kan man have flere bokse (celler) ved siden af hinanden der alle får samme højde som den højeste celle i rækken. Højden bestemmes af indholdet, dvs. den celle der har mest indhold bestemmer den fælles højde for alle i rækken.

Mange vil gerne erstatte et sådant traditionelt tabeldesign med et design uden tabeller der i stedet benytter <div>-elementer. Det kan gøres med CSS, og i det følgende vises tre muligheder:

  1. Ved hjælp af egenskaberne ‘position: absolute’, ‘float’ og styring af baggrundsfarverne;
  2. Ved hjælp af egenskaberne ‘position: absolute’, ‘float’ og JavaScript;
  3. Ved hjælp af egenskaberne ‘position’ og ‘display: table-cell’.
1. Tabeldesign med position: absolute, float, og styring af baggrundsfarverne
[top]
 
Menu
P u n k t 1
P u n k t 2
P u n k t 3
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Mere tekst
Mere tekst
Mere tekst
Mere tekst
Mere tekst
Mere tekst
Mere tekst
Princippet i dette design er at lægge boksene ind i en omgivende boks (den lyseblå) der har egenskaben position: absolute;, mens rækken af tre sidestillede bokse fås ved at tildele hver af dem egenskaben float: left;. Der er ikke angivet højde for andre bokse end den røde. Den omgivende lyseblå boks med den sorte ramme udvider sig med højden af den højeste boks i rækken under den røde. Det er alene mængden af indhold i boksene der bestemmer højden. Dette design kræver at den omgivende boks er positioneret absolut. Hvis der ikke er angivet position eller hvis denne er sat til relative kan de indre bokse ikke udvide den omgivende box som så kollapser bag dem (og dermed kan man ikke styre baggrundsfarverne). Men med position: absolute; dur det både i Internet Explorer og i Gecko browserne. Som man kan se af farverne, kommer boksene dog ikke til virkelig at flugte i højden som på en rigtig tabel. Hvis alle tre kolonner skal have samme farve betyder det ikke noge, for så snyder man bare ved at give alle bokse, inklusiv den omgivende boks, samme farve. Men hvis hver kolonne skal have sin egen farve, er man nødt til på forhånd at vide hvilken boks der har mest indhold. I det tilfælde sørger man for at den omgivende boks får samme farve som den venstre boks, i eksemplet her altså gul. Dernæst lægger man også en omgivede boks omkring de to øvrige bokse. Også den tildeles egenskaben float: left;. Den skal så have samme baggrundsfarve som den laveste af de to bokse inden i. I eksemplet her, skal den altså være mørkeblå. Hvis højden af boksene derimod skal være varierende, og det ikke på forhånd kan siges hvilken vil være den højeste, er man nødt til at få alle boksene til at være ligeså høj som den højeste af dem - altså netop som i en "rigtig" tabel. Det kan ikke gøres med CSS alene, men f.eks. ved hjælp af JavaScript. I det tilfælde er man så også helt fri for at manipulere med farverne. Dette er princippet for det næste design:
2. Tabeldesign med position: absolute, float, og JavaScript
[top]
 
Menu
P u n k t 1
P u n k t 2
P u n k t 3
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Mere tekst
Mere tekst
Mere tekst
Mere tekst
Mere tekst
Mere tekst
Mere tekst
Her har de tre bokse under den røde fået tildelt samme højde som den til enhver tid højeste af dem. Dette gøres dynamisk med følgende script:
function setDivsHeight() {
  var divsH = ["left","middle","right"]; // indsæt dine divs
  var maxH = 0;
  for(i=0;i<divsH.length;i++){
    maxH = Math.max(maxH,document.getElementById(divsH[i]).offsetHeight);
  }
  for(i=0;i<divsH.length;i++){
    document.getElementById(divsH[i]).style.height = maxH + 'px';
  }
}
Funktionen kaldes ved en onload-event f.eks. således:
<body onload="setDivsHeight();">
Tak til roenvingEksperten.dk for dette script!
3. Tabeldesign med position og display: table-cell;
[top]
Menu
P u n k t 1
P u n k t 2
P u n k t 3
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Mere tekst
Mere tekst
Mere tekst
Mere tekst
Mere tekst
Mere tekst
Mere tekst
Dette design virker kun i Gecko browserne (Netscape og Mozilla), ikke i Internet Explorer, der ikke understøtter denne standard; så her kommer alle boksene til at ligge under hinanden. Princippet er enkelt. Igen lægges "celle"-boksene ind i en omgivende boks. Den skal enten have egenskaben position: relative; eller position: absolute;. De tre sidestillede bokse har hver egenskaben display: table-cell;. Det er denne værdi der ikke er understøttet af Internet Explorer. Se: http://www.blooberry.com/indexdot/css/properties/classify/display.htm for en liste over display-værdierne med angivelse af browserunderstøttelse.