Séance 1

Les tableaux

Les balises

  • table

  • tr (table row)

    • Déclaration d'une nouvelle ligne

  • td (table data)

    • Déclaration d'une cellule de contenu, toujours dans un tr

  • th (table heading)

    • Déclaration d'une cellule d'en-tête (de ligne ou de colonne), toujours dans un tr)

  • thead

    • Bloc contenant une en-tête d'un tableau, contient ensuite des lignes et des cellules

  • tbody

    • Bloc contenant le corps d'un tableau, contient ensuite des lignes et des cellules

  • tfoot

    • Bloc contenant le pied de page d'un tableau, contient ensuite des lignes et des cellules

  • caption

Les détails dans la documentation : https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced

Fusionner des cellules ou des lignes

Colspan

permet de fusionner des cellules sur plusieurs colonnes

  • <td colspan="3">contenu</td> fusionnera 3 cellules en une seule colonne.

  • Exemple

        <table>
        <tr>
            <td colspan="2">A</td>
        </tr>
        <tr>
            <td>B</td>
            <td>C</td>
        </tr>
    </table>

Rowspan

permet de fusionner des cellules sur plusieurs lignes

  • <td rowspan="4">contenu</td> fusionnera 4 cellules en une seule cellule occupant 4 lignes.

  • Exemple

    <table>
    <tr>
        <td rowspan="2">A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
    </tr>
</table>

Exemple

Le code HTML ci-dessous 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <caption>Tableau des produits commandés</caption>
        <thead>
            <tr>
                <th>Code produit</th>
                <th>Prix Unitaire</th>
                <th>Quantité</th>
                <th>Prix Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>ABC123</th>
                <td>12.23 €</td>
                <td>1</td>
                <td>12.23 €</td>
            </tr>
            <tr>
                <th>CDE456</th>
                <td>14.00 €</td>
                <td>2</td>
                <td>28.00 €</td>
            </tr>
            <tr>
                <th>CDE786</th>
                <td>10.00 €</td>
                <td>4</td>
                <td>40.00 €</td>
            </tr>
            <tr>
                <th>CFG456</th>
                <td>21.00 €</td>
                <td>2</td>
                <td>42.00 €</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="3">Total</th>
                <th>122.23 €</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

va produire sans CSS le résultat ci-dessous

L'intérêt

Ce que dit l'accessibilité : https://www.w3.org/WAI/tutorials/tables/

Le CSS

Un tableau bien construit peut plus facilement être mis en forme, sans devoir ajouter des classes CSS partout.

On peut directement mettre en forme les tr, td et th, mais aussi plus spécifiquement les tr, td et th qui sont dans le thead, le tfoot ou encore le tbody.

On peut éventuellement coupler cela à une classe ou un id sur la table et différencier, facilement plusieurs tableaux

Qualité du Web

Exercices

Reproduire le tableau ci-dessous en utilisant les bonnes balises et en ajoutant le CSS nécessaire sans utiliser de class ou d'ID.

Rappel :

L'ajout d'une feuille de style se fait avec la balise link dans le head de votre page html

<head>
    ...
    <link rel="stylesheet" href="votreFichier.css">
    ...
</head>
PreviousPrésentation du coursNextSéance 2

Last updated