Header

Partagez | 

[HTML] Faire des tableaux

Message Sujet: [HTML] Faire des tableaux   Dim 6 Mar - 9:36

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
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:
 

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:
 

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:
 

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:
 

Fusionnons les cellules

Partie écrite par Kiri
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:
 

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:
 

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:
 

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 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:
 

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




Tu rencontres un souci avec ce tutoriel ? Viens poser ta ou tes questions [ici]

Idea N'oublie pas de lire et de suivre les règles de la section



Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "Faire des tableaux en HTML" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[HTML] Faire des tableaux
Page 1 sur 1
 Sujets similaires
-
» Attribut style de balise html ( ou bbcode tableaux ) utilisées à mauvais escients
» (HTML) : alignement horizontal de 2 tableaux
» Comment créer des Catégories en HTML/CSS ou autre?
» puis je mettre un tableau fait avec microsoft works
» pour mettre en gras et couleur rouge svp ( résolu ) merci
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens