Pas encore membre ? Enregistrez-vous ! | Identifiants égarés ?
Fermer

Les tableaux

  • Introduction
  • Informations
En XHTML les tableaux sont utilisés pour afficher des donnés.
Vous apprendrez dans ce cours à construire correctement ces tableaux.  
Netger
  • Auteur : Netger
  • Publication : 7 juil. 2007 11:51
  • Consultations : 2152
 

1. Des tableaux pour classer les données...

En XHTML les tableaux sont des éléments de type bloc composés de cellules disposées en lignes et en colonnes.
Les tableaux ont très souvent été utilisés pour structurer une page Web mais cette façon de faire alourdie énormément les pages et n'est pas conforme aux nouvelles normes du Web.
Il convient donc de réserver l'utilisation des tableaux aux classements de données afin de garder une sémantique correcte.

Voici le plan que nous suivront au cours de ce chapitre :
  • Structure de base d'un tableau
  • Titre d'un tableau
  • En-tête d'un tableau
  • Fusion des cellules (en ligne)
  • Fusion des cellules (en colonnes)
L'utilisation des tableaux n'est pas très compliquée à comprendre mais elle nécessite tout de même un peu de pratique pour être correctement maitrisée, n'hésitez donc pas à tester tout ça !!

2. Structure de base d'un tableau

Les tableaux, un peu comme les listes, sont composés de plusieurs balises.
La première permet de déclarer l'utilisation d'un tableau, c'est la balise <table> ... <table>

Comme nous l'avons noté plus haut un tableau est composé de lignes et de cellules :
  • la balise <tr> ... </tr> permet de déclarer une ligne
  • la balise <td> ... <td> permet de déclarer une cellule
Grâce à ces balises nous pouvons créer un tableau comme dans l'exemple suivant :
Code-source xhtml
  1. <table>
  2. 	<tr>
  3. 		<td>1</td>
  4. 		<td>2</td>
  5. 		<td>3</td>
  6. 	</tr>
  7. 	<tr>
  8. 		<td>4</td>
  9. 		<td>5</td>
  10. 		<td>6</td>
  11. 	</tr>
  12. 	<tr>
  13. 		<td>7</td>
  14. 		<td>8</td>
  15. 		<td>9</td>
  16. 	</tr>
  17. </table>
 
Vous pouvez ajouter à votre tableau autant de ligne que vous le souhaitez mais vous devez toujours déclarer le même nombre de cellules pour toutes les lignes !!

Si vous souhaitez afficher une cellule vide, utilisez le caractère d'espacement insécable :
Code-source xhtml
  1. <table>
  2. 	<tr>
  3. 		<td> </td>
  4. 		<td>2</td>
  5. 		<td>3</td>
  6. 	</tr>
  7. 	<tr>
  8. 		<td>4</td>
  9. 		<td> </td>
  10. 		<td>6</td>
  11. 	</tr>
  12. 	<tr>
  13. 		<td>7</td>
  14. 		<td>8</td>
  15. 		<td> </td>
  16. 	</tr>
  17. </table>
 

3. Titre d'un tableau

Vous pouvez ajouter des titres à vos tableaux de façon très simple en utilisant la balise <caption> ... </caption>

Cette dernière se place juste après la balise ouvrante :
Code-source xhtml
  1. <table>
  2. 	<caption>Titre</caption>
  3. 	<tr>
  4. 		<td>1</td>
  5. 		<td>2</td>
  6. 		<td>3</td>
  7. 	</tr>
  8. 	<tr>
  9. 		<td>4</td>
  10. 		<td>5</td>
  11. 		<td>6</td>
  12. 	</tr>
  13. 	<tr>
  14. 		<td>7</td>
  15. 		<td>8</td>
  16. 		<td>9</td>
  17. 	</tr>
  18. </table>
 

4. En-têtes d'un tableau

Les en-têtes vont vous permettre de nommer les lignes et les colonnes de votre tableau.
Afin d'indiquer leur utilisation vous devez utiliser la balise <th> ... </th> à la place d'une balise de cellule <td> ... </td>

