- PêpêcheMascotte
- Messages : 4428
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 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
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:
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 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
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:
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;
- Code:
table{
caption-side: bottom;
}
- Le rendu:
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:
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:
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;
}
- 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:
- Code:
table{
border-collapse: separate;
}
- Le rendu:
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:
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:
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:
Ç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 ^^ -->
- 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 ?
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum