Tableaux HTML

Création de tableaux en HTML

Le tableau HTML vous permet d'organiser les données en lignes et en colonnes. Ils sont couramment utilisés pour afficher des données tabulaires telles que des listes de produits, des détails sur les clients, des rapports financiers, etc.

Vous pouvez créer un tableau à l'aide de l'élément <table>. À l'intérieur de l'élément <table>, vous pouvez utiliser les éléments <tr> pour créer des lignes et pour créer des colonnes à l'intérieur d'une ligne, vous pouvez utiliser les éléments <td>. Vous pouvez également définir une cellule comme en-tête pour un groupe de cellules de tableau à l'aide de l'élément <th>.

L'exemple suivant illustre la structure la plus élémentaire d'une table.

<table>

    <tr>

        <th>No.</th>
        <th>Nom</th>
        <th>Age</th>

    </tr>

    <tr>

        <td>1</td>
        <td>Jean Claude</td>
        <td>16</td>

    </tr>

    <tr>

        <td>2</td>
        <td>Ezéckiel</td>
        <td>24</td>

    </tr>

</table>

Les tableaux n'ont pas de bordures par défaut. Vous pouvez utiliser la propriété CSS border pour ajouter des bordures aux tableaux. De plus, les cellules du tableau sont juste assez grandes pour contenir le contenu par défaut. Pour ajouter plus d'espace autour du contenu dans les cellules du tableau, vous pouvez utiliser la propriété CSS padding.

Les règles de style suivantes ajoutent une bordure de 1 pixel au tableau et 10 pixels de remplissage à ses cellules.

 

table, th, td {

    border: 1px solid black;

}

th, td {

    padding: 10px;

}

Par défaut, les bordures autour du tableau et leurs cellules sont séparées les unes des autres. Mais vous pouvez les réduire en un seul en utilisant la propriété border-collapse sur l'élément <table>.

De plus, le texte à l'intérieur des éléments <th> est affiché en gras, aligné horizontalement au centre de la cellule par défaut. Pour modifier l'alignement par défaut, vous pouvez utiliser la propriété CSS text-align.

Les règles de style suivantes réduisent les bordures du tableau et alignent le texte de l'en-tête du tableau à gauche.

 

table {

    border-collapse: collapse;

}

th {

    text-align: left;

}

Veuillez consulter le tutoriel sur les tableaux CSS pour en savoir plus sur le style des tableaux HTML.

Remarque : la plupart des attributs de la balise <table> tels que border, cellpadding, cellspacing, width, align, etc. pour styliser les apparences de tableau dans les versions antérieures ont été supprimés dans HTML5, évitez donc de les utiliser. Utilisez CSS pour styliser les tableaux HTML à la place.

Couvrir plusieurs lignes et colonnes

Le fractionnement vous permet d'étendre les lignes et les colonnes du tableau sur plusieurs autres lignes et colonnes.

Normalement, une cellule de tableau ne peut pas passer dans l'espace au-dessous ou au-dessus d'une autre cellule de tableau. Cependant, vous pouvez utiliser les attributs rowspan ou colspan pour couvrir plusieurs lignes ou colonnes dans un tableau.

Essayons l'exemple suivant pour comprendre comment colspan fonctionne fondamentalement :

<table>

    <tr>

        <th>Name</th>
        <th colspan="2">Phone</th>

    </tr>

    <tr>

        <td>John Walter</td>
        <td>5550192</td>
        <td>5550152</td>

    </tr>

</table>

De même, vous pouvez utiliser l'attribut rowspan pour créer une cellule qui s'étend sur plusieurs lignes. Essayons un exemple pour comprendre le fonctionnement de l'enchaînement de lignes :

<table>

    <tr>

        <th>Name:</th>
        <td>John Walter</td>

    </tr>

    <tr>

        <th rowspan="2">Phone:</th>
        <td>55577854</td>

    </tr>

    <tr>

        <td>55577855</td>

    </tr>

</table>

Ajout de légendes aux tableaux

Vous pouvez spécifier une légende (ou un titre) pour vos tableaux à l'aide de l'élément <caption>.

L'élément <caption> doit être placé directement après la balise <table> d'ouverture. Par défaut, la légende apparaît en haut du tableau, mais vous pouvez modifier sa position à l'aide de la propriété CSS caption-side.

L'exemple suivant montre comment utiliser cet élément dans un tableau.

 

<table>

    <caption>Users Info</caption>

    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Age</th>
    </tr>

    <tr>
        <td>1</td>
        <td>Peter Parker</td>
        <td>16</td>
    </tr>

    <tr>
        <td>2</td>
        <td>Clark Kent</td>
        <td>34</td>
    </tr>

</table>

Définition d'un en-tête, d'un corps et d'un pied de page de tableau

HTML fournit une série de balises <thead>, <tbody> et <tfoot> qui vous aident à créer un tableau plus structuré, en définissant respectivement les régions d'en-tête, de corps et de pied de page.

L'exemple suivant illustre l'utilisation de ces éléments.

 

<table>

    <thead>

        <tr>
            <th>Items</th>
            <th>Expenditure</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>Stationary</td>
            <td>2,000</td>
        </tr>

        <tr>
            <td>Furniture</td>
            <td>10,000</td>
        </tr>

    </tbody>

    <tfoot>

        <tr>
            <th>Total</th>
            <td>12,000</td>
        </tr>

    </tfoot>

</table>

Remarque : En HTML5, l' élément <tfoot> peut être placé avant ou après les éléments <tbody> et <tr>, mais doit apparaître après tous les éléments <caption>, <colgroup> et <thead>.

 

Conseil : n'utilisez pas de tableaux pour créer des mises en page de pages Web. Les mises en page de table sont plus lentes au rendu et très difficiles à maintenir. Il ne doit être utilisé que pour afficher des données tabulaires.