Tableaux : le chevauchement de cellules (avec colspan et rowspan)

Initiation

On peut faire en sorte qu'une cellule d'un tableau chevauche deux cellules adjacentes, en largeur ou en hauteur. On utilise pour ça l'attribut colspan des balises <th> et <td> pour le chevauchement en largeur (c'est le cas du tableau de gauche dans le dessin ci-dessous), et l'attribut rowspan pour le chevauchement en hauteur (c'est le cas du tableau de droite dans le dessin ci-dessous).

Mettez ici le code HTML qui correspond au tableau de gauche (vous devrez utiliser colspan).

Votre réponse n°1

Mettez ici le code HTML qui correspond au tableau de droite (vous devrez utiliser rowspan).

Votre réponse n°2

Mise en page d'un site Web grâce aux tableaux

Dans les sites Web, la mise en page globale est effectuée :

soit par du CSS, méthode la plus moderne qui sera vue pendant les cours CSS.
soit par des tableaux, méthode simple que je vais expliquer ici et que je recommande d'utiliser pour les projets de terminale.

Par exemple, le code ci-dessous permet d'obtenir la disposition du tableau ci-contre :

<body>
 <table>
   <tr>
     <td colspan=2>LOGO
   <tr>
     <td>MENU
     <td>CONTENU
   <tr>
     <td colspan=2>Pied de page
 </table>
 </body>

Vous pourriez vouloir ajouter la feuille de style CSS suivante :
Et si vous souhaitez colorer vos cellules, appliquez-leur un style CSS dans les balises TD/TH grâce à l'attribut style :

À vous de jouer, écrivez le code HTML qui permet d'obtenir la mise en page suivante (n'oubliez pas de tester votre code dans un htmlinstant avant de poster vos réponses) :

Votre réponse n°3

Ecrivez le code HTML qui permet d'obtenir la mise en page suivante :

Votre réponse n°4

Ecrivez le code HTML qui permet d'obtenir la mise en page suivante :

Votre réponse n°5