tableau

HTML

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" media="all" href="css/table.css">
    <title>Tableau</title>
</head>

<body>
    <table>
        <caption>Liste des participants</caption>

        <thead>
            <!-- En-tête du tableau -->
            <tr>
                <th>Nom</th>
                <th>Âge</th>
                <th>Code pays</th>
            </tr>
        </thead>

        <tfoot>
            <!-- Pied de tableau -->
            <tr>
                <th>Nom</th>
                <th>Âge</th>
                <th>Code pays</th>
            </tr>
        </tfoot>

        <tbody>
            <!-- Corps du tableau -->
            <tr>
                <td class="prenom">Juan</td>
                <td>45</td>
                <td>es</td>
            </tr>
            <tr>
                <td class="prenom">Emmanuel</td>
                <td>40</td>
                <td>fr</td>
            </tr>
            <tr>
                <td class="prenom">Luigi</td>
                <td>43</td>
                <td>it</td>
            </tr>
            <tr>
                <td class="prenom">Mario</td>
                <td>34</td>
                <td>it</td>
            </tr>
            <tr>
                <td class="prenom">Angela</td>
                <td>65</td>
                <td>de</td>
            </tr>
            <tr>
                <td class="prenom">Mao</td>
                <td>70</td>
                <td>zh</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

CSS

table
{
    border-collapse: collapse;
}
td, th
{
    border: 1px solid black;
    min-width: 100px
}
td {
    text-align: right
}
.prenom {
    text-align: left
}

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.