Correction HTML Chap6

Module HTML CSS
Correction Chapitre 6
CEFII - Archimede Informatique - 11 Place Smard - 49100 Angers - 02.41.72.19.78 - contact@cefii.fr

RCS d'Angers : 483 772 570 00048 - Code NAF 6201 Z - Numro prestataire de formation : 52 49 02488 49
Module HTML CSS Correction Exercice 1

On commence par crer notre fichier HTML, et y crer la base d'un tableau de 4 lignes et 3 colonnes :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<table>
<tr>
</tr>
<tr>
<td>Colonne 1</td>
<td>Colonne 2</td>
<td>Colonne 3</td>
<td>Cellule</td>
<td>Cellule</td>
<td>Cellule</td>
</tr>
<tr>
</tr>
<tr>
<td>Cellule</td>
<td>Cellule</td>
<td>Cellule</td>
<td>Cellule</td>
<td>Cellule</td>
<td>Cellule</td>
</tr>
</table>
</body>
</html>

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 dernire ligne. Pour cela, remplaons le dernier bloc :
<tr>
<td>Cellule</td>
<td>Cellule</td>
<td>Cellule</td>
</tr>
par :
<tr>
<td>Cellule</td>
<td colspan="2">Cellule</td>
</tr>
On supprime la dernire cellule dclare, et on ajoute la proprit colspan la cellule prcdente.
Enfin, peaufinons le rsultat : dans l'nonc, le texte des cellules est centr. Ajoutons donc une proprit de style dans la section <head> :
<head>
<style>
td {text-align : center;}
</style>
</head>
Voil, nous avons notre rsultat attendu ! Le code final est le suivant :
<html>
<head>

</head>
<style>
</style>
<body>
<table border="1px" width="300px">
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
</tr>
<tr>
<td>Cellule</td>
<td>Cellule</td>
<td>Cellule</td>
</tr>
<tr>
<td>Cellule</td>
<td>Cellule</td>
<td>Cellule</td>
</tr>
<tr>
<td>Cellule</td>
</tr>
</table>
</body>
</html>

Module HTML CSS Correction Exercice 2

On commence par crer notre fichier HTML, et y crer la base d'un tableau de 4 lignes et 3 colonnes :
<html>
<head>
</head>
<body>
<table>
<tr>
<td>Colonne 1</td>
<td>Colonne 2</td>
<td>Colonne 3</td>
</tr>
<tr>
</tr>
<tr>
<td>Cellule</td>
<td>Cellule</td>
<td>Cellule</td>
<td>Cellule</td>
<td>Cellule</td>
<td>Cellule</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
<td>Cellule</td>
<td>Cellule</td>
<td>Cellule</td>

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 premire cellule de la 2me ligne avec les deux premires cellules des lignes suivantes. Pour cela, il faut ajouter la proprit
rowspan="3" (fusion sur 3 lignes) cette cellule, et supprimer la premire cellule des lignes suivantes :
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
</tr>
<tr>
<td rowspan="3">Cellule</td>
<td>Cellule</td>
<td>Cellule</td>
</tr>
<tr>
<td>Cellule</td>
<td>Cellule</td>
</tr>
<tr>
<td>Cellule</td>
<td>Cellule</td>
</tr>
</table>
A ce stade, il ne reste plus qu' fusionner les 2 dernires cellules de la dernire ligne. Cela se fait en appliquant la proprit colspan="2" (fusion sur 2 colonnes) la
premire de ces 2 cellules et en supprimant la seconde cellule.
On remplace :
<tr>
<td>Cellule</td>

<td>Cellule</td>
</tr>
par :
<tr>
</tr>
Enfin, peaufinons le rsultat : dans l'nonc, le texte des cellules est centr. Ajoutons donc une proprit de style dans la section <head> :
<head>
<style>
</style>
</head>
Voil, nous avons notre rsultat attendu ! Le code final est le suivant :
<html>
<head>
<style>
</style>
</head>
<body>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
</tr>

<tr>
<td rowspan="3">Cellule</td>
<td>Cellule</td>
<td>Cellule</td>
</tr>
<tr>
<td>Cellule</td>
<td>Cellule</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>


Correction HTML Chap6

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Correction HTML Chap6

Hochgeladen von

Copyright:

Verfügbare Formate

Module HTML CSS

CEFII - Archimede Informatique - 11 Place Smard - 49100 Angers - 02.41.72.19.78 - contact@cefii.fr

Module HTML CSS Correction Exercice 1

CEFII - Archimede Informatique - 11 Place Smard - 49100 Angers - 02.41.72.19.78 - contact@cefii.fr

CEFII - Archimede Informatique - 11 Place Smard - 49100 Angers - 02.41.72.19.78 - contact@cefii.fr

CEFII - Archimede Informatique - 11 Place Smard - 49100 Angers - 02.41.72.19.78 - contact@cefii.fr

Module HTML CSS Correction Exercice 2

CEFII - Archimede Informatique - 11 Place Smard - 49100 Angers - 02.41.72.19.78 - contact@cefii.fr

CEFII - Archimede Informatique - 11 Place Smard - 49100 Angers - 02.41.72.19.78 - contact@cefii.fr

CEFII - Archimede Informatique - 11 Place Smard - 49100 Angers - 02.41.72.19.78 - contact@cefii.fr

CEFII - Archimede Informatique - 11 Place Smard - 49100 Angers - 02.41.72.19.78 - contact@cefii.fr

Das könnte Ihnen auch gefallen