Balises XHTML > tableaux

Balises de tableaux

Les tableaux servent à présenter des données tabulaires ! Afin de dissocier la forme et le fond d'une page web, n'utilisez pas les tableaux pour présenter votre page web en XHTML 1.1. Le code en serait alourdit et complexifié

Si vous devez utiliser les tableaux pour présenter votre page, passez en XHTML 1.0 Transitionnal

Dans l'ordre d'apparition :

Code	But
<table> </table>	Marquent les limites d'un tableau : première et dernière balise du code d'un tableau
<colgroup> </colgroup>	Marquent les limites d'une définition de colonnes
<col span="x" width="200"/>	Permet d'appliquer des styles à des colonnes d'un tableau
<tr> </tr>	Marquent les limites d'une ligne du tableau
<th> </th>	Désignent les tîtres des colonnes et/ou des lignes les attributs rowspan et colspan indiquent à combien de lignes/colonnes la cellule doit appartenir
<td> </td>	Désignent les limites d'une cellule les attributs rowspan et colspan indiquent à combien de lignes/colonnes la cellule doit appartenir
<thead> </thead>	Renferme les lignes de l'en-tête du tableau Permet de créer des groupes de lignes avec des présentations différentes Très utile pour avoir des cadrillages différents Attention à l'ordre : thead tfoot tbody
<tfoot> </tfoot>	Renferme les lignes du pied du tableau Permet de créer des groupes de lignes avec des présentations différentes Très utile pour avoir des cadrillages différents Attention à l'ordre : thead tfoot tbody
<tbody> </tbody>	Renferme les lignes du corps du tableau Permet de créer des groupes de lignes avec des présentations différentes Très utile pour avoir des cadrillages différents Attention à l'ordre : thead tfoot tbody

Exemples de tableaux

Exemple simple

<table summary="exemple simple">
    <tr>
        <th>&#160;</th>
        <th>Colonne 1</th>
        <th>Colonne 2</th>
    </tr>
    <tr>
        <th>Ligne 1</th>
        <td>contenu</td>
        <td>contenu</td>
    </tr>
    <tr>
        <th>Ligne 2</th>
        <td>contenu</td>
        <td>contenu</td>
    </tr>
</table>

	Colonne 1	Colonne 2
Ligne 1	contenu	contenu
Ligne 2	contenu	contenu

Le caractère   (espace insécable) permet que certains navigateurs n'oublient pas la cellule

Exemple d'utilisation de colgroup et th

<table summary="exemple de col et th">
    <colgroup>
        <col style="background-color:#FFFED0;color:black;"/>
        <col span="4" style="background-color:#F4E8F5;color:black;"/>
    </colgroup>
    <tr>
        <th>&#160;</th>
        <th>colonne 1</th>
        <th>colonne 2</th>
        <th>colonne 3</th>
        <th>colonne 4</th>
    </tr>
    <tr>
        <th>ligne 1</th>
        <td>Contenu 1.1</td>
        <td>Contenu 1.2</td>
        <td>Contenu 1.3</td>
        <td>Contenu 1.4</td>
    </tr>
</table>

	colonne 1	colonne 2	colonne 3	colonne 4
ligne 1	Contenu 1.1	Contenu 1.2	Contenu 1.3	Contenu 1.4

Le caractère   (espace insécable) permet que certains navigateurs n'oublient pas la cellule

Colspan et rowspan

Ces attributs permettent de fusionner des cellules (en fait on en élargit une)

<table summary="exemple de colspan">
    <tr>
        <td colspan="3" >Date</td>
    </tr>
    <tr>
        <td>jour</td>
        <td>mois</td>
        <td>année</td>
    </tr>
</table>

Date
jour	mois	année

<table summary="exemple de rowspan">
    <tr>
        <td rowspan="3">Date</td>
        <td>Jour</td>
    </tr>
    <tr>
        <td>mois</td>
    </tr>
    <tr>
        <td>année</td>
    </tr>
</table>

Date	Jour
	mois
	année

Utilisation de thead tfoot et tbody

<table summary="exemple thead tfoot tbody">
    <thead style="font-weight:bold;">
        <tr>
            <td>Head 1.1</td>
            <td>Head 1.2</td>
            <td>Head 1.3</td>
        </tr>
        <tr>
            <td>Head 2.1</td>
            <td>Head 2.2</td>
            <td>Head 2.3</td>
        </tr>
    </thead>
    <tfoot style="font-style:italic;">
        <tr>
            <td>Pied 1.1</td>
            <td>Pied 1.2</td>
            <td>Pied 1.3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Corps 1.1</td>
            <td>Corps 1.2</td>
            <td>Corps 1.3</td>
        </tr>
            <tr>
            <td>Corps 2.1</td>
            <td>Corps 2.2</td>
            <td>Corps 2.3</td>
        </tr>
    </tbody>
</table>

Head 1.1	Head 1.2	Head 1.3
Head 2.1	Head 2.2	Head 2.3
Pied 1.1	Pied 1.2	Pied 1.3
Corps 1.1	Corps 1.2	Corps 1.3
Corps 2.1	Corps 2.2	Corps 2.3