-40%
Le deal à ne pas rater :
-40% Polo Lacoste – imprimé crocodile – 5 couleurs dispo
72 € 120 €
Voir le deal

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4528

Les tableaux Empty Les tableaux

Ven 12 Avr 2019 - 14:44

Balises HTML

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 Wink c'est cadeau, ça me fait plaisir ^^).

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

Le code html


Une structure de base

Commençons par le commencement Smile

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".

Idea 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:
Les tableaux Tab1_zpshectfmsg

Idea Ici, j'ai ajouté des bordures pour qu'on se rende bien compte du "tableau" ^^

Des en-tête

Quand on a un tableau, en général, nos lignes et/ou colonnes ont des intitulés Smile 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:
Les tableaux Tab2_zpsapfuwrzo

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

Un titre à notre 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:
Les tableaux Tab3_zpszylpbouz

Idea 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:
Les tableaux Tab4_zps6vkilrek

Fusionnons les cellules

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:
Les tableaux Tab5_zpsgjbisiq4

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

La mise en page du tableau

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

Les bordures

Ici, on peut mettre des bordures uniquement sur le contour du tableau :
Code:
table {
    border: 1px solid #666;
}
Le rendu:
Les tableaux Tab6_zpsfdd9ilcf

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:
Les tableaux Tab7_zpso6skla6w

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:
Les tableaux Tab8_zps5jikqzbm
• 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:
Les tableaux Tab9_zpsysbnjqgx

L'espace entre les cellules

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:
Les tableaux Tab10_zpsm0ppvif1

L'espace entre la bordure et le contenu de la cellule

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:
Les tableaux Tab11_zpsybhviopi

D'autres réglages

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.

J'allais oublier l'astuce !

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:
Les tableaux Tab12_zpsr7lyvjhp

Ça ajoute des tonnes et des tonnes d'espace avant le tableau (en réalité, ça interpréte tous les retours à la ligne Surprised). 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:
Les tableaux Tab13_zpspgprksqe

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



Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses