XV. Tableaux sans tableaux

Avertissement aux utilisateurs d'Internet Explorer

Si vous voyez ce message, c'est que vous ne pouvez pas voir les choses importantes de cette page. Vous utilisez sans doute Internet Explorer.

Chacune des pages de ce site est codée de façon à ce que la structure logique de son contenu soit rigoureusement indépendante de sa présentation.
Le code HTML responsable de la structure logique ainsi que la feuille de style responsable de la présentation ont été validés pour chaque page par le service de validation HTML du W3C. C'est ce que permettent de vérifier les 2 images en bas du menu à gauche. N'hésitez pas cliquer.
En conséquence, le contenu de chaque page doit pouvoir s'afficher d'une manière élégante, compréhensible et navigable dans n'importe quel navigateur, y compris ceux qui ne supportent pas les feuilles de style.
Cependant, quelques navigateurs encore en circulation interprètent certaines instructions d'affichage d'une manière erronée. Ces navigateurs ne sont pas conformes aux standards et sont appelés à disparaître. C'est le cas notamment d'Internet Explorer. Des efforts ont été faits pour contourner les principaux bogues de ce navigateur, mais il est pratiquement impossible de les prévoir tous.
Si votre navigateur est désuet ou bogué, soit vous contournez le problème en désactivant l'option de prise en charge des feuilles de style, soit vous réglez définitivement le problème en téléchargeant la version récente d'un navigateur conforme.

Ce texte provient de Normand Lamoureux, Webmestre du Jeu d'échecs expliqué.

1. Un premier tableau simple

1: une case... 2: une autre... 3: et encore...
4: une case sur une autre ligne... 5: et toujours.

Ce tableau est obtenu avec le code source suivant :
  <DIV CLASS="ligne">
    <SPAN CLASS="case">1: une case...</SPAN>
    <SPAN CLASS="case">2: une autre...</SPAN>
    <SPAN CLASS="case">3: et encore...</SPAN>
  </DIV>
  <DIV CLASS="ligne">
    <SPAN CLASS="case">4: une case sur une autre ligne...</SPAN>
    <SPAN CLASS="case">5: et toujours.</SPAN>
  </DIV>
et les styles suivants :
    .ligne { 
      clear:both;
      margin:5px;
      padding:5px;
    }
    .case { 
      float:left;
      margin:5px;
      padding:5px;
      border:solid thin red;
      text-align:center;
      width:10em;
    }

2. À quoi ça sert ?

Pour s'amuser...

Mais aussi pour voir comment se passer de tableaux... Si les tableaux sont naturels quand il s'agit de représenter des tables de données, ils n'ont aucune raison d'être dans la présentation d'une page.

Pour s'en convaincre, une lecture intéressante (comme toujours) sur le site d'Open Web : http://www.openweb.eu.org/articles/problemes_tableaux/.

3. En apprendre plus

Dernière modification de cette page le mardi 23 novembre 2004 à 11h14.