Module HTML CSS Correction Chapitre 6

Dimension: px

Commencer à balayer dès la page:

Download "Module HTML CSS Correction Chapitre 6"

Bérengère François
il y a 7 ans
Total affichages :

1 Module HTML CSS Correction Chapitre 6

2 Module HTML CSS Correction Exercice 1 On commence par créer notre fichier HTML, et y créer la base d'un tableau de 4 lignes et 3 colonnes : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table> </body> </html> <td>colonne 1</td> <td>colonne 2</td> <td>colonne 3</td>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

3 Afin de mieux y voir, donnons à ce tableau une bordure visible et une largeur fixe : <table border="1px" width=="300px"> Maintenant, il nous faut fusionner 2 cellules de la dernière ligne. Pour cela, remplaçons le dernier bloc : par : <td colspan="2">cellule</td> On supprime la dernière cellule déclarée, et on ajoute la propriété colspan à la cellule précédente. Enfin, peaufinons le résultat : dans l'énoncé, le texte des cellules est centré. Ajoutons donc une propriété de style dans la section : <style> td {text-align : center;} </style> Voilà, nous avons notre résultat attendu! Le code final est le suivant : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>

Pour cela, remplaçons le dernier bloc : par : <td colspan="2">cellule</td> On supprime la dernière cellule déclarée, et on ajoute la propriété colspan à la cellule

4 <style> td {text-align : center;} </style> <body> <table border="1px" width="300px"> <th>colonne 1</th> <th>colonne 2</th> <th>colonne 3</th> <td colspan="2">cellule</td> </body> </html>

5 Module HTML CSS Correction Exercice 2 On commence par créer notre fichier HTML, et y créer la base d'un tableau de 4 lignes et 3 colonnes : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table> </body> </html> <td>colonne 1</td> <td>colonne 2</td> <td>colonne 3</td>

6 Afin de mieux y voir, donnons à ce tableau une bordure visible et une largeur fixe : <table border="1px" width=="300px"> Maintenant, il nous faut fusionner la première cellule de la 2ème ligne avec les deux premières cellules des lignes suivantes. Pour cela, il faut ajouter la propriété rowspan="3" (fusion sur 3 lignes) à cette cellule, et supprimer la première cellule des lignes suivantes : <table border="1px" width="300px"> <th>colonne 1</th> <th>colonne 2</th> <th>colonne 3</th> <td rowspan="3">cellule</td> A ce stade, il ne reste plus qu'à fusionner les 2 dernières cellules de la dernière ligne. Cela se fait en appliquant la propriété colspan="2" (fusion sur 2 colonnes) à la première de ces 2 cellules et en supprimant la seconde cellule. On remplace :

Pour cela, il faut ajouter la propriété rowspan="3" (fusion sur 3 lignes) à cette cellule, et supprimer la première cellule des lignes suivantes : <table border="1px" width="300px">

7 par : <td colspan="2">cellule</td> Enfin, peaufinons le résultat : dans l'énoncé, le texte des cellules est centré. Ajoutons donc une propriété de style dans la section : <style> td {text-align : center;} </style> Voilà, nous avons notre résultat attendu! Le code final est le suivant : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <style> td {text-align : center;} </style> <body> <table border="1px" width="300px"> <th>colonne 1</th> <th>colonne 2</th> <th>colonne 3</th>

résultat attendu! Le code final est le suivant : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

8 </body> </html> <td rowspan="3">cellule</td> <td colspan="2">cellule</td>

Documents pareils

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles