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.


Tabel med ledelinealer

Siden er opdateret 18. 3. 2009

Dette eksempel viser hvordan man med javascript kan manipulere rows og cells i tabeller.

Prøv at pege med musen rundt i den inderste tabel herunder:

    1  2  3  4  5  6  7  8 
1
01 02 03 04 05 06 07 08
02 04 06 08 10 02 04 06
03 06 09 12 15 18 21 24
04 08 12 16 20 24 28 32
05 10 15 20 25 30 35 40
06 12 18 24 30 36 42 48
2
3
4
5
6

I html er der i tabellen bare sat et id (id="tbl") i starttagget. Resten klares med javascripts. Før tabellen indlæses et beskedent script:

function enableMo(id) {
  var tbl = document.getElementById(id);
  //gennemløb alle tabelrækker
  for ( var c = 0; c < tbl.rows.length; c++ ) {
    var cells = tbl.rows[c].cells;
    for ( var d = 0; d < cells.length; d++ ) {
      cells[d].onmouseover = function() { mCell(this,tbl) };
    }//for
  }//for
}//slut på enableMo

function mCell(scell,tbl) {
  var row = scell.parentNode.rowIndex;
  var cell = scell.cellIndex;
  for ( var c = 0; c < tbl.rows.length; c++ ) {
    var cells = tbl.rows[c].cells;
    for ( var d = 0; d < cells.length; d++ ) {
      //de næste 4 linjer definerer linealfarverne
      //først farven i krydset
      if( c == row && d == cell ) cells[d].style.backgroundColor = "#ccccff";
      //dernæst farverne i lodrette og vandrette linealer
      else if ( c == row) cells[d].style.backgroundColor = "#eeeeff";
      else if ( d == cell) cells[d].style.backgroundColor = "#eeeeff";
      //endelig farven uden om linealerne
      else cells[d].style.backgroundColor = "#ffffff";
    }//for
  }//for
}//slut på mCell

Scriptet ligger i en ekstern lineal.js-fil og kaldes med kommandoen:

<script type="text/javascript" src="lineal.js"></script>

Efter tabellen er indsat en ganske lille script:

<script type="text/javascript">
enableMo("tbl");
</script>
Valid XHTML og CSS / Copyright © Hjemmesideskolen april 2000
Hjemmesideskolen
Du er her: Forsiden - html - Tabellers opbygning
Brugere lige nu: 1
Home Mail