En ce qui concerne le HTML, les tableaux sont utilisés pour afficher les données sous forme de tableau. Les questions concernant les tableaux HTML doivent être posées en montrant le code source avec lequel on a un problème, ou, si la question concerne une tentative infructueuse de créer un tableau selon les désirs, le demandeur doit montrer l'échec, décrire les attentes et comment le comportement était différent.

L'élément <table> est utilisé pour afficher une grille de données. Le <table> est parfois incorrectement utilisé pour positionner des éléments sur une page Web, ce qui devrait être évité car les tableaux ont une signification sémantique. Les tableaux sont divisés en plusieurs sous-éléments pour les faire fonctionner.

Comme toute balise HTML, le comportement de la balise <table> peut être modifié via des attributs HTML. Les attributs les plus importants pour un <table> sont les suivants:

  • border définit l'épaisseur de bordure des tables. c'est-à-dire border="1"
  • dir définit la direction de la table. c'est-à-dire dir="rtl" ou dir="ltr"
  • cellpadding définit l'espace autour du contenu d'une cellule, c'est-à-dire cellpadding="10"
  • cellspacing définit l'espace autour des cellules, c'est-à-dire cellspacing="10" border, cellpadding and cellspacing

Les tableaux sont divisés en plusieurs sous-éléments:

  • <caption> est la tuile de la table. Il est facultatif mais s'il est présent, il doit s'agir de la première balise après la balise <table>.
  • <thead>, <tbody> et <tfoot> sépareront le tableau dans leurs sections respectives d'en-tête, de corps et de pied de page. L'utilisation de ces éléments permet une meilleure signification sémantique pour certaines lignes du tableau, qui peuvent être des titres de colonnes (dans l'en-tête) ou une ligne totale (dans le pied de page), plutôt que de tout pousser dans le corps. Si aucun de ceux-ci n'est spécifié et que le tableau passe immédiatement en lignes, le navigateur le verra comme étant entièrement contenu dans le corps.
  • <tr> démarre une nouvelle ligne dans le tableau. Les lignes du tableau ne sont pas obligatoires à fermer par un </tr> mais il est recommandé de le faire dans la plupart afin d'éviter toute confusion. Une ligne du tableau continuera jusqu'à ce qu'un nouvelle ligne est ouverte ou l'en-tête, le corps ou le pied de page qui la contient est fermé. Une table peut contenir n'importe quel nombre de lignes.
  • <th> définit la cellule d'en-tête dans une ligne, celle-ci contient le informations d'en-tête / titre, et peuvent être décorées différemment dans le table.
  • <td> définit une cellule Standard dans une ligne, qui contient des contenu / données. Comme les lignes de tableau, les cellules de tableau ne sont également pas requises à clôturer par un </td>. Une cellule de tableau continuera jusqu'à ce qu'une nouvelle la cellule est ouverte ou la ligne qui la contient est fermée. Une ligne de tableau peut contenir n'importe quel nombre de cellules. De même, l'élément <th> est souvent utilisé à l'intérieur de l'en-tête du tableau. C'est une alternative à un cellule de tableau qui la distingue des autres cellules comme point de définition qui identifie les informations ci-dessous ou sur le côté.

De plus, les cellules d'un <table> peuvent être fusionnées:

colspan and rowspan

Code pour rowpan:

<table width="300" border="1">
    <tbody>
        <tr>
            <td rowspan="2">Merged</td>
            <td>Table First Row</td>
        </tr>
        <tr>
            <td>Table Second Row</td>
        </tr>
    </tbody>
</table>

Code pour colspan:

<table width="300" border="1">
    <tbody>
        <tr>
            <td colspan="2">Merged</td>
        </tr>
        <tr>
            <td>Table First Col</td>
            <td>Table Second Col</td>
        </tr>
    </tbody>
</table>

Code pour aucune frontière:

<table width="300" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td colspan="2">Merged</td>
        </tr>
        <tr>
            <td>Table First Col</td>
            <td>Table Second Col</td>
        </tr>
    </tbody>
</table>

Cette balise est liée à html.