SELFHTML: HTML/XHTML / Tableaux / Tableaux comme moyen pour la présentation de pages Web

	Tableaux comme moyen pour la présentation de pages Web
	Généralités sur les tableaux comme moyen pour la présentation de pages Web Exemple typique d'une mise en page avec un tableau

Généralités sur les tableaux comme moyen pour la présentation de pages Web

Quand sur des pages Web vous rencontrez des éléments alignés proprement et relativement bien équilibrés, il s'agit dans de nombreux cas d'un travail effectué avec la technique des "tableaux sans quadrillage". Les tableaux sans quadrillage n'ont, comme leur nom l'indique, aucun quadrillage visible. C'est pourquoi l'utilisateur ne remarque pas du tout qu'il s'agit en réalité d'un tableau.

Vous devez cependant tenir compte d'un inconvénient si vous avez l'intention de mettre dans un tableau tout le contenu d'une page Web: Les tableaux ne sont affichés par le navigateur que lorsque leur contenu complet a été lu ou plutôt lorsque le navigateur sait exactement dans quelle hauteur et quelle largeur le tableau doit être affiché. Ce qui signifie lors de la transmission de données sur le WWW qu'un utilisateur attend plus longtemps devant son écran avant d'avoir la moindre chose affichée. À moins que vous n'utilisiez la commande pour prédéfinir des colonnes.

Un autre problème réside en ce que les navigateurs ne réagiront pas forcément comme vous le désirez avec les mentions de largeur et de hauteur que vous désirez. Les contenus sont alors soudain compressés, étirés etc. Ce qui a conduit à l'invention de ce qu'on appelle les "pixels transparents", un petit graphique GIF composé d'une seule couleur définie elle-même comme transparente. Combiné à la possibilité de mentionner en HTML les largeur et hauteur de graphiques indépendamment de la taille effective du graphique, un tel graphique peut être incorporé et rester invisible et indétectable. Ainsi, il est possible avant tout de forcer des largeurs minimales pour différentes colonnes d'un tableau, et il devient impossible au navigateur d'y compresser les données. Cette technique passe pour être un trucage peu orthodoxe d'un côté, mais il est d'un autre côté un palliatif des possibilités de formatage inexistantes. Entre-temps les feuilles de style CSS proposent certes de telles possibilités (comparez la propriété CSS min-width), pourtant elle n'est pas d'un grand secours aussi longtemps que les navigateurs bien répandus ne la soutiendront pas.

Dans cette partie, il sera montré au vu d'un exemple, comment les mises en pages avec tableau sans quadrillage fonctionnent dans leur principe. La technique du pixel aveugle sera laissée de côté ici. Mais c'est une autre technique typique qui sera employée: L'imbrication de tableaux. Car la plupart du temps des mises en page avec tableaux bien propres ne peuvent être obtenues que lorsqu'on travaille avec des tableaux dans des tableaux.

Exemple typique d'une mise en page avec un tableau

L'exemple suivant montre une mise en page comme on en trouve sur beaucoup de pages Web: en haut une surface de couleur où se trouve le titre de la page ainsi que d'autres éléments tels des graphiques pour les symboles, bannière ou autres, au dessous et à gauche côtoyant directement la première une surface étroite, de couleur uniforme pour les liens de navigation à l'intérieur du projet Web et à sa droite une large surface pour le contenu proprement dit de la page.

L'exemple est du HTML 4.0 valide mais se sert de divers attributs classés en cours d'abandon , ce pourquoi la variante HTML "Transitional" a du être choisie.

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body bgcolor="#FFFFFF" link="#FFFF00" vlink="#FFCC00" alink="#FFFFFF" text="#000000">

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#A050A0">
 <colgroup>
  <col width="200">
  <col>
 </colgroup>
 <tr>
  <td colspan="2">
   <table border="0" cellpadding="10" cellspacing="0">
    <tr>
     <td>
      <h1 style="color:#FFFFFF">Bienvenue</h1>
     </td>
    </tr>
   </table>
  </td>
 </tr><tr>
  <td valign="top" width="200">
   <table border="0" cellpadding="10" cellspacing="0">
    <tr>
     <td>
      <h3 style="color:#FFFFFF">navigation</h3>
      <p><a href="table_tr_th_td.htm"><b>tableaux</b></a><br>
      <a href="bgcolor.htm"><b>arri�re-plan</b></a><br>
      <a href="colspan.htm"><b>relier des cellules</b></a><br>
      <a href="width_height.htm"><b>largeur et hauteur</b></a></p>
      <h3 style="color:#FFFFFF">Quoi de neuf</h3>
      <p style="color:#FFFFFF">Les nouveaut�s se trouvent
      toujours � cet endroit.
      Il n'y a pas grand chose de neuf. seulement ceci:
      cette page est nouvelle.</p>
     </td>
    </tr>
   </table>
  </td>
  <td valign="top" bgcolor="#FFFFFF">
   <table border="0" cellpadding="10" cellspacing="0">
    <tr>
     <td>
       <h2>De quoi est-il question ici en fait?</h2>
       <p>Ah oui, de cr�ation sur le Web, les choses habituelles quoi.
       beaucoup de contenu beaucoup de contenu beaucoup de contenu
       beaucoup de contenu beaucoup de contenu beaucoup de contenu
       beaucoup de contenu
       beaucoup de  contenu.</p>
       <p>beaucoup de contenu</p>
       <p>beaucoup de contenu</p>
       <p>beaucoup de contenu</p>
       <p>beaucoup de contenu</p>
       <p>beaucoup de contenu</p>
       <p>beaucoup de contenu</p>
       <p>beaucoup de contenu</p>
       <p>beaucoup de contenu</p>
       <p>beaucoup de contenu</p>
       <p>beaucoup de contenu</p>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>

</body>
</html>

Explication:

L'exemple fixe dans le repère d'introduction <body> d'abord des couleurs pour l'arrière-plan, le texte et les liens pour l'ensemble du fichier.

Dans le corps du fichier est défini le tableau parent. Il reçoit l'attribut border="0" pour qu'aucune bordure ni quadrillage ne soient affichés, ainsi que l'attribut cellpadding="0" et cellspacing="0", pour que les différentes cellules du tableau se côtoient sans raccord. C'est important pour qu'il n'y ait pas de vide visible entre les surfaces colorées.

Étant donné qu'il s'agit d'un tableau qui s'étend sur toute une page, les colonnes désirées sont prédéfinies avec le repère <col> pour les navigateurs qui interprètent ce repère. Le tableau doit avoir deux colonnes dont la première doit avoir une largeur de 200 pixels. Cela doit être la colonne pour les liens de navigation. La deuxième colonne doit s'accorder le reste de la place disponible. Le tableau total doit occuper toute la largeur disponible - ce qui était mentionné par width="100%" dans le repère d'ouverture <table> du tableau parent.

De plus, la totalité du tableau parent reçoit à l'aide de bgcolor="#A050A0" une couleur d'arrière-plan violet mat. Ainsi, tous ses contenus reçoivent d'entrée cette couleur d'arrière-plan. Pour créer des surfaces d'une autre couleur dans le tableau d'autres mentions de couleur d'arrière-plan sont nécessaires pour les différentes cellules qui doivent recouvrir cette couleur d'arrière-plan globale.

La première cellule de la première rangée du tableau parent est en même temps la seule cellule de cette rangée ,étant donné que, par l'attribut colspan="2", on a obtenu que cette cellule s'étale sur deux colonnes. Le contenu de cette cellule est donc disponible pour la partie titre. Étant donné qu'on travaille avec cellpadding="0" et cellspacing="0", le contenu collerait, il est vrai, au bord extérieur du tableau, ce qui ne serait pas propre. C'est pourquoi on met déjà en œuvre pour le titre et ce pour la première fois la technique du tableau dans le tableau:
<table border="0" cellpadding="10" cellspacing="0"> définit dans la cellule qui s'étend sur deux colonnes, un autre tableau. Celui-ci aussi est sans bordure (border="0"). Par cellpadding="10" un espace intérieur de 10 pixels du bord de la cellule est imposé. C'est la raison particulière qui justifie le tableau intérieur car le tableau intérieur n'a qu'une rangée avec une seule colonne, donc une seule cellule, où est noté le titre de la page h1 (Bienvenue). Le titre reçoit à l'aide de la propriété CSS color: une couleur blanche pour qu'il se distingue bien de l'arrière-plan violet du tableau.

Dans la deuxième ligne du tableau parent, est définie une rangée pour chacune des deux colonnes définies. La première cellule (gauche) est alors le conteneur pour toute la colonne de gauche - à savoir pour la colonne où sont placés les liens de navigation. La deuxième cellule (droite) est le conteneur pour tout le contenu du passage principal, à savoir du passage pour le contenu de la page proprement-dit. La deuxième cellule, donc celle pour le passage principal, se voit affecter avec l'attribut bgcolor="#FFFFFF" la couleur blanche comme couleur de fond. Ainsi en fin de compte, se crée l'effet d'optique selon lequel la page contiendrait une barre de couleur en haut et une autre à gauche tandis que tout le reste de la page a une couleur d'arrière-plan blanche.

Dans les deux cellules de la deuxième rangée du tableau parent, est défini à nouveau un tableau intérieur pour chacune d'entre elles, pour lesquels les mêmes attributs que pour le titre ménageront un espace bien propre avec la bordure. Ainsi les contenus seront-ils bien alignés à la même hauteur. Avec valign="top" on s'assure que dans les deux cellules les contenus qui peuvent être bien sûr de taille différente, seront en tout cas alignés en haut.

Les liens dans la colonne de gauche, ressortent bien par leurs couleurs définies globalement pour tout le fichier sur la couleur violette d'arrière plan. Le texte normal dans la colonne de gauche, à savoir les titres, les paragraphes de texte etc. reçoivent dans l'exemple. grâce aux CSS, une couleur de texte blanche pour bien ressortir sur l'arrière-plan.

Attention:

Vous pouvez recourir aux feuilles de style beaucoup plus que dans l'exemple ci-dessus. Pour employer des feuilles de style CSS, il vous faut d'abord savoir comment définir des formats CSS. Ensuite, vous serez en mesure d'appliquer les propriétés CSS. En relation avec ce qui vient d'être décrit les données de feuilles de style suivantes sont aussi intéressantes:
formatage de la police
alignement et paragraphes
espaces marges extérieures
espace intérieur
bordures
couleurs et images d'arrière plan
Positionnement et affichage d'éléments


	Tableaux et moyens non visuels
	Titres d'un tableau et alignement

SELFHTML/Aides à la navigation

HTML/XHML

Tableaux