table facebook twitter youtube

La balise <table>

 

Est  très utilisé dans les pages web. Un élément <table> est destiné à contenir des données tabulaires,grâce à son découpage en lignes et cellules complètement paramétrables. Il est nécessaire d'utiliser au minimum les balises <tr> et <td> pour mettre en forme les éléments à afficher dans la table. D'autres balises peuvent structurer la table, Entre la balise ouvrante <table> et la balise fermante </table>, peuvent être placés :

 

Style par défaut

 


table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

 

Modèles de contenu autorisés Un élément


<caption> optionnel, suivi par zéro ou plusieurs <colgroup>, suivis par un élément <thead> optionnel, suivi par un <tfoot>, suivi par zéro ou plusieurs <tbody> ou un ou plusieurs <tr> ou zéro ou plusieurs <tbody> ou un ou plusieurs <tr>, suivis par un <tfoot>.

 

Chaque élément <tr> représente une ligne de la table, qui contient elle-même un ou plusieurs <td> ou <th>.

 

Élément Occurrences Rôle
<caption> 0 ou 1 Titre du tableau.
<colgroup> 0 ou + Propriétés pour un groupe de colonnes.
<thead> 0 ou 1 En-tête du tableau.
<tfoot> 0 ou 1 Pied du tableau.
<tbody>
ou
<tr>

0 ou +


1 ou +

Corps du tableau (contenant tr, th, td).


Lignes du tableau (contenantth, td).

 

Exemple

<table width="100%" cellspacing="10" cellpadding="10" class="table-hover">
  <tr valign="middle">
    <th width="25%" scope="col">Élément </th>
    <th width="25%" scope="col">Occurrences </th>
    <th width="50%" scope="col"> Rôle</th>
  </tr>
  <tr valign="middle">
    <th scope="row">&lt;caption&gt;</th>
    <td>0 ou 1 </td>
    <td>Titre du tableau.</td>
  </tr>
  <tr valign="middle">
    <th scope="row">&lt;colgroup&gt;</th>
    <td> 0 ou + </td>
    <td>Propriétés pour un groupe de colonnes.</td>
  </tr>
  <tr valign="middle">
    <th scope="row">&lt;thead&gt;</th>
    <td>0 ou 1</td>
    <td> En-tête du tableau.</td>
  </tr>
  <tr valign="middle">
    <th scope="row">&lt;tfoot&gt;</th>
    <td>0 ou 1 </td>
    <td>Pied du tableau.</td>
  </tr>
  <tr valign="middle">
    <th scope="row">&lt;tbody&gt;<br>
      ou<br>
    &lt;tr&gt;<br></th>
    <td>0 ou +<br>
1 ou +<br></td>
    <td>Corps du tableau (contenant tr, th, td).<br>
Lignes du tableau (contenant<br>
th, td).</td>
  </tr>
</table>

 

 

 



  • thead

    thead

    La balise <thead>représente un en-tête de tableau,

    .......
    Voir Plus
  • tfoot

    tfoot

    Représente un pied de tableau

    .......
    Voir Plus
  • tbody

    tbody

    Corps du tableau html

    .......
    Voir Plus
  • tr

    tr

    Permet de déclarer une nouvelle ligne dans le  tableau.

    .......
    Voir Plus
  • td

    td

    La balise <td> déclare les cellules d'un tableau html.

    .......
    Voir Plus
  • th

    th

    Elle n'est à utiliser que pour définir les titres d'un tableau , régulièrement employée dans la première ligne de l'élément table dans le but de mettre en valeur les titres des colonnes.

    .......
    Voir Plus
  • caption

    caption

    Est d’attribuer une légende ou un titre à un tableau de données.

    .......
    Voir Plus
  • colgroup

    colgroup

    Placé en début de <table> est utilisé pour spécifier des propriétés communes à un groupe de colonnes.

    .......
    Voir Plus
  • col

    col

    Utilise pour décrire l'apparence des colonnes d'un tableau. Elle est ainsi employée uniquement à l'intérieur de l'élément <table>

    .......
    Voir Plus
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces