Quelques bases sur les tableaux

S'il n'est plus question d'utiliser des tableaux pour la mise en page d'un site, il est parfaitement légitime de les utiliser pour ce pour quoi ils ont été conçus, c'est à dire l'affichage de données tabulaires.

Les trois éléments de base suivants suffisent pour réaliser des tableaux en code html :

• <table> : l'élément qui définit le tableau.
• <tr> pour table row, l'élément qui définit une ligne du tableau.
• <td> pour table data, l'élément qui définit une des cellules contenues dans les lignes du tableau.
• En outre, dans l'application qui suivra ce tuto, nous utiliserons :
  • L'élément <th> pour table head qui identifie une cellule de titre.
  • L'élément <caption> qui définit le titre ou légende du tableau

On pourrait mentionner également les éléments <tbody> , <thead> , <tfoot> ou <colgroup> , mais je ne souhaite pas aller plus loin dans cet exposé, car la littérature dans ce domaine est particulièrement abondante sur internet.

Si vous souhaitez approfondir vos connaissances sur les tableaux, je vous recommande après un bref tour d'horizon de la ressource existante, de consulter l'article qui m'a paru très complet de .

Et pour vous présenter plus en détail et sous une forme concise les principaux éléments avec lesquels ont réalise des tableaux, qui y a-t-il de plus approprié qu'un tableau?

mise en oeuvre du code html

Lors de l'affichage d'un tableau, les éléments <td> ou <th> s'alignent horizontalement, avec un comportement équivalent, à un comportement flottant, dans l'élément <tr> qui lui n'est pas affiché.

Une des difficultés pour le concepteur est de percevoir dans le code la hiérarchie des ensembles <tr>, <td> ou <th> et l'existence et les limites de ces lignes.

La perception de la la ligne est d'autant plus difficile qu'il y a beaucoup d'éléments et le recours à une indentation rigoureuse est l'unique moyen d'avoir dans le code une bonne perception de l'architecture d'un tableau.

Avec un code fût-il bien rédigé et bien indenté, ne vous attendez cependant pas à voir apparaître sur votre écran un superbe quadrillage. Comme tous les autres éléments html, le tableau ne se manifeste que si on le dote :

dimensionnement et stylage

Les propriétés des tableaux peuvent être définies par deux méthodes :

1. Soit par des attributs placés dans les balises ouvrantes des éléments, c'est ce type de code très lourd qui est généré automatiquement quand vous réalisez un tableau avec DreamWeaver.
   Cette méthode archaïque est fortement déconseillée, cependant certaines propriétés particulières aux tableaux ne peuvent être exprimées qu'en recourant à des attributs.
2. Les éléments constitutifs des tableaux acceptent la plupart des propriétés de dimensions et de stylage communes aux autres éléments. L'élément <table> peut recevoir en outre la propriété spécifique, border-spacing, qui définit l'espacement entre les cellules. Toutes ces propriétés peuvent être atribuées aux éléments des tableaux par le code CSS, c'est la méthode que nous allons utiliser.

Les propiétés propres aux tableaux

border-spacing

Les navigateurs attribuent par défaut à border-spacing une valeur variable selon leur feuille de style propre. Ce border-spacing par défaut peut être supprimé en lui attribuant la valeur 0.
Sinon la valeur de l'espace entre cellules peut être exprimée dans les diverses unités acceptées par les css.

Sachez également, sans que cela soit un encouragement à l'utiliser, que l'attribut cellspacing="valeur" a un effet équivalent à border-spacing.

colspan

<table>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td colspan="3"> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
</table>

(Saut de colonnes dans notre belle langue) est un attribut qui ne peut avoir d'équivalent en css et permet de fusionner plusieurs cellules d'une même ligne.

L'attribut colspan doit être placé dans la balise ouvrante de la première des cellules de la ligne à fusionner avec pour valeur le nombre de cellules à fusionner. Exemple : <td colspan="3">.

Dans le cas d'une fusion de colonnes, on peut comprendre sans trop de difficulté, qu'à l'exception du premier des éléments fusionnés, il soit nécessaire de supprimer dans la ligne les balises correspondant aux autres éléments <td> ou <td> fusionnés.

rowspan

<table>
<tr>
<td> </td><td rowspan="3"> </td><td> </td>
</tr>
<tr>
<td> </td>                                          <td> </td>
</tr>
<tr>
<td> </td>                                          <td> </td>
</tr>
</table>

(Saut de lignes dans notre belle langue) est un attribut qui ne peut avoir d'équivalent en css et permet de fusionner plusieurs cellules d'une même colonne.

L'attribut rowspan doit être placé dans la balise ouvrante de la première des cellules de la colonne à fusionner avec pour valeur le nombre de cellules à fusionner. Exemple : <td rowspan="2">.

Dans le cas d'une fusion de lignes, il est également nécessaire, à l'exception du premier des éléments fusionnés, de supprimer les balises correspondant aux autres éléments <td> ou <td> fusionnés des lignes situées en dessous.

Il est rare que, dans le code, l'on puisse positionner les éléments de manière aussi évidente que dans l'exemple ci-dessus.

Il est donc un petit peu plus difficile, que dans le cas d'une fusion de colonnes, de comprendre quels sont les éléments à supprimer et de les repérer dans le code.

Association de colspan et de rowspan

Les attributs rowspan et colspan peuvent être associés pour fusionner des cellules à la fois en lignes et en colonnes.

rowspan et colspan doivent être placés dans la balise ouvrante de la première des cellules en haut et à gauche du bloc à fusionner. Exemple : <td rowspan="2" colspan="2">.

Exemple de tableau

<caption>   titre du Tableau   <caption>

titre Col 1 Ligne1	titre Col 2	titre Col 3	titre Col 4	titre Col 5
titre Ligne 2	Cellule Li2 Col2	Cellule Li2 Col3	Cellule Li2 Col4	Cellule Li2 Col5
titre Ligne 3	Cellule Li3 Col2	colspan="3" : Fusion Cellules Li3 Col3 à Col 5
titre Ligne 4	rowspan="4" : Fusion Cellules Li4 à Li7 Col2	Cellule Li4 Col3	Cellule Li4 Col4	Cellule Li4 Col5
titre Ligne 5		Cellule Li5 Col3	Cellule Li5 Col4	Cellule Li5 Col5
titre Ligne 6		Cellule Li6 Col3	colspan="2" rowspan="2" : Fusion Cellules Li6 col4 à Li7 Col5
titre Ligne 7		Li7 Col3