Un exemple sera plus parlant :
Code-source xhtml
  1. <table>
  2. 	<tr>
  3. 		<th>Col 1</th>
  4. 		<th>Col 2</th>
  5. 		<th>Col 3</th>
  6. 	</tr>
  7. 	<tr>
  8. 		<td>1</td>
  9. 		<td>2</td>
  10. 		<td>3</td>
  11. 	</tr>
  12. 	<tr>
  13. 		<td>4</td>
  14. 		<td>5</td>
  15. 		<td>6</td>
  16. 	</tr>
  17. 	<tr>
  18. 		<td>7</td>
  19. 		<td>8</td>
  20. 		<td>9</td>
  21. 	</tr>
  22. </table>
 
Ou encore, vous pouvez faire un mixe des 2 types d'en-tête :
Code-source xhtml
  1. <table>
  2. 	<tr>
  3. 		<th> </th>
  4. 		<th>Col 1</th>
  5. 		<th>Col 2</th>
  6. 		<th>Col 3</th>
  7. 	</tr>
  8. 	<tr>
  9. 		<th>Row 1</th>
  10. 		<td>1</td>
  11. 		<td>2</td>
  12. 		<td>3</td>
  13. 	</tr>
  14. 	<tr>
  15. 		<th>Row 2</th>
  16. 		<td>4</td>
  17. 		<td>5</td>
  18. 		<td>6</td>
  19. 	</tr>
  20. 	<tr>
  21. 		<th>Row 3</th>
  22. 		<td>7</td>
  23. 		<td>8</td>
  24. 		<td>9</td>
  25. 	</tr>
  26. </table>
 

5. Fusion des cellules (en ligne)

Comme vous l'avez constaté la construction des tableaux n'est pas bien compliquée à comprendre mais tout cela est assez rigide n'est-ce-pas ?
Avoir un nombre de cellules identique sur chaque ligne n'est pas forcément adapté à ce que vous souhaitez faire...

Heureusement XHTML permet de fusionner les cellules des tableaux.
Intéressons-nous pour le moment à la fusion de cellules appartenant à une même ligne.
Il faut pour cela utiliser l'attribut "colspan" de la balise <td> ... </td>
Cet attribut prend pour valeur le nombre de cellules à fusionner.

Voici un exemple :
Code-source xhtml
  1. <table>
  2. 	<tr>
  3. 		<td>1</td>
  4. 		<td colspan="2">3</td>
  5. 	</tr>
  6. 	<tr>
  7. 		<td>4</td>
  8. 		<td>5</td>
  9. 		<td>6</td>
  10. 	</tr>
  11. 	<tr>
  12. 		<td>7</td>
  13. 		<td>8</td>
  14. 		<td>9</td>
  15. 	</tr>
  16. </table>
 
Vous remarquerez que la cellule 2 à complètement disparue suite à l'utilisation de l'attribut colspan.

6. Fusion des cellules (en colonnes)

Comme nous venons de le voir il est possible de fusionner les cellules d'une ligne donc vous vous doutez bien qu'il est également possible d'agir de la même façon sur les cellules d'une colonne.

Il faut cette fois utiliser l'attribut "rowspan" de la balise <td> ... </td>
Tout comme l'attribut "colspan" celui-ci prend également pour valeur le nombre de cellules à fusionner.

Voici un exemple :
Code-source xhtml
  1. <table>
  2. 	<tr>
  3. 		<td>1</td>
  4. 		<td rowspan="2">2</td>
  5. 		<td>3</td>
  6. 	</tr>
  7. 	<tr>
  8. 		<td>4</td>
  9. 		<td>6</td>
  10. 	</tr>
  11. 	<tr>
  12. 		<td>7</td>
  13. 		<td>8</td>
  14. 		<td>9</td>
  15. 	</tr>
  16. </table>
 
Vous remarquerez que cette fois c'est la cellule 5 qui à complètement disparue suite à l'utilisation de l'attribut rowspan.  
  • Rédiger un commentaire
  • Afficher les commentaires (0)
Vous devez être identifié pour poster un commentaire
Aucun commentaire