Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
html

Correction exercices les tableaux en HTML : Série 01

Un cours complet pour maîtriser Correction exercices les tableaux en HTML : Série 01.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
HTML: Introduction
HTML: Les principes
HTML: Exercices
Les commentaires en HTML
Structure d’un document HTML
HTML Série 1
Notion, attributs d’une balise html
Travaux dirigés 1 HTML
Les éléments de base d'un document HTML5
Les balises meta de HTML5
Balise de texte en HTML5
La charte graphique d'un site web
Éléments sémantiques en HTML5
Les sites Web statiques
Les sites catalogues
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  1. Objectifs

    • Etre capable de fusionner les cellules d'un tableau html en utilisant les propriétés "colspan" et "rowspan".

  2. Exercice 01

    • Énoncé
    • Solution
      <!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Les tableaux</title>
</head>
<body>
    <center>
<table border="2" width="40%" CELLSPACING="6" CELLPADDING="4">
<caption>Exercice 01 Série 01 les tableaux en HTML</caption>
<thead bgcolor="silver">
    <tr><th>titre01</th><th>titre02</th><th>titre03</th></tr>
</thead>
<tbody>
    <tr><td>Cellule simple</td><td>Cellule simple</td><td>Cellule simple</td></tr>
    <tr><td colspan="2">Deux colonnes assemblées</td><td>Cellule simple</td></tr>
    <tr><td>Cellule simple</td><td>Cellule simple</td><td rowspan="2">Deux lignes assemblées</td></tr>
    <tr><td>Cellule simple</td><td>Cellule simple</td></tr>
    <tr><td>Cellule simple</td><td colspan="2" rowspan="2">Deux lignes assemblées et deux colonnes assemblées</td></tr>
    <tr><td>Cellule simple</td></tr>
</tbody>

</table>
</center>

</body>
</html>

  3. Exercice: 2

    • Énoncé
    • Solution
      <!doctype html>
<html>
    <thead>
    <meta charset="utrf-8">
    <title>Les tableaux</title>
</thead>
<body>
    <center>
<h3>Exercices 02</h3>

<table border="2" width="60%" CELLSPACING="6" CELLPADDING="4">
<caption>Planning des tâches par équipe</caption>
<thead bgcolor="silver">
    <tr><th rowspan='2'>Equipes</th><th colspan='5'>Janvier</th><th rowspan='2'></th></tr>
    <tr><th>Lundi</th><th>Mardi</th><th>Mrcredi</th><th>Jeudi</th><th>Vendreredi</th></tr>
</thead>
<tbody>
<tr><td bgcolor="silver">Equipe1</td><td colspan='3'>Tâche1</td><td colspan='2'>Tâche2</td><td rowspan='2'>semaine 1</td></tr>
<tr><td bgcolor="silver">Equipe2</td><td colspan='2'>Tâche1</td><td colspan='3'>Tâche2</td></tr>

<tr><td bgcolor="silver">Equipe1</td><td colspan='1'>Tâche3</td><td colspan='3'>Tâche4</td><td>Tâche5</td> <td rowspan='2'>semaine 2</td></tr>
<tr><td bgcolor="silver">Equipe2</td><td colspan='2'>Tâche3</td><td colspan='3'>Tâche3</td></tr>

<tr><td bgcolor="silver">Equipe1</td><td colspan='2'>Tâche1</td><td colspan='3'>Tâche2</td><td rowspan='2'>semaine 3</td></tr>
<tr><td bgcolor="silver">Equipe2</td><td colspan='1'>Tâche1</td><td colspan='4'>Tâche2</td></tr>

<tr><td bgcolor="silver">Equipe1</td><td colspan='3'>Tâche7</td><td colspan='2'>Tâche8</td><td rowspan='2'>semaine 4</td></tr>
<tr><td bgcolor="silver">Equipe2</td><td colspan='2'>Tâche7</td><td colspan='3'>Tâche8</td></tr>  
</tbody>
 
</table>
</center>
 
</body>
</html>

  4. Exercice: 3

    • Énoncé
    • Solution
      <!doctype html>
<html>
    <thead>
    <meta charset="utrf-8">
    <title>Les tableaux</title>
</thead>
<body>
    <center>
<h3>Exercices 03</h3>

<table border="2" width="60%" CELLSPACING="6" CELLPADDING="4">
<caption>Calcul de la moyenne</caption>
<thead bgcolor="silver">
    <tr><th>Matière</th><th>Note par matière</th><th>Coefficient</th><th>Note*Coefficient</th></tr>
</thead>
<tbody>
    <tr><td bgcolor="silver">Matématiques</td><td>17</td><td>4</td><td>68</td></tr>
    <tr><td bgcolor="silver">Physique</td><td>15</td><td>3</td><td>45</td></tr>
    <tr><td bgcolor="silver">Informatique</td><td>16</td><td>2</td><td>32</td></tr>
    <tr><td colspan='2' bgcolor="silver">Totaux</td><td>9</td><td>145</td></tr>
    <tr bgcolor="silver"><td colspan='3'><font color='blue'>Moyenne</font></td><td><font color='blue'>16.12</font></td></tr>
</tbody>
 
</table>
</center>
 
</body>
</html>

  5. Exercice: 4

    • Énoncé
    • Solution
      
<!DOCTYPE html>
<html>
<head>
<title>Alignments des cellules</title>
<style>
td { height: 100px; }
</style>
</head>
<body>

<table border="1" cellpadding="8" width="60%">
<caption><h3>Alignments des cellules</h3</caption>
<thead bgcolor="silver">
<tr>
	<th></th>
	<th>Left</th>
	<th>Centered</th>
	<th>Right</th>
</tr>
</thead>
<tbody>
<tr>
	<th bgcolor="silver">Top</th>
	<td style="text-align: left; vertical-align: top;color:red;"><img src="star.png" alt="">style="text-align: left; vertical-align: top;"</td>
	<td style="text-align: center; vertical-align: top;color:blue;"><img src="star.png" alt="" >style="text-align: center; vertical-align: top;"</td>
	<td style="text-align: right; vertical-align: top;color:green;"><img src="star.png" alt="" >style="text-align: right; vertical-align: top;"</td>
</tr>
<tr>
	<th bgcolor="silver">Centered</th>
	<td style="text-align: left; vertical-align: middle;color:yellow;"><img src="star.png" alt="" >style="text-align: left; vertical-align: middle;"</td>
	<td style="text-align: center; vertical-align: middle;color:brown;"><img src="star.png" alt="" >style="text-align: center; vertical-align: middle;"</td>
	<td style="text-align: right; vertical-align: middle;color:olive;"><img src="star.png" alt="" >style="text-align: right; vertical-align: middle;color:black;"</td>
</tr>
<tr>
<th bgcolor="silver">Bottom</th>
	<td style="text-align: left; vertical-align: bottom;color:purple;"><img src="star.png" alt="" >style="text-align: left; vertical-align: bottom;"</td>
	<td style="text-align: center; vertical-align: bottom;color:fushsia;"><img src="star.png" alt="" >style="text-align: center; vertical-align: bottom;"</td>
	<td style="text-align: right; vertical-align: bottom;color:aqua;"><img src="star.png" alt="" >style="text-align: right; vertical-align: bottom;"</td>
</tr>
</tbody>
<tfoot>
        <tr>
            <th colspan="4" bgcolor="silver"> Utilisation des styles CSS</th>         
        </tr>
    </tfoot>
</table>
</body>
</html>