Les tableaux

Les marqueurs que l'on a vu jusqu'à présent permettent une mise en page peu performante. Le fait de savoir comment faire des tableaux permettra de bien améliorer l'aperçu de la page.

Nous allons voir les aspects suivants :

• Structure générale
• Tableaux avec En-têtes
• Définition de la taille du tableau et de ses cellules
• Alignement du tableau
• Alignement du contenu des cellules
• "Fusionner" des cellules
• Ajouter un titre au tableau
• Définition de la couleur du tableau
• Définition des bordures des tableaux

Structure générale

Un tableau se présente sous la forme suivante :

<table> <!-- Définition d'un tableau -->
<tr> <!-- Définition de la première ligne -->
      <td>Texte de la premiere case de la premiere ligne</td>
      <td>Texte de la deuxieme case de la premiere ligne</td>
</tr> <!-- Définition d'une seconde ligne -->
<tr>
      <td>Texte de la premiere case de la deuxieme ligne</td>
      <td>Texte de la deuxieme case de la deuxieme ligne</td>
</tr>
</table>

Tableaux avec En-têtes

Les en-têtes de tableau sont mis en valeurs. Ces en-têtes correspondent en général à un titre de colonne ou de ligne. Pour marquer une en-tête, utilisez le marqueur <th> au lieu du marqueur <td>.

Exemple :

<table> <!-- Définition d'un tableau -->
<tr> <!-- Définition de la première ligne -->
      <th>Intitule premiere colonne</th>
      <th>Intitule deuxieme colonne</th>
</tr>
<tr>
      <td>Texte de la premiere case de la deuxieme ligne</td>
      <td>Texte de la deuxieme case de la deuxieme ligne</td>
</tr>
<tr>
      <td>Texte de la premiere case de la troisieme ligne</td>
      <td>Texte de la deuxieme case de la troisieme ligne</td>
</tr>
</table>

Définition de la taille du tableau et de ses cellules

Pour définir la largeur totale du tableau, renseigner l'attribut WIDTH du marqueur <TABLE>. La valeur associée à WIDTH est soit définie en % de la fenêtre, soit en pixels.

Pour définir la largeur de chaque cellule ou la largeur d'une colonne, il faut renseigner l'attribut WIDTH du marqueur <TR>. La valeur associée à WIDTH est soit définie en % de la largeur totale du tableau, soit en pixels.

Exemple :

<table WIDTH="700"> <!-- Définition d'un tableau -->
<tr> <!-- Définition de la première ligne -->
      <th WIDTH="65%">Intitule premiere colonne</th>
      <th WIDTH="35%">Intitule deuxieme colonne</th>
</tr>
<tr>
      <td>Texte de la premiere case de la deuxieme ligne</td>
      <td>Texte de la deuxieme case de la deuxieme ligne</td>
</tr>
<tr>
      <td>Texte de la premiere case de la troisieme ligne</td>
      <td>Texte de la deuxieme case de la troisieme ligne</td>
</tr>
</table>

                        

Rubriques :

Documentations :

Liens utiles :