Cet exercice consiste à créer des tableaux en HTML.
Consignes de l’exercice
Créez un dossier racine intitulé html04-racine à l’emplacement de votre choix.
Créez une nouvelle page HTML tableau.html dans le dossier racine avec le code suivant :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Titre de la page</title> <style type="text/css"> /* Ajout de bordures sur les tableaux en CSS */ table { border-collapse: collapse; } td, th { border: 1px solid black; } </style> </head> <body> </body> </html>
Les lignes 6 à 14 permettent d’ajouter des bordures en CSS aux tableaux que vous allez créer dans cet exercice.
Créez le tableau suivant sur la page tableau1.html.

Solution HTML :
<table> <tr> <td>Lenny</td> <td>04/12/1987 (Valence)</td> <td>thelenny@gmail.com</td> </tr> <tr> <td>Omer</td> <td>22/01/1995 (Lyon, 8ème)</td> <td>omer@bbb.com</td> </tr> <tr> <td>Maurice</td> <td>11/10/1978 (Lyon, 8ème)</td> <td>momo@lveulft.com</td> </tr> <tr> <td>Kevin</td> <td>21/09/2001 (Lyon, 7ème)</td> <td>kev69@yahoo.com</td> </tr> </table>
Créez le tableau suivant en précisant que la première ligne est une ligne d’en-tête.

Solution HTML :
<table> <tr> <th>Prénom</th> <th>Date de naissance</th> <th>Courriel</th> </tr> <tr> <td>Lenny</td> <td>04/12/1987 (Valence)</td> <td>thelenny@gmail.com</td> </tr> <tr> <td>Omer</td> <td>22/01/1995 (Lyon, 8ème)</td> <td>omer@bbb.com</td> </tr> <tr> <td>Maurice</td> <td>11/10/1978 (Lyon, 8ème)</td> <td>momo@lveulft.com</td> </tr> <tr> <td>Kevin</td> <td>21/09/2001 (Lyon, 7ème)</td> <td>kev69@yahoo.com</td> </tr> </table>
Créez le tableau suivant en séparant l’en-tête, le corps et le pied (à ajouter) du tableau.

Solution HTML :
<table> <thead> <tr> <th>Prénom</th> <th>Date de naissance</th> <th>Courriel</th> </tr> </thead> <tfoot> <tr> <th>Prénom</th> <th>Date de naissance</th> <th>Courriel</th> </tr> </tfoot> <tbody> <tr> <td>Lenny</td> <td>04/12/1987 (Valence)</td> <td>thelenny@gmail.com</td> </tr> <tr> <td>Omer</td> <td>22/01/1995 (Lyon, 8ème)</td> <td>omer@bbb.com</td> </tr> <tr> <td>Maurice</td> <td>11/10/1978 (Lyon, 8ème)</td> <td>momo@lveulft.com</td> </tr> <tr> <td>Kevin</td> <td>21/09/2001 (Lyon, 7ème)</td> <td>kev69@yahoo.com</td> </tr> </tbody> </table>
Créez le tableau suivant en fusionnant des cellules sur plusieurs colonnes.

Solution HTML :
<table> <thead> <tr> <th>Prénom</th> <th>Date de naissance</th> <th>Courriel</th> </tr> </thead> <tfoot> <tr> <th>Prénom</th> <th>Date de naissance</th> <th>Courriel</th> </tr> </tfoot> <tbody> <tr> <td>Lenny</td> <td colspan="2">Aucune information</td> </tr> <tr> <td>Omer</td> <td>22/01/1995 (Lyon, 8ème)</td> <td>omer@bbb.com</td> </tr> <tr> <td>Maurice</td> <td colspan="2">Aucune information</td> </tr> <tr> <td>Kevin</td> <td>21/09/2001 (Lyon, 7ème)</td> <td>kev69@yahoo.com</td> </tr> </tbody> </table>
Créez le tableau suivant en fusionnant des cellules sur plusieurs lignes.

Solution HTML :
<table> <thead> <tr> <th>Groupe</th> <th>Prénom</th> <th>Date de naissance</th> <th>Courriel</th> </tr> </thead> <tfoot> <tr> <th>Groupe</th> <th>Prénom</th> <th>Date de naissance</th> <th>Courriel</th> </tr> </tfoot> <tbody> <tr> <td rowspan="2">Groupe A</td> <td>Lenny</td> <td>04/12/1987 (Valence)</td> <td>thelenny@gmail.com</td> </tr> <tr> <td>Omer</td> <td>22/01/1995 (Lyon, 8ème)</td> <td>omer@bbb.com</td> </tr> <tr> <td rowspan="2">Groupe B</td> <td>Maurice</td> <td>11/10/1978 (Lyon, 8ème)</td> <td>momo@lveulft.com</td> </tr> <tr> <td>Kevin</td> <td>21/09/2001 (Lyon, 7ème)</td> <td>kev69@yahoo.com</td> </tr> </tbody> </table>
Bonjour,
Super site pour s’entrainer . Explication claire. Grand merci pour vos efforts.