Les tableaux

Hellow toi !

Dans ce tutoriel, nous allons voir ensemble comment créer des tableaux en html (et aussi, une petite astuce pour avoir un tableau aéré sur les forums c'est cadeau, ça me fait plaisir ^^).

Tu vas voir, ce n'est pas bien compliqué.




Commençons par le commencement

Tout d’abord, il y a la balise qui va définir ton tableau :

Code:

<table>Mon tableau sera ici </table>

Ensuite, les balises qui définissent les lignes et les colonnes :

Code:

<tr> ligne </tr>
<td> colonne </td>

Juste que là, c'est "easy".

La base html d'un tableau s'écrit donc comme ça :

Code:

<table>
    <tr>
      <td>Ligne 1<br />Colonne 1</td>
      <td>Ligne 1<br />Colonne 2</td>
      <td>Ligne 1<br />Colonne 3</td>
    </tr>
    <tr>
      <td>Ligne 2<br />Colonne 1</td>
      <td>Ligne 2<br />Colonne 2</td>
      <td>Ligne 2<br />Colonne 3</td>
    </tr>
    <tr>
      <td>Ligne 3<br />Colonne 1</td>
      <td>Ligne 3<br />Colonne 2</td>
      <td>Ligne 3<br />Colonne 3</td>
    </tr>
  </table>

Le rendu:

Quand on a un tableau, en général, nos lignes et/ou colonnes ont des intitulés C'est ce qu'on appelle les en-tête du tableau. On les code grâce à des balises th qui s'utilisent comme les td :

Code:

<table>
    <tr>
      <th>Fruit</th>
      <th>Couleur</th>
      <th>Saison</th>
    </tr>
    <tr>
      <td>Clémentine</td>
      <td>Orange</td>
      <td>Hiver</td>
    </tr>
    <tr>
      <td>Banane</td>
      <td>Jaune</td>
      <td>Hiver</td>
    </tr>
  </table>

Le rendu:

Evidemment, comme c'est une en-tête, cette ligne doit être la première du tableau


Enfin, pour finaliser la structure de notre tableau, on peut, si on le desire, lui ajouter un titre. Pour cela, on va utiliser la balise caption qui se place juste avant l'en-tête, au tout début du tableau.

Code:

<table>
    <caption>Quel fruit manger et quand ?</caption>
    <tr>
      <th>Fruit</th>
      <th>Couleur</th>
      <th>Saison</th>
    </tr>
    <tr>
      <td>Clémentine</td>
      <td>Orange</td>
      <td>Hiver</td>
    </tr>
    <tr>
      <td>Banane</td>
      <td>Jaune</td>
      <td>Hiver</td>
    </tr>
  </table>

Le rendu:

Astuce :
Si jamais, pour une raison ou une autre tu veux mettre ton titre en-dessous de ton tableau, il te suffit d'ajouter cette ligne de CSS à la css de ton tableau :

Code:

caption-side: bottom;

ce qui donne :

Code:

table{
  caption-side: bottom;
}

Le rendu:

Il est possible de fusionner les cellules verticalement ou horizontalement

• colspan="Nombre de cellules" : définit le nombre de cellules à fusionner horizontalement.
• rowspan="Nombre de cellules" : définit le nombre de cellules à fusionner verticalement.

Par exemple :

Code:

<table>
    <tr>
      <td colspan="2">Ligne 1<br />Colonne 1 & 2</td>
      <td rowspan="2">Ligne 1<br />Colonne 3<br />+<br />Ligne 2<br />Colonne 3</td>
    </tr>
    <tr>
      <td>Ligne 2<br />Colonne 1</td>
      <td>Ligne 2<br />Colonne 2</td>
    </tr>
    <tr>
      <td>Ligne 3<br />Colonne 1</td>
      <td>Ligne 3<br />Colonne 2</td>
      <td>Ligne 3<br />Colonne 3</td>
    </tr>
    <tr>
      <td colspan="3">Ligne 4<br />Colonne 1 & 2 & 3</td>
    </tr>
  </table>

Le rendu:

Pour que cela fonctionne, il faut que ton tableau contienne au moins une ligne "normale" ^^


Eh oui ! Comme pour chaque balise html, il est possible de personnaliser la CSS d'un tableau ^^


Ici, on peut mettre des bordures uniquement sur le contour du tableau :

Code:

table {
    border: 1px solid #666;
}

Le rendu:

Ou sur une balise plus spécifique : (je mets des couleurs différentes pour que tu te rendes compte ^^).
>> css :

Code:


#tab2{
  border-collapse: separate;
}

#tab2{
  border: 3px solid #666;
}

#tab2 th{
  border: 1px solid red;
  border-bottom: 3px solid red;
}

#tab2 td{
  border: 2px solid green;
}

>> html :

Code:

<table id="tab2">
    <tr>
      <th>En-tête colonne 1</th>
      <th>En-tête colonne 2</th>
      <th>En-tête colonne 3</th>
    </tr>
    <tr>
      <td>Ligne 1<br />Colonne 1</td>
      <td>Ligne 1<br />Colonne 2</td>
      <td>Ligne 1<br />Colonne 3</td>
    </tr>
    <tr>
      <td>Ligne 2<br />Colonne 1</td>
      <td>Ligne 2<br />Colonne 2</td>
      <td>Ligne 2<br />Colonne 3</td>
    </tr>
    <tr>
      <td>Ligne 3<br />Colonne 1</td>
      <td>Ligne 3<br />Colonne 2</td>
      <td>Ligne 3<br />Colonne 3</td>
    </tr>
  </table>

