Canalblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Publicité
Guide pour apprendre le langage HTML
15 janvier 2011

Les tableaux en HTML

Les tableaux en langage HTML(<table>) furent au départ créer pour communiqué des données tabulaires(données académique,scientifique,..), mais ils furent à la place utilisé pour la mise en page de document html(mais aujourd'hui on leurs préfère une feuille de style(CSS) car plus facile à modifier par le suite).

Un tableau est composé de plusieurs éléments dont voici une liste :

- <table></table> : première balise qui sert à marquer le début et la fin d'un tableaux (toutes les autres balises seront placé entre ces deux balises).
- <caption>...</caption> : pour donner un titre au tableau (dois être placé immédiatement après la balise <table>)
- <tr>...</tr> : les lignes du tableau.
- <td>...</td> : les cellules de textes/données(placé entre les balises <tr></tr>).
- <th>...</th> : cellules d'entête.
- <col> : permet de définir les paramètre d'une ou plusieurs colonnes.
- <colgroup>...</colgroup> : définit les propriétés d'un groupe de colonnes.
- <thead>...</thead> : l'entête d'un tableau.
- <tbody>...</tbody> : le corps du tableau.
- <tfoot>...</tfoot> : le pied du tableau.

Bien sur tout ces éléments ne sont pas obligatoire pour créer une tableau. Un tableau simple peut se composé comme suit :

<table>
<tr>
  <td>texte 1</td>
  <td>texte 2</td>
<tr>
<tr>
  <td>texte 3</td>
  <td>texte 4</td>
<tr>
</table>

Les tableaux sont souvent accompagné d'attributs pour définir la taille, les bordures, la couleurs etc... (même si ces attributs fonctionne encore, il est préférable aujourd'hui  d'utiliser une feuille de style(CSS) à la place).

Les bordures
Par défaut un tableau ne contient pas de bordure, pour en ajouter il faut faire appel à l'attribut "border". ex:

<table border="2">
<tr>
  <td>...</td>
</tr>
</table>

Ceci nous donneras un tableau avec des bordures d'une taille de 2 pixels.

Définir la taille du tableau
Pour définir la hauteur et la largeur d'un tableau il faut utiliser "width"(largeur) et "height"(hauteur). ex:

<table width="650" height="800">
<tr>
  <td>...</td>
</td>
</table>

Ce qui nous donnera un tableau de 650 pixels de largeur et 800 pixels de hauteur. (Note: la hauteur et la largeur peuvent aussi être exprimé en pour cent (200%, 100%, 50%, etc..).

Ces deux attribut peuvent également être utilisé avec les balises <td></td>.
<table width="450" height="600">
<tr>
  <td width="50%">..</td>
  <td width="25%">..</td>
  <td width="25%">..</td>
<tr>
</table>


Alignement du tableau

L'attribut "align" permet de déterminer si le tableau doit être placé à gauche(left), à droite(right) ou au centre(center).

<table align="center">
<tr>
  <td>..</td>
</tr>
</table>

Définir la couleur
Pour définir la couleur de fond du tableau il faut utiliser l'attribut bgcolor. ex:

<table bgcolor="#FF0000">
<tr>
  <td>...</td>
</td>
</table>

Vous pouvez également utiliser cet attribut pour les cellules(<td>), les rangée de tableau(<tr>), ou les cellules d'entête(<th>).

Remarque: aujourd'hui on préfère le définir avec une feuille de style(CSS).

Il est possible aussi de définir la couleur des bordures à l'aide de l'attribut bordercolor :

<table bordercolor="#FF0000">

Mais comme pour bgcolor nous préférons aujourd'hui utiliser une feuille de style.

Espace entre le bord des cellules et le texte
Pour définir l'espace entre les bordures des cellules de votre tableau et les texte qu'elles contient, il faut utiliser l'attribut cellpadding. ex:

<table width="250" height="250" cellpadding="5">
<tr>
  <td>texte 1</td>
  <td>texte 2</td>
</tr>
<tr>
  <td>texte 3</td>
  <td>texte 4</td>
<tr>
</table>

Ce qui donnera un espace de 5 pixels entre le texte et le bord de vos cellule.

Espace entre les cellules
Pour définir l'espace entre les cellules il faut utiliser l'attribut cellspacing. ex:

<table width="300" height="300" cellspacing="10">
<tr>
  <td>texte 1</td>
  <td>texte 2</td>
</tr>
<tr>
  <td>texte 3</td>
  <td>texte 4</td>
<tr>
</table>

Dans l'exemple un espace de 10 pixels sépare les cellules.

Bordures visibles
Il est possible de déterminer quels parties de vos bordures seront visible à l'aide de l'attribut frame="valeur" (l'attribut border doit être présent et sa valeur ne dois pas être 0)

Les différentes valeurs pouvant être utiliser avec l'attribut frame sont :
- box : c'est la valeur par défaut lorsque vous utiliser l'attribut border.
- void : rend les bords extérieur invisible, néanmoins des bords seront visible autours de l'intérieur de vos cellules.
- above : seul la bordure du dessus est affiché.
- below : n'affiche que la bordure du dessous.
- hsides : pour n'afficher que les bordures horizontales.
- vsides : pour n'afficher que les bordures verticales.
- lhs : n'affiche que la bordure gauche.
- rhs : n'affiche que la bordure droite.

Exemple :

<table border="2" frame="below">
<tr>
  <td>..</td>
</tr>
</table>

Les lignes de quadrillage
Il est possible de spécifier quel ligne de quadrillage doivent être visible. Pour ça nous utilisons l'attribut rules="valeur"(ne fonctionne que si l'attribut border contient une valeur supérieur à 0).

Voici un liste des valeurs pouvant être appliqué :
- none : n'afficher aucune lignes.
- all : tout affiché (valeur par défaut).
- groups : pour n'afficher que les lignes entre l'entête, le corps et le pied du tableau.
- rows : seul les lignes entre les rangées sont affiché.
- cols : pour afficher seulement les lignes entre les colonnes.

Exemple :

<table border="1" rules="rows">
<tr>
  <td>..</td>
</tr>
</table>

La suite dans le prochain article...

Publicité
Publicité
Commentaires
Publicité
Newsletter
Guide pour apprendre le langage HTML
Publicité