ct

Chapitre 6 - Les tableaux

Les tableaux sont souvent utiles pour organiser ses informations quand on crée des sites web.
Pour cela on va utiliser la balise  <table>  mais un tableau à besoin de cellules.
Pour cela on va utiliser deux autres balises, <tr> et <td>
<tr> : Indique une nouvelle ligne
Par exemple si l’on voudrait faire un tableau avec une seule ligne, on écrira ceci :
<table>
     <tr> C’est un tableau avec une seule ligne</tr>
</table>
Et la balise <td> sert à faire une nouvelle cellule, regarder c’est exemple :
<table>
     <tr>
          <td>Cellule1 Ligne1</td>
          <td>Cellule2 Ligne1</td>
     </tr>
     <tr>
          <td>Cellule1 Ligne2</td>
          <td>Cellule2 Ligne2</td>
     </tr>
</table>
Essayez le, voilà le résultat :
 
Mais, vous allez me dire, mais je peux faire pareil :
<p>
     Cellule1 Ligne1 Cellule2 Ligne1<br/>
     Cellule1 Ligne2 Cellule2 Ligne2
</p>
Ce qui affichera le même résultat.
Mais ne vous inquiétez pas, il va falloir lui donnez plus de propriétés à notre tableau, par exemple des bordures entres les cellules.
Alors, ce que l’on fait, on va insérer dans la partie CSS du code :
td
{
    border: 1px solid black;
}

Le “td” avant les accolades indique que toutes les cellules auront une bordure.
Ce qui rend ça :
 
Ca ressemble déjà un peu plus à un tableau, mais le problème c’est que normalement dans un tableau les cellules ce collent, et là, elles sont séparé. Pour cela il va falloir ajouter autre chose au CSS.
On avait ajouté notre CSS dans la partie « td », cette fois si, on va le mettre dans la partie « table » car on veut que cela ce passe sur toutes les cellules de notre tableau.
Donc on va faire cela
table
{
    border-collapse: collapse;
}

Donc on va se retrouver avec un code qui ressemble à ça :
<html>
     <head>
     <style>
     table
     {
         border-collapse: collapse;
     }
     td
     {
         border: 1px solid black;
     }

     </style>
     </head>

     <table>
          <tr>
          <td>Cellule1 Ligne1</td>
          <td>Cellule2 Ligne1</td>
          </tr>
          <tr>
          <td>Cellule1 Ligne2</td>
          <td>Cellule2 Ligne2</td>
          </tr>

     </table>
</html>
Vous avez réalisé un tableau en HTML !
Mais on peut ajouter d’autres choses à notre tableau.
Donner un entête à notre tableau : c’est donner un partie en haut du tableau, par exemple,
Entête         Entête
 Mon Tableau    Mon Tableau
 Mon Tableau    Mon Tableau

Tous ce que l’ont fait c’est d’ajouter un série de nouvel cellule mais avec un autre balise ; On va remplace <td> par <th>
Ce qui nous donnerait un code comme ceci :
<table>
     <tr>
     <th>Colonne1</th>
     <th>Colonne2</th>
     </tr>
     <tr>
     <td>Cellule1 Ligne1</td>
     <td>Cellule2 Ligne1</td>
     </tr>

     <tr>
     <td>Cellule1 Ligne2</td>
     <td>Cellule2 Ligne2</td>
     </tr>
</table>
Puis l’on ajouter un tout petit détail au CSS,
Dans cette partie :
td
{
    border: 1px solid black;
}

Changez ceci :

td, th
{
    border: 1px solid black;
}

  On indique que la bordure est de 1 pixel pour les cellules et les entêtes.
Vous savez maintenant comment créer des tableaux en HTML, vous pouvez toujours modifier un peu le CSS du tableau pour le rendre un peu plus beau…

Aucune note. Soyez le premier à attribuer une note !

×