Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Syntaxe XHTML des tableaux

Syntaxe XHTML des tableaux

Depuis le début j'ai évité de parler des tableaux, jusqu'à ce qu'on apprenne tous les outils requis, à savoir les propriétés CSS, surtout border (la propriété CSS border : bordure), padding (la propriété CSS padding : remplissage ou espacement interne), margin (la propriété CSS margin : marge), les propriétés d'arrière-plan (la propriété CSS background) et les alignements du texte (les propriétés CSS : text-align et vertical-align). Maintenant qu'on est armés jusqu'aux dents, on va régler le compte à ces maudits tableaux tableaux

Syntaxe XHTML de Tableaux basiques (balises : table, tr et td)

Préparer vous à encaisser tout un paquet de nouvelles balises tableaux Bon, sachez tout d'abord que chaque tableau commence par la balise ouvrante <table> et se termine par la balise de fermeture </table>. Jusqu'à maintenant tout est bien, mais pas suffisant. Il faut aussi spécifier le nombre de lignes et de colonnes qu'il doit avoir. Pour cela deux autres balises on été conçues :

Règles d'imbrication propres aux balises : table, tr et td

J'ai pris l'habitude de passer automatiquement aux règles d'imbrication, une fois la syntaxe XHTML mentionnée, et ce pour vous faire apprendre de bonnes pratiques de codage XHTML. Donc prière de respecter toujours les règles d'imbrication, sous peine d'avoir un document XHTML non valide.

La balise table

La balise table peut être placée dans les éléments XHTML : blockquote, body, button, dd, de, div, fieldset, form, ins, li, map, noframes, noscript, object, td et th.

La balise table peut contenir les éléments suivants :

<!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
<!ELEMENT caption %Inline;>
<!ELEMENT thead (tr)+>
<!ELEMENT tfoot (tr)+>
<!ELEMENT tbody (tr)+>
<!ELEMENT colgroup (col)*>
<!ELEMENT col EMPTY>
<!ELEMENT tr (th|td)+>
<!ELEMENT th %Flow;>
<!ELEMENT td %Flow;>

Comme vous pouvez le lire dans l'extrait du DTD strict : la balise table peut contenir les éléments suivants :
caption (facultatif), col ou colgroup (facultatif), thead (facultatif), tfoot (facultatif), tbody ou tr. La syntaxe (tbody+|tr+) veut dire que vous avez le choix entre un ou plusieurs éléments tbody, ou bien un ou plusieurs éléments tr. Dans le cas où vous optez pour tbody, vous devez y mettre quand même des 'tr' (<!ELEMENT tbody (tr)+>).

Voici une petite illustration d'un tableau simpliste :les tableaux XHTML : balises table, td et tr

Comme vous pouvez le constater : un tableau est composé de lignes (tr : table row). Chaque ligne est subdivisée en cases destinées à recevoir des données (td : table data), Le code source de ce tableau est le suivant :

<table><!--balise qui indique le début du tableau-->
  <tr><!--balise qui indique le début de la première ligne du tableau-->
   <td>html</td> <!--1ère case de la première ligne du tableau-->
   <td>CSS</td> <!--2ème case de la première ligne du tableau-->
  </tr> <!--balise marquant la fin de la première ligne du tableau-->
  <tr> <!--début de la deuxième ligne du tableau-->
   <td>javascript</td> <!--1ère case de la deuxième ligne du tableau-->
   <td>php</td> <!--2ème case de la deuxième ligne du tableau-->
  </tr> <!--fin de la deuxième ligne-->
  <tr> <!--début de la 3ème ligne du tableau-->
   <td>vbscript</td> <!--case 1 ligne 3-->
   <td>asp</td> <!--case 2 ligne 3-->
  </tr> <!--fin de la 3ème ligne du tableau-->
</table><!--balise de clôture du tableau-->

J'espère que vous avez compris parce que je ne peux pas vous expliquez davantage. Mais retenez qu'à chaque fois que vous voulez insérer une nouvelle ligne dans le tableau, vous devez ajoutez les balises <tr></tr>, qui vont à leur tour recevoir les balises <td></td>.

