Tableaux

L'élément <table> sert à représenter des tableaux. Les balises indispensables pour définir un tableau sont :

les balises <table>...</table>, de type bloc, qui déclarent la création du tableau ;
les balises <tr>...</tr> (table row), de type bloc, qui définissent une nouvelle ligne du tableau ;
les balises <td>...</td> (table data), de type en-ligne, qui définissent une nouvelle cellule du tableau dans la ligne.

Il existe d'autres balises, mais elles ne seront pas forcément décrites ici.

Un premier exemple

Le code entré ci-dessous sert à obtenir le tableau ci-contre.

Par défaut, les cellules ne sont pas encadrées, les colonnes sont alignées et il y a un retour à la ligne à chaque nouvelle ligne du tableau.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title> Tableaux </title>
</head>
<body>
    <table>
        <tr>    <td> Elément 1.1 </td>
                <td> Elément 1.2 </td>
                <td> Elément 1.3 </td> </tr>
        <tr>    <td> Elément 2.1 </td>
                <td> Elément 2.2 </td>
                <td> Elément 2.3 </td> </tr>
    </table>
</body>
</html>

En ajoutant le fichier .css ci-dessous (et en créant le lien adéquat dans la partie <head> du fichier HTML), on peut facilement afficher les bordures autour des cellules et du tableau :

table, td {                        /* encadrement du tableau */
    border: 1px solid black;    /* et de chaque cellule */
}

Lorsqu'une cellule doit servir de titre (en première colonne ou première ligne), on peut utiliser les balises <th>...</th> au lieu de <td>...</td>.

Un second exemple - La fusion de cellules

On peut regrouper (fusionner) des cellules, c'est-à-dire faire en sorte qu'une cellule occupe plusieurs lignes ou plusieurs colonnes. Pour cela, on affecte les éléments cellule <td> ou <th> avec les attributs :

rowspan="", à compléter par le nombre entier (y compris la cellule portant cet attribut) de cellules à fusionner en-dessous.
colspan="", à compléter par le nombre entier (y compris la cellule portant cet attribut) de cellules à fusionner à droite.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="ITF-8">
    <title>Fusionner</title>
</head>
<body>
    <table>
        <thead>
            <tr>    <!-- Fusion de 3 cellules sur la ligne -->
                    <th colspan="3">Enseignement obligatoire</th> 
                    <th>Spécialité</th> </tr>
        </thead>

        <tbody>
            <tr>    <!-- Fusion de 4 cellules sur la colonne -->
                    <td rowspan="4"> Mathématiques </td>
                    <td rowspan="4"> Sc. Physiques </td>
                    <td rowspan="4"> S.V.T. </td>
                    <td> I. S. N. </td> </tr>
            <tr>    <td> Maths </td> </tr>
            <tr>    <td> Sc. Physiques </td> </tr>
            <tr>    <td> S.V.T. </td> </tr>
        </tbody>
    </table>
</body>
</html>

/* Fichier CSS */
table{
    border : 2px solid black;
    }

th, td {
    border : 1px solid green;
    padding : 5px;
    }

Exercice n°1 : Mon premier tableau

Donner un code permettant de réaliser le tableau ci-dessous. La mise en forme est effectuée par un fichier .css importé grâce à la balise <link>.

Télécharger le fichier CSS

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Comparaison Html/Css</title>
    <link rel="stylesheet" href="table_01.css">
</head>
<body>
    <table>
        <!-- code à compléter ici -->
    </table>
</body>
</html>

Exercice n°2 : Un tableau en morceaux

Donner le code nécessaire pour réaliser le tableau ci-dessous :

Télécharger le fichier CSS

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Fusion</title>
    <link rel="stylesheet" href="table_02.css">
</head>
<body>
     <table>
       <!-- code à compléter ici -->
     </table>
</body>
</html>

Exercice n°3 : Un ancien mix

Écrire un programme Python qui crée un fichier HTML contenant une table de multiplication de 1 à 10 d'un nombre donné par un utilisateur.

Créer un fichier avec Python

La syntaxe pour créer et remplir un fichier à l'aide de Python est la suivante :

fichier = open("nom_fichier.html", "w") # On crée (w) un fichier nom_fichier.html

fichier.write("Bonjour !")  # On écrit dans le fichier

fichier.close()  # On ferme et enregistre le fichier

Travail originel CC-BY-NC-SA : Nicolas Buyle-Bodin, Jean-Manuel Meny et Mcikaël Bordonaro. Autres modifications par Cédric Frayssinet et Maxime Chourré