Tuto HTML

Les tableaux HTML

Comment créer un tableau en HTML? Un tableau en HTML contient des lignes et des colonnes à la manière d'un tableau dans Excel. Les 3 attributs principaux d'un tableau HTML sont "table", "tr" et "td", respectivement tableau, ligne et cellule. l'attribut "th" peut être également utilisé pour mettre en gras les cellules de la première ligne, cela permet d'améliorer le design et la cohérence dans le style du tableau HTML.

Exemple de tableau HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Test tableau HTML</title>
</head>
<body>
    <table>
        <tr>
            <td>Prénom: </td>
            <td>Fred</td>
        </tr>
        <tr>
            <td>Nom: </td>
            <td>Si</td>
        </tr>
    </table> 
</body>
</html>

Tableau HTML avec attribut TH

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Test tableau HTML</title>
</head>
<body>
    <table>
        <tr>
            <th>Origine: </th>
            <th>Destination: </th>
            <th>Durée du trajet: </th>
        </tr>
        <tr>
            <td>Paris</td>
            <td>Amsterdam</td>
            <td>5 heures</td>
        </tr>
        <tr>
            <td>Marseille</td>
            <td>Londres</td>
            <td>14 heures</td>
        </tr>
    </table> 
</body>
</html>

Tableau HTML fusion cellules horizontal

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Test tableau HTML</title>
</head>
<body>
    <table>
        <tr>
            <td colspan=5>Semaine</td>
            <td colspan=2>Week-end</td>
        </tr>
        <tr>
            <td>Lundi</td>
            <td>Mardi</td>
            <td>Mercredi</td>
            <td>Jeudi</td>
            <td>Vendredi</td>
            <td>Samedi</td>
            <td>Dimanche</td>
        </tr>
    </table> 
</body>
</html>

Tableau HTML fusion cellules vertical

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Test tableau HTML</title>
</head>
<body>
    <table>
        <tr>
            <th>Lundi</th>
            <th>Mardi</th>
            <th>Mercredi</th>
            <th>Jeudi</th>
            <th>Vendredi</th>
        </tr>
        <tr>
            <td>matin</td>
            <td></td>
            <td>matin</td>
            <td rowspan=2>journée</td>
            <td rowspan=2>journée</td>
        </tr>
        <tr>
            <td></td>
            <td>soir</td>
            <td></td>
        </tr>
    </table> 
</body>
</html>