Le rendu:

Il existe également une propriété CSS qui signifie "comment les bordures doivent se comporter entre elles" ? Cette propriété est la suivante : border-collapse.

Elle peut prendre comme valeur :
• collapse : les bordures seront collées entre elles

Code:

table{
  border-collapse: collapse;
}

Le rendu:

• separate : les bordures seront dissociés (c'est la valeur par défaut ; autrement dit, c'est ce cas que tu auras si tu ne précises rien)

Code:

table{
  border-collapse: separate;
}

Le rendu:

Evidemment, pour cette partie, il faut que les bordures soient en separate (voir le point précédent ^^).

Ici, on va utiliser l'attribut HTML cellspacing que l'on va mettre directement dans la balise table :

Code:

<table id="tab1" cellspacing="20px">
    <tr>
      <td>Ligne 1<br />Colonne 1</td>
      <td>Ligne 1<br />Colonne 2</td>
      <td>Ligne 1<br />Colonne 3</td>
    </tr>
    <tr>
      <td>Ligne 2<br />Colonne 1</td>
      <td>Ligne 2<br />Colonne 2</td>
      <td>Ligne 2<br />Colonne 3</td>
    </tr>
    <tr>
      <td>Ligne 3<br />Colonne 1</td>
      <td>Ligne 3<br />Colonne 2</td>
      <td>Ligne 3<br />Colonne 3</td>
    </tr>
  </table>

Le rendu:

On peut aussi faire en sorte que le texte ne soit pas collé au bordure de nos cases. Pour cela, on va utiliser l'attribut HTML cellpadding que l'on va mettre directement dans la balise table :

Code:

<table cellpadding="4px">
    <caption>Avec espace</caption>
    <tr>
      <td>Ligne 1<br />Colonne 1</td>
      <td>Ligne 1<br />Colonne 2</td>
      <td>Ligne 1<br />Colonne 3</td>
    </tr>
    <tr>
      <td>Ligne 2<br />Colonne 1</td>
      <td>Ligne 2<br />Colonne 2</td>
      <td>Ligne 2<br />Colonne 3</td>
    </tr>
    <tr>
      <td>Ligne 3<br />Colonne 1</td>
      <td>Ligne 3<br />Colonne 2</td>
      <td>Ligne 3<br />Colonne 3</td>
    </tr>
  </table>

Le rendu:

Il y a pas mal d'autres propriétés CSS que l'on peut utiliser, mais je ne vais pas toutes les lister ici. Si l'envie t'en dit (et si ça t'intéresse), tu peux jeter un oeil à ces 2 documentations :
• MDN - Premiers pas avec les tableaux
• W3C Recommendation - Toutes les propriétés liées aux tableaux.

Si tu as des questions, n'hésite pas à poster dans notre section d'aide.


Poisson rouge que je suis, j'allais oublier cette partie ^^ Si tu as déjà mis des tableaux dans tes messages sur ton forum, tu as du remarquer ce phénomène étrange :

Code:

<table>
    <tr>
      <td>Ligne 1<br />Colonne 1</td>
      <td>Ligne 1<br />Colonne 2</td>
      <td>Ligne 1<br />Colonne 3</td>
    </tr>
    <tr>
      <td>Ligne 2<br />Colonne 1</td>
      <td>Ligne 2<br />Colonne 2</td>
      <td>Ligne 2<br />Colonne 3</td>
    </tr>
    <tr>
      <td>Ligne 3<br />Colonne 1</td>
      <td>Ligne 3<br />Colonne 2</td>
      <td>Ligne 3<br />Colonne 3</td>
    </tr>
  </table>

Le rendu:

Ça ajoute des tonnes et des tonnes d'espace avant le tableau (en réalité, ça interpréte tous les retours à la ligne ). La solution que tu as probablement envisager, c'est de supprimer tous les retours à la ligne. Mais là, ça devient vite illisible :

Code:

<table><tr><td>Ligne 1<br />Colonne 1</td><td>Ligne 1<br />Colonne 2</td><td>Ligne 1<br />Colonne 3</td></tr><tr><td>Ligne 2<br />Colonne 1</td><td>Ligne 2<br />Colonne 2</td><td>Ligne 2<br />Colonne 3</td></tr><tr><td>Ligne 3<br />Colonne 1</td><td>Ligne 3<br />Colonne 2</td><td>Ligne 3<br />Colonne 3</td></tr></table>

L'astuce consiste donc à utiliser des commentaires HTML ^^

Code:

<!-- Je suis un commentaire ^^ -->

Ce qui donne :

Code:

<table><!--
    --><tr><!--
      --><td>Ligne 1<br />Colonne 1</td><!--
      --><td>Ligne 1<br />Colonne 2</td><!--
      --><td>Ligne 1<br />Colonne 3</td><!--
    --></tr><!--
    --><tr><!--
      --><td>Ligne 2<br />Colonne 1</td><!--
      --><td>Ligne 2<br />Colonne 2</td><!--
      --><td>Ligne 2<br />Colonne 3</td><!--
    --></tr><!--
    --><tr><!--
      --><td>Ligne 3<br />Colonne 1</td><!--
      --><td>Ligne 3<br />Colonne 2</td><!--
      --><td>Ligne 3<br />Colonne 3</td><!--
    --></tr><!--
  --></table>

Le rendu:

Visuellement, on a ce qu'on veut, et nos yeux ne saignent pas quand on veut lire. Elle est pas belle la vie ?