Chaque paire des deux balises <td> </td> créé une case dans une ligne de tableau. Vous pouvez en insérer autant que vous voulez entre les balises <tr></tr>. Mais sachez que le nombre de cases (<td>) que vous définissez dans la première ligne (le premier tag <tr>), détermine le nombre de colonnes que va avoir le tableau. Par la suite vous serez amenés à mentionner le même nombre de cases pour le reste des lignes

Avant de continuer je tiens à vous signaler que l'apparence de ce tableau a été sollicitée avec des styles CSS, en voici un aperçu :

table {
border: 4px outset black; /* apparence du quadrillage externe du tableau */
border-collapse: collapse; /* elle accepte deux valeurs : 'collapse' signifie
que les bordures seront collées, 'separate' veut dire que les bordures
seront séparées, de manière à ce que les cases du tableau apparaissent dissociées */
}
td {
border: 2px solid red; /* apparence du quadrillage interne du tableau */
padding: 10px; /* l'espacement interne des cases */ 
text-align: center; /* le texte sera centré horizontalement dans la case */
} 

Si je ne me suis pas servi des CSS, mon tableau serait invisible car les bordures n'apparaîtront pas. Je vais pas vous citer toutes les propriétés applicables aux tableaux, mais on va seulement se consacrer au code XHTML pour le moment. Le côté CSS sera abordé ultérieurement (formatage des tableaux avec les CSS).

La balise tr

Revenez à l'extrait du DTD strict, vous allez trouvez qu'un 'tr' ne peut contenir que les éléments XHTML 'td' ou 'th' (<!ELEMENT tr (th|td)+>) et ne peut être placé que dans les éléments XHTML : table, tbody, tfoot ou thead.

La balise td

La balise 'td' ne peut être placée que dans l'élément XHTML 'tr', mais elle peut contenir toute sorte d'élément de type bloc ou en-ligne : un autre tableau, un paragraphe, du texte nu, une image etc. Ne vous inquiétez pas, les autres balises tbody, tfoot, thead, th, caption seront traitées dans les chapitres à venir

Les tableaux XHTML : présentation des données tabulaires contre mise en page

D'après bon nombre de webmasters les tableaux servent à placer des éléments à des endroits biens précis et de réaliser des alignements délicats. L'astuce consiste à insérer des données dans des tableaux invisibles, c'est-à-dire sans quadrillage (bordures), et puis de réaliser des positionnements plus ou moins avancés grâce aux propriétés CSS ou attributs XHTML de hauteur et largeur (width et height). Comme ça l'internaute ne se rendra pas compte qu'il s'agit de tableaux. Par défaut les balises <table> <tr> <td> ou <th> créent des tableaux sans quadrillage. Pour le faire apparaître vous devez passer par les CSS.

Personnellement, je ne souscris pas à cette idée, car le même effet peut être sollicité par les CSS et de manière plus avantageuse :

Recourir aux tableaux pour disposer et mettre en page le contenu du document est une technique antique et laborieuse, et doit par voie de conséquence disparaître à tout jamais. Cette astuce nuit à la sémantique, l'accessibilité, et en plus elle rend plus pénible les mises à jour, du fait que la mise en forme a été incorporée dans le contenu de la page. Ce qui implique que vous devez ouvrir toutes les pages de votre site pour les modifier l'une après l'autre.

Selon le dicton appelé communément 'le respect de la sémantique', qui stipule que chaque balise doit être utilisée en fonction du sens qu'elle porte. Les tableaux ne doivent être utilisés que pour représenter des données tabulaires (statistiques etc.). D'un autre point de vue, les tableaux sont destinés comme toutes les autres balises xhtml à structurer le document, la présentation étant confiée aux CSS.

Dans le chapitre suivant on va créer des tableaux plus avancés grâce aux balises XHTML caption (légende) et th (table header : en-tête).

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau