01- Les tableaux

Semaine 4

4. Les tableaux

 

4.1 Structurer du contenu à l’aide des tableaux

Voici un exemple de tableau (avec CSS) :

Les balises d’un tableau
balise type description attributs
<table> bloc Conteneur renfermant les autres balises de tableau

border (dépréciée mpratiqueais lors de la conception)

<caption> bloc titre d’une table  

 

Voici le code html :

<table>

<caption> Les balises d’un tableau </caption>

<thead>
<tr>
<th>balise</th>
<th>type</th>
<th>description</th>
<th>attributs</th>
</tr>
</thead>

<tbody>

<tr>
<td class= »tableau_td »>&lt;table&gt;</td>
<td>bloc</td>
<td>Conteneur renfermant les autres balises de tableau </td>
<td>summary
border <em>(dépréciée mais pratique lors de la conception) </em></td>
</tr>

<tr>
<td class= »tableau_td »>&lt;caption&gt;</td>
<td>bloc</td>
<td> titre d’une table</td>
<td>&nbsp;</td>
</tr>

</tbody>
</table>

    4,2 Explication des balises

    Exemple sans mise en forme

     

    Voici l’explication des balises utilisées :

    <table>

    La balise <table>
    L’élément essentiel dans la création de tableaux est <table>, c’est lui le conteneur qui renferme tous les éléments d’un tableau. C’est une balise de type Bloc, il est donc inséré directement dans le corps du document. 

     

     

    <caption> Les balises d’un tableau </caption>

    La balise <caption>
    Cette balise est utilisée pour attribuer un titre général pour le tableau. Il sera situé au-dessus du tableau. 

     

    <thead>
    <tr>
    <th>balise</th>
    <th>type</th>
    <th>description</th>
    <th>attributs</th>
    </tr>
    </thead>

    La balise <thead>
    la balisea<thead>(non obligatoire), sert à structurer l’information de l’en-tête du tableau.

    La balise <tr>sera utilisée lorsque l’on veut déclarer une ligne d’un tableau.

    La balise <th> C’est une cellule d’en-tête qui sera utilisée lorsque l’on veut déclarer un titre d’une colonne ou d’une ligne.

    retou vers haut de page

     

    <tbody>

    <tr>
    <td class= »tableau_td »>&lt;table&gt;</td>
    <td>bloc</td>
    <td>Conteneur renfermant les autres balises de tableau </td>
    <td>summary
    border <em>(d&eacute;pr&eacute;ci&eacute;e mais pratique lors de la conception) </em></td>
    </tr>

    <tr>
    <td class= »tableau_td »>&lt;caption&gt;</td>
    <td>bloc</td>
    <td> titre d’une table</td>
    <td>&nbsp;</td>
    </tr>

    </tbody>

    La balise <tbody>
    la balisea<tbody>(non obligatoire), sert à structurer l’information du corps du tableau.

    La balise <tr>sera utilisée lorsque l’on veut déclarer une ligne d’un tableau.

    La balise <td>sera utilisée lorsque l’on veut déclarer une cellule. 

     

    </table>

    La balise </table>
    Si vous ne connaissez pas la signification… Voir cours 01…

     

    1.5 Quelques règles d’écriture du HTML

     

    1. Écrire les noms de balise en bas de casse (minuscules).
    2. Écrire les noms d’attribut en bas de casse (minuscules).
    3. Refermer toute balise ouvrante avec une balise de fin. (<h2> 2.1 Signification des acronymes <img/>).
    4. Terminer toute balise vide avec une barre oblique précédée d’une espace (<img /> et non <img>).
    5. Encadrer les valeurs d’attribut de guillemets droits.
    6. Expliciter les valeurs d’attribut (<input … checked= »checked » /> et non <input … checked>).
    7. Remplacer l’identificateur partiel NAME par ID.
    8. Assortir toute image d’un attribut ALT, même de valeur nulle.