Address
304 North Cardinal St.
Dorchester Center, MA 02124

Work Hours
Monday to Friday: 7AM - 7PM
Weekend: 10AM - 5PM

Tableau html presentation

Tableau HTML

Le tableau HTML est un outil puissant pour afficher des données de manière structurée. Apprenons à le créer et à le personnaliser.

Sommaire

Tableau HTML exemple

<table>
    <!-- En-tête du tableau -->
    <thead>
        <tr>
            <th>Nom</th>
            <th>Email</th>
        </tr>
    </thead>
    <!-- Corps du tableau -->
    <tbody>
        <tr>
            <td>Bob</td>
            <td>bob@gmail.com</td>
        </tr>
        <tr>
            <td>Alice</td>
            <td>alice@gmail.com</td>
        </tr>
    </tbody>
</table>
Note: Le code entre les balises « <!– » « –> » est un commentaire et n’est pas rendu sur la page. Tableau html

Ajouter une bordure (border) au tableau

Avec HTML5, il est recommandé d’améliorer l’esthétique d’un tableau en utilisant CSS (les anciennes propriétés telles que bg-color … sont dépréciées). Voici comment ajouter une bordure à un tableau :
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}            
Tableau bordure html

Colspan, fusion de cellules horizontale

La propriété colspan permet de fusionner horizontalement des cellules dans un tableau HTML. Cela offre une flexibilité accrue pour présenter les données de manière claire. Voici comment l’utiliser :
<table>
  <thead>
    <tr>
      <th>Nom</th>
      <th colspan="2">Emails</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob</td>
      <td>bob@gmail.com</td>
      <td>societe-bob@gmail.com</td>
    </tr>
  </tbody>
</table>
tableau colspan

Rowspan, fusion de cellules verticale

La propriété rowspan permet de fusionner verticalement des cellules dans un tableau HTML. Voici comment l’appliquer :
<table>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Email</th>
      <th>Facture HT</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob</td>
      <td>bob@gmail.com</td>
      <td rowspan="2">100</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>alice@gmail.com</td>
    </tr>
  </tbody>
</table>
tableau rowspan

Tfoot: le footer pour tableau

La balise tfoot permet de définir des lignes résumant un tableau, particulièrement utile pour afficher des totaux ou des résumés. Voici comment l’incorporer dans votre tableau :
<table>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Email</th>
      <th>Facture HT</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob</td>
      <td>bob@gmail.com</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>alice@gmail.com</td>
      <td>200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total HT</td>
      <td colspan="2">300</td>
    </tr>
  </tfoot>
</table>
tableau tfoot Vous pouvez également appliquer des règles CSS personnalisées à tfoot :
tfoot {
    /* Vos styles personnalisés ici */
}

Aligner verticalement les cases d’un tableau

La propriété CSS vertical-align permet d’ajuster l’alignement vertical des cellules dans un tableau. Voici comment l’utiliser :
td {
    vertical-align: top;
    width: 100px;
    height: 100px;
}            
tableau vertical-align top Valeurs possibles de vertical-align:
  • baseline
  • sub
  • super
  • text-top
  • text-bottom
  • middle
  • top
  • bottom

Aligner horizontalement les cases d’un tableau

La propriété CSS text-align permet de contrôler l’alignement horizontal des cellules dans un tableau. Voici comment l’appliquer :
td {
    text-align: center;
    width: 250px;
    height: 250px;
}            
Valeurs possibles de text-align:
  • start
  • end
  • left
  • right
  • center
  • justify
  • match-parent
  • justify-all
tableau text-align center

Points clés à retenir

  • Respecter la structure du tableau avec thead + tbody
  • Utiliser colspan pour fusionner horizontalement des cellules
  • Utiliser rowspan pour fusionner verticalement des cellules
  • Utiliser CSS pour personnaliser le tableau et aligner les cellules
  • Utiliser tfoot pour les totaux ou les résumés

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *