Cpm Affiliation : la régie publicitaire au Cpm

Les tableaux

Création d'un tableau en XHTML

La première réflexion à avoir quand on va créer un tableau c'est de savoir ce qu'on va mettre dedans. Ensuite, il faut s'interroger sur les relations entre les données contenues dans le tableau. C'est ainsi qu'on peut lui trouver un titre, mettre en valeur tel ou tel contenu. Il y a 4 sortes de balises à connaitre pour faire des tableaux en XHTML.

  • La balise table : La première balise à connaître pour créer un tableau en XHTML c'est la balise <table>< /table>. Elle délimite la partie code du tableau lui-même.
  • La balise tr : Après avoir spécifié la balise table, on définit la structure du tableau. C'est-à-dire qu'il faut savoir comment seront structurées les lignes et les cellules du tableau. Les balises < tr></tr> permettent de définir une ligne.
  • La balise td : En termes de balise, les cellules sont emboîtées dans les lignes. Un bloc de balise < tr></tr> contient un ou plusieurs blocs de balise <td></td>.Ces derniers correspondent à des cellules.
  • La balise th : La balise th quant à elle, permet d'organiser le contenu du tableau. Son usage devient très courant surtout qu'elle permet d'appliquer facilement les styles CSS aux tableaux. On l'utilise juste après la balise table.

L'exemple suivant nous montre donc ce que peut être un tableau à la base.

Aperçu :

titre cellule1

titre cellule2

ligne1 cellule1

ligne1 cellule2

ligne2 cellule1

ligne2 cellule2

Code XHTML :

<table>

<tr>
  <th>titre cellule1</th>
  <th> titre cellule2</th>
</tr>
<tr>
  <td>ligne1 cellule1</td>
  <td> ligne1 cellule2</td>
</tr>
<tr>
  <td>ligne2 cellule1</td>
  <td> ligne2 cellule2</td>
</tr>

</table>

Ce tableau contient donc 3 lignes et 2 cellules. Sur la première ligne se trouvent les titres de chaque cellule.

Fusionner les colonnes d'un tableau

Pour fusionner plusieurs colonnes, on utilise l'attribut colspan. On lui donne une valeur numérique selon le nombre de colonnes à fusionner. Dans l'exemple précédent, essayons par exemple de fusionner les deux colonnes de la deuxième ligne.

Aperçu :

titre cellule1

titre cellule2

ligne 1 cellule 1 et cellule2 fusionnées

ligne2 cellule1

ligne2 cellule2

Code XHTML :

<table>

<tr>
  <th>titre cellule1</th>
  <th> titre cellule2</th>
</tr>
<tr>
  <td colspan="2">ligne 1 cellule 1 et cellule2 fusionnées</td>
</tr>
<tr>
  <td>ligne2 cellule1</td>
  <td> ligne2 cellule2</td>
</tr>

</table>

Fusion de ligne

En appliquant rowspan à une balise td, on a les mêmes résultats sur les lignes. Comme colspan, on lui assigne une valeur numérique.

Aperçu :

titre cellule1

titre cellule2

cellule1 ligne1 et 2 fusionnées

ligne1 cellule2

ligne2 cellule2

Code XHTML :

<table>

<tr>
  <th>titre cellule1</th>
  <th> titre cellule2</th>
</tr>
<tr>
  <td rowspan="2">cellule1 ligne1 et 2 fusionnées </td>
  <td> ligne1 cellule2</td>
</tr>
<tr>
  <td> ligne2 cellule2</td>
</tr>

</table>

Un tableau compartimenté

Compartimenter un tableau consiste à le diviser en 3 parties bien distinctes. Lorsque le tableau est très grand, il est intéressant de le découper en compartiments. Trois zones différentes du tableau sont définies chacune par la balise associée :

  • L'en-tête : C'est la partie haute du tableau, elle se définit avec les balises <thead></thead>
  • Le corps : C'est la partie centrale du tableau, elle se définit avec les balises <tbody></tbody>
  • Le pied du tableau : C'est la partie basse du tableau, il se définit avec les balises <tfoot></tfoot>

Généralement, l'entête contient les titres de chaque cellule. L'entête sera donc la partie où il y a les th. La partie tbody est le corps du tableau lui-même. Il correspond au contenu. Dans le pied du tableau, on met des remarques, ou l'auteur, ou la source.

Certains se servent aussi de tfoot pour y placer des repères, en répétant tout simplement ce qu'il y a dans thead par exemple. La norme W3C exige qu'on mette la balise tfoot avant tbody dans le code si on veut que notre page soit valide.

Légende d'un tableau

L'attribut caption permet de mettre une légende ou un titre sur le tableau. Il doit décrire en quelques mots ce que contient le tableau.

Avec toutes ces nouvelles notions sur le tableau, en voici encore un autre exemple avec un tableau plus élaboré.

Aperçu :

Notes des élèves de la classe de sixième

Nom

Mathématiques

Sciences naturelles

Physique

 

Examen

Devoir

Moyenne

Examen

Devoir

Moyenne

Examen

Devoir

Moyenne

 

Résultats publiés le 01/09/2008

 

Assan Tessan

10

14

12

12

18

15

13

11

12

 

Bernard Chateau

8

10

9

8

9

8,5

13

6

9,5

 

Helmut Shröder

12

18

15

8

9

8,5

13

6

9,5

 

Willy Jons

13

6

9,5

8

9

8,5

8

10

9

 

Code XHTML :

<table>

<caption>Notes des élèves de la classe de sixième</caption>
<thead>
<tr>
   <th rowspan="2">Nom</th>
   <th colspan="3" abbr="math">Mathématiques</th>
   <th colspan="3" abbr="sn">Sciences naturelles</th>
   <th colspan="3" abbr="phys">Physique </th>
</tr>
<tr>
   <th>Examen</th>
   <th>Devoir</th>
   <th>Moyenne</th>
   <th>Examen</th>
   <th>Devoir</th>
   <th>Moyenne</th>
   <th>Examen</th>
   <th>Devoir</th>
   <th>Moyenne</th>
</tr>
</thead>



<tfoot>
<tr>
   <th colspan="10">Résultats publiés le 01/09/2008</th>
</tr>
</tfoot>



<tbody>
<tr>
   <td>Assan Tessan</td>
   <td>10</td>
   <td>14</td>
   <td>12</td>
   <td>12</td>
   <td>18</td>
   <td>15</td>
   <td>13</td>
   <td>11</td>
   <td>12</td>
</tr>
<tr>
   <td>Bernard Chateau</td>
   <td>8</td>
   <td>10</td>
   <td>9</td>
   <td>8</td>
   <td>9</td>
   <td>8,5</td>
   <td>13</td>
   <td>6</td>
    <td>9,5</td>
</tr>
<tr>
   <td>Helmut Shröder</td>
   <td>12</td>
   <td>18</td>
   <td>15</td>
   <td>8</td>
   <td>9</td>
   <td>8,5</td>
   <td>13</td>
   <td>6</td>
   <td>9,5</td>
</tr>

 

Infos Plan Partenaires
À propos Webmasters
C.G.U Services Gratuits Annuaire de sites web
Bannières Forum Ionoa

 

Aipoweb est un site édité par ASMOH NetWork  ©

×