Séance 1

Les tableaux

Les balises

table
- Définition du tableau en lui même, contiendra l'ensemble des balises suivantes
- https://www.w3schools.com/html/html_tables.asp
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
- La légende du tableau pour décrire son contenu
- https://www.w3schools.com/tags/tag_caption.asp

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

Les cellules des tableaux de données sont reliées à leurs en-têtes.checklists.opquast.com

Les titres des tableaux de données sont renseignés.checklists.opquast.com

La linéarisation des tableaux utilisés pour la mise en page ne nuit pas à la compréhension des contenus.checklists.opquast.com

Les tableaux de données ne sont pas simulés à l'aide de texte mis en forme.checklists.opquast.com

Les tableaux de données ne sont pas remplacés par des images.checklists.opquast.com

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>

PreviousIntroduction NextSéance 2

Last updated 2 years ago

hashtagLes tableaux

hashtagLes balises

hashtagFusionner des cellules ou des lignes

hashtagColspan

hashtagRowspan

hashtagExemple

hashtagL'intérêt

hashtagLe CSS

hashtagQualité du Web

hashtagExercices