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

L'exemple ci-dessous montre la structure de base d'un tableau.

<table>
    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Peter Parker</td>
        <td>18</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Chris Kent</td>
        <td>34</td>
    </tr>
</table>

Les tableaux n'ont pas de bordures par défaut. Vous pouvez utiliser la border propriété CSS 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 padding propriété CSS.

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 border-collapse propriété sur l' <table> élément.

De plus, le texte à l'intérieur des <th> éléments 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 text-align propriété CSS.

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;
}

Fusionner 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 Carter</td>
        <td>5550192</td>
        <td>5550152</td>
    </tr>
</table>

De même, vous pouvez utiliser l' rowspan attribut 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 Carter</td>
    </tr>
    <tr>
        <th rowspan="2">Phone:</th>
        <td>55577854</td>
    </tr>
    <tr>
        <td>55577855</td>
    </tr>
</table>