Les tableaux.

Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.

Les tableaux.

Avant de commencer, rappelez-vous que les tableaux sont censés être utilisés comme structure de données tabulaires et non pour la mise en page. Vous devez faire la mise en page avec une feuille de style CSS.

Voici un exemple très simple de tableau :

Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).

1
2
3
4
5
6
7
8
9
10
11
12

<table class="table" border="1" cellspacing="0" summary="Sommaire"><caption class="legende">Une légende ici</caption>
 <tr>
  <td>Cellule 1</td>
  <td>Cellule 2</td>
  <td>Cellule 3</td>
 </tr>
 <tr>
  <td>Cellule 4</td>
  <td>Cellule 5</td>
  <td>Cellule 6</td>
 </tr>
</table>

Résultat attendu :

1. L'élément <table> définit la table.
2. L'élément <caption> est la légende de la table et est facultative.
3. L'élément <tr> définit une ligne de tableau. Notez qu'il y a deux éléments <tr>.
4. L'élément <td> définit une cellule de données. Notez que il y a six éléments <td>.

La largeur de la bordure et l'espace entre les cellules sont directement insérées dans le XHTML. Tout autre attribut sera inséré dans le CSS pour un meilleur controle.

Si une cellule est vide, insérer l'entité HTML « espace » entre les balises <td> et </td> afin que vos tables soient bien interprétées par tous les navigateurs. Par exemple :

<td>&nbsp;</td>.

Remarquez que la table à une classe. Elle permet de définir des paramèttres CSS spécifiques au tableau. Par exemple :

Tout ce joue dans le CSS (ne tenez pas compte des numéros de ligne).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.table {
color:#fff;
background:#7e8e94;
width:580px;
margin-left:5%;
border-collapse:collapse /* Annule le dédoublement de la bordure */
}

.table td{
padding:5px
}

.legende{
background-color:#7e8e94;
border:1px solid #eee;
padding:5px 0
}

Résultat attendu :

Agencer le tableau.

Vous avez la possibilité d'agencer le tableau selon vos besoins soit avec <colspan>. Exemple :

1
2
3
4
5
6
7
8
9
10
11

<table class="table" border="1" cellspacing="0" summary="Sommaire"><caption>Une légende ici</caption>
<tr>
 <td>Cellule 1</td>
 <td colspan="2">Cellule 2</td>
</tr>
<tr>
 <td>Cellule 3</td>
 <td>Cellule 4</td>
 <td>Cellule 5</td>
</tr>
</table>

Résultat attendu :

Remarquez que dans le modèle <colspan> est suivie de la valeur 2 (ligne 4) indiquant ainsi que deux cellules seront réunies horizontalement dans le tableau.

Pour centrer le contenu de la cellule, vous n'avez qu'à créer une classe « centrer » qui pourrait aussi servir à centrer le texte au besoin pour tout autre élément comme un paragraphe. Copier ce qui suit dans le CSS :

.centrer:{text-align:center}

Puis changer la ligne 4 par ceci :

<td class="centrer" colspan="2" >Cellule 2<td>

Soit avec <rowspan>. Exemple :

1
2
3
4
5
6
7
8
9
10
11
12

<table class="table" border="1" cellspacing="0" summary="Sommaire"><caption>Une légende ici</caption>
<tr>
<th rowspan="3">Cellule 1</th>
 <td>Cellule 2</td>
</tr>
<tr>
 <td>Cellule 3</td>
</tr>
<tr>
 <td>Cellule 4</td>
</tr>
</table>

Résultat attendu :

Remarquez que dans le modèle <rowspan> est suivie de la valeur 3 (ligne 7) indiquant ainsi que trois cellules seront réunies verticalement dans le tableau.

Voyons maintenant un tableau plus complexe.

LE CONCEPTEUR DE SITE WEB.com

Pour un site professionnel

 514 363-4169
 serge@leconcepteur.ca