HTML => les tables

Introduction

L'élément HTML <table> permet aux auteurs Web d'afficher des données tabulaires (telles que du texte, des images, des liens, d'autres tables, etc.) dans un tableau à deux dimensions comportant des lignes et des colonnes de cellules.

Syntaxe

<table></table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<tr></tr>
<th></th>
<td></td>

Remarques

Les différents éléments de la table et leurs attributs de contenu définissent ensemble le modèle de table. L'élément <table> est l'élément conteneur pour les modèles de tableau / données tabulaires. Les tableaux ont des lignes, des colonnes et des cellules données par leurs descendants. Les lignes et les colonnes forment une grille; Les cellules d'une table doivent couvrir complètement cette grille sans se chevaucher. La liste ci-dessous décrit les différents éléments du modèle de tableau:

<table> - Elément conteneur pour les modèles de tableau / données tabulaires. <table> représente des données avec plusieurs dimensions sous la forme d'une table.
<caption> - Légende ou titre du tableau (comme une figcaption sur une figure )
<col> - Une colonne (un élément sans contenu)
<colgroup> - Un regroupement de colonnes
<thead> - En-tête de tableau (un seul)
<tbody> - Corps / contenu de la table (plusieurs sont corrects)
<tfoot> - <tfoot> de page (un seul)
<tr> - Rangée de table
<th> - Cellule d'en-tête de table
<td> - Cellule de données de table

Sémantiquement, les tableaux sont destinés à contenir des données tabulaires. Vous pouvez le voir comme un moyen d’afficher et de décrire des données qui auraient du sens dans une feuille de calcul (colonnes et lignes).

L'utilisation de tableaux pour la mise en page n'est pas recommandée. Au lieu de cela, utilisez les règles CSS pour la mise en page et le formatage, y compris l' display: table .

Une exception notable dans l'industrie concernant l'utilisation de la mise en page <table> concerne le courrier électronique HTML: certains clients de messagerie, y compris Outlook, sont revenus aux anciens moteurs de rendu après que Microsoft a perdu son monopole par rapport à l'UE. Afin que Microsoft ne fasse pas partie d'IE, ils ont simplement restauré le moteur de rendu Outlook dans une version antérieure de Trident. Ce retour en arrière ne prend tout simplement pas en charge les technologies Web modernes. L'utilisation de mises en page basées sur <table> pour les courriers électroniques HTML est la seule façon de garantir la compatibilité entre les navigateurs, les plates-formes et les clients.

Tableau simple

<table>
  <tr>
    <th>Heading 1/Column 1</th>
    <th>Heading 2/Column 2</th>
  </tr>
  <tr>
    <td>Row 1 Data Column 1</td>
    <td>Row 1 Data Column 2</td>
  </tr>
  <tr>
    <td>Row 2 Data Column 1</td>
    <td>Row 2 Data Column 2</td>
  </tr>
</table>

Cela rendra une <table> composée de trois lignes au total ( <tr> ): une ligne de cellules d’en-tête ( <th> ) et deux lignes de cellules de contenu ( <td> ). <th> éléments <th> sont des en-têtes tabulaires et les éléments <td> sont des données tabulaires . Vous pouvez mettre ce que vous voulez dans un <td> ou <th> .

Rubrique 1 / Colonne 1	Rubrique 2 / Colonne 2
Rangée 1 Données Colonne 1	Rangée 1 Données Colonne 2
Ligne 2 Données Colonne 1	Ligne 2 Données Colonne 2

Répartir des colonnes ou des lignes

Les cellules de tableau peuvent couvrir plusieurs colonnes ou lignes à l'aide des attributs colspan et rowspan . Ces attributs peuvent être appliqués aux éléments <th> et <td> .

<table>
    <tr>
        <td>row 1 col 1</td>
        <td>row 1 col 2</td>
        <td>row 1 col 3</td>
    </tr>
    <tr>
        <td colspan="3">This second row spans all three columns</td>
    </tr>
    <tr>
        <td rowspan="2">This cell spans two rows</td>
        <td>row 3 col 2</td>
        <td>row 3 col 3</td>
    </tr>
    <tr>
        <td>row 4 col 2</td>
        <td>row 4 col 3</td>
    </tr>

</table>

Aura pour résultat

Notez que vous ne devez pas concevoir une table où les lignes et les colonnes se chevauchent car il ne s'agit pas d'un code HTML valide et que le résultat est traité différemment par les différents navigateurs Web.

rowspan = Un entier non négatif qui spécifie le nombre de lignes couvertes par une cellule. La valeur par défaut de cet attribut est un ( 1 ). Une valeur de zéro ( 0 ) signifie que la cellule s'étendra de la ligne en cours jusqu'à la dernière ligne de la table ( <thead> , <tbody> ou <tfoot> ).

colspan = Un entier non négatif qui spécifie le nombre de colonnes couvertes par la cellule en cours. La valeur par défaut de cet attribut est un ( 1 ). Une valeur de zéro ( 0 ) signifie que la cellule s'étendra du courant à la dernière colonne du groupe de colonnes <colgroup> dans lequel la cellule est définie.

Tableau avec thead, tbody, tfoot et légende

HTML fournit également les tables avec les éléments <thead> , <tbody> , <tfoot> et <caption> . Ces éléments supplémentaires sont utiles pour ajouter de la valeur sémantique à vos tables et pour fournir une place à un style CSS distinct.

Lorsque vous imprimez un tableau qui ne rentre pas sur une seule page (papier), la plupart des navigateurs répètent le contenu de <thead> sur chaque page.

Il y a un ordre spécifique à respecter, et nous devrions être conscients que tous les éléments ne sont pas en place comme on pourrait s'y attendre. L'exemple suivant montre comment nos 4 éléments doivent être placés.

<table>
 <caption>Table Title</caption> <!--| caption is the first child of table |-->
  <thead> <!--======================| thead is after caption |-->
    <tr>
      <th>Header content 1</th> 
      <th>Header content 2</th>
    </tr>
  </thead>

  <tbody> <!--======================| tbody is after thead |-->
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  
  <tfoot><!--| tfoot can be placed before or after tbody, but not in a group of tbody. |-->         <!--| Regardless where tfoot is in markup, it's rendered at the bottom. |-->                                                                                                                                                                                                                                                                                               
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>

</table>

Les résultats de l'exemple suivant sont démontrés deux fois: la première table ne contient aucun style, la deuxième table a quelques propriétés CSS appliquées: background-color , color et border *. Les styles sont fournis à titre de guide visuel et ne constituent pas un aspect essentiel du sujet traité.

Élément	Styles S'applique
`<caption>`	Texte jaune sur fond noir.
`<thead>`	Texte en gras sur fond violet.
`<tbody>`	Texte sur fond bleu.
`<tfoot>`	Texte sur fond vert.
`<th>`	Frontières orange
`<td>`	Les frontières rouges

Groupes de colonnes

Vous souhaiterez parfois appliquer un style à une colonne ou à un groupe de colonnes. Ou à des fins sémantiques, vous pouvez souhaiter regrouper des colonnes. Pour ce faire, utilisez les éléments <colgroup> et <col> .

La <colgroup> facultative <colgroup> vous permet de regrouper des colonnes. <colgroup> éléments <colgroup> doivent être des éléments enfants d'un <table> et doivent venir après tout élément <caption> et avant tout contenu de table (par exemple, <tr> , <thead> , <tbody> , etc.).

<table>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    ...
</table>

La <col> facultative <col> vous permet de référencer des colonnes individuelles ou une plage de colonnes sans appliquer un regroupement logique. <col> éléments <col> sont facultatifs, mais s'ils sont présents, ils doivent se trouver dans un élément <colgroup> .

<table>
    <colgroup>
        <col id="MySpecialColumn" />
        <col />
    </colgroup>
    <colgroup>
        <col class="CoolColumn" />
        <col class="NeatColumn" span="2" />
    </colgroup>
    ...
</table>

Les styles CSS suivants peuvent être appliqués aux éléments <colgroup> et <col> :

border
background
width
visibility
display (comme dans l' display: none )
- display: none; va effectivement supprimer les colonnes de l'affichage, provoquant le rendu de la table comme si ces cellules n'existaient pas

Pour plus d'informations, voir Données tabulaires HTML5 .

Champ d'application

th éléments sont très couramment utilisés pour indiquer rubriques pour les lignes de table et colonnes, comme suit:

<table>
    <thead>
        <tr>
            <td></td>
            <th>Column Heading 1</th>
            <th>Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Row Heading 2</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Cela peut être amélioré pour l'accessibilité en utilisant l'attribut scope . L'exemple ci-dessus serait modifié comme suit:

<table>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Column Heading 1</th>
            <th scope="col">Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

scope est un attribut énuméré , ce qui signifie qu'il peut avoir une valeur à partir d'un ensemble spécifique de valeurs possibles. Cet ensemble comprend:

col
row
colgroup
rowgroup

Les références:

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

HTML
les tables

Recherche…