Devrait-on structurer un site Web avec CSS

20 novembre 2013

Ma réponse est « oui » et, dans cette page, je décris la démarche classique de structuration utilisant des balises <table> imbriquées, la démarche CSS utilisant des balises <div> imbriquées utilisant "display: table;", "display: table-row" et "display: table-cell". J'ajoute ensuite la structure ce ce site en tant qu'exemple.

C'est un débat d'experts! Certain disent que la structure d'un site est le rôle de HTML. D'autres disent qu'on ne devrait pas décourager ceux qui veulent utiliser des tables CSS sur des éléments qui ne sont pas réellement des tables mais des facsimilés.

Démarche classique

En HTML, on utilise la balise <table> pour définir une structure tabulaire alors que la règle CSS display:table est utilisée pour définir une mise en forme tabulaire. Le modèle CSS de table est basé sur le modèle du HTML 4 dans lequel la structure d'une table est assez rigoureusement semblable à celle de la table HTML. Dans ce modèle, une table consiste en une étiquette facultative et un arrangement de cellules en rangées et colonnes.

Lorsque j'ai développé le site www.gtro.com, il y a plusieurs année, l'entête du site consistait en une table présentant le titre du site, une photo de moi et quelques autres informations dont la date du jour et des liens permettant de changer le thème de couleur, et la grosseur des polices et d'afficher l'aperçu avant impression.

Démarche CSS

Sur ce site, j'ai procédé autrement en remplaçant la balise <table> par une balise <div> référée en CSS par l'énoncé "display:table;" - c'est ce que j'appelle une table CSS.

Vous trouverez dans le tableau qui suit les valeurs que peut prendre la propriété display pour la création de tables CSS. Comme indiqué, chacune de ces valeurs correspond à une balise HTML.

Valeurs et équivalents HTML des valeurs de display
Valeur	Balise HTML	Comportement
table	<TABLE>	Définit un élément block et lui commande de s'afficher comme une table qui peut être l'hôte de rangées et de colonnes.
inline-table	<TABLE>	Définit un élément in-line et lui commande de s'afficher comme une table qui peut être l'hôte de rangées et de colonnes
table-row	<TR>	Définit un élément block et lui commande de s'afficher comme une row.
table-row-group	<TBODY>	Ne s'affiche pas.
table-header-group	<THEAD>	Ne s'affiche pas.
table-footer-group	<TFOOT>	Ne s'affiche pas.
table-column	<COL>	Définit un élément block et lui commande de s'afficher comme une column. Rien ne s'affiche car ce n'est qu'une information de style
table-column-group	<COLGROUP>	Ne s'affiche pas.
table-cell	<TH>, <TD>	Définit un élément block et lui commande de s'afficher comme une cell.
table-caption	<CAPTION>	Définit un élément block et lui commande de s'afficher comme une caption

Sur ce site, l'entête est constituée de tables CSS. Le tableau qui se trouve sous ce paragraphe est une table CSS que j'ai construit en tant qu'exemple.

Entête 1

Entête 2

Case 1.1

Case 2.1

Case 3.1

Case 1.2

Case 2.2

Case 3.2

Je suis l'étiquette de cette table CSS

Bien entendu, il est quasi-impossible de reproduire par des CSS les caractéristiques exactes d'un tableau: Avec les balises <table>, on peut différencier les entêtes <th> des cellules ordinaires <td>. Il est aussi facile de réunir des rangées ou des colonnes avec les balises rowspan et colspan, ce qui est quasi-impossible à faire avec les tables CSS.

Structure de ce site

Lorsqu'il a été question de concevoir ce site, j'ai immédiatement décidé de ne pas utiliser les balises <table> comme je l'avais fait pour le site www.gtro.com. J'ai utilisé les tables CSS de la façon suivante:

<html>
  <head></head>
    <body>
      <div id="container" class="table_">
        <div class="table_row">
          <div id="menus_wrapper" class="table_cell"></div>
          <div id="content" class="table_cell">
            <div id="banner"></div>
            <div id="template"><!-- la texte de la page va ici  --></div>
          </div>  <!--end of #content -->
        </div> <!-- end of .table_row -->		
      </div>  <!--div class="table_row" -->		
    </div>  <!--div id="container" class="table_" -->
  </body>
</html>

avec le code CSS suivant:

.table_ {
	display: table;
	width: auto;}

.table_row {
	display: table-row;
	width: auto;}

.table_cell {
	display: table-cell;}

Jusqu'à ce jour, ça fonctionne très bien!

Annexes

Références

CSS Variables with PHP - décrit une méthode simple qui consiste à constituer un fichier de type CSS à l'intérieur d'un "wrapper" ayant l'extendion .php dans lequel le code PHP suivant
```
header("Content-type: text/css; charset: UTF-8");
```
doit être mis sur la première ligne du fichier. C'est la même méthode que j'utilise déjà sur mon site. Je l'ai essayé avec plusieurs DTDs sur mon Intranet et elle fonctionne très bien. Elle ne fonctionne pas sur mon site.
How to Add Variables to Your CSS Files - décrit une méthode qui consiste à utiliser le module de réécriture d'URL d'Apache;
Des CSS dynamiques via PHP -
CSS Colors: Take Control Using PHP -
W3C Hammers Out the Details of CSS Variables -