Séance 1

PreviousIntroduction NextSéance 2

Last updated 2 years ago

Séance 1

Les tableaux

Les balises

table
- Définition du tableau en lui même, contiendra l'ensemble des balises suivantes
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

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

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>

PreviousIntroduction NextSéance 2

Last updated 2 years ago