AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Les tableaux en HTML [En cours]

    Partagez
    avatar
    Invité

    le Lun 11 Avr 2016 - 18:08

    Les tableaux en HTML



    Les tableaux… On en fait à l’école ou même dans la vie de tous les jours pour pouvoir mieux s’y retrouver. On en fait sur des logiciels « classeur » comme Excell pour pouvoir faire des calculs complexes. Et puis parfois on aimerait bien réussir à en coder pour nos forums ! Avoir un petit tableau pour recenser des statistiques que l’on va afficher sur sa PA, ou encore faire des récapitulatifs des différents clans avec les chefs de clan. Bref ils peuvent avoir beaucoup de fonctions différentes, et le plus souvent ils sont mal maîtrisés.

    Personellement j’aurai préféré un tuto sur un template. A quoi va nous servir les tableaux pour nos templates, hein ?

    Justement jeune scarabée ! Pour la plupart vous êtes sur des forums de ForumActif et vous utilisez la version phpBB2 qui est classée comme « la plus simple à utiliser ». Or si on regarde un peu les templates on se rend vite compte qu’ils sont faits sous forme de tableaux ! Et même si l’on prend la version Invision qui est faite avec des blocs on retrouve très vite des tableaux, et le premier se trouve sur notre index de forum ! Vous savez où ?

    Les catégories des forums


    Et oui ! Nos jolies catégories de forums sont des tableaux ! Mais trêve de bavardage. Je vais donc vous apprendre à faire des tableaux en HTML, ainsi vous n’aurez plus d’excuse si vous me cassez un tableau ! Et si cela vous aide à comprendre un peu mieux vos templates, tant mieux ! Ce n’est pas le tout, mais il est temps de toucher du code ! Prenez donc votre éditeur de texte ou ce que vous voulez pour écrire votre code.

    Les bases des tableaux


    Nous y voilà donc !

    Alors ? C’est quoi les balises pour les tableaux ?  Ce n’est pas des « td » que l’on peut voir dans les templates ?

    Et bien presque. En fait les « td » font partis des balises pour les tableaux, mais je vais y venir tout de suite. Un tableau se compose de plusieurs parties, mais la première balise à connaître est « table » qui s’écrit :
    Code:
    <table>
      <!-- Ici sera écrit le contenu du tableau -->
    </table>

    Voilà, nous avons donc le « conteneur » de notre tableau, maintenant il est temps d’y ajouter des lignes et des cellules ! Pour illustrer ce tutoriel nous allons dire que l’on va faire une liste de PNJ dont on souhaite recenser le nom, le rôle et l’âge de chacun. Notre résultat final ressemblera approximativement à ça :

    exemple de tableau


    Vous pourrez bien sûr personnaliser votre tableau autant que vous le souhaitez ! Voici donc nos prochaines balises :
    - tr : elles sont là pour désigner les cellules qui seront dans une même lignes
    - td : ce sont tout simplement nos cellules
    Et tout ceci s'écrit comme ceci :

    Code:
    <table>
     <tr>
       <td>
         Cellule 1, de la ligne 1
       </td>
       <td>
         Cellule 2, de la ligne 1
       </td>
     </tr>
     <tr>
       <td>
         Cellule 1, de la ligne 2
       </td>
       <td>
         Cellule 2, de la ligne 2
       </td>
     </tr>
    </table>

    Ce qui donne le résultat suivant :
    Cellule 1, de la ligne 1Cellule 2, de la ligne 1
    Cellule 1, de la ligne 2Cellule 2, de la ligne 2

    Si vous faites votre tableau dans un message de forum comme moi ici, enlevez tous les sauts de ligne et espaces se trouvant entre les balises, sinon vous aurez un résultat très moche ! Je vous met des codes indentés pour que cela soit plus lisible pour vous.


    Sinon je vous vois déjà venir me dire que là ça ne ressemble pas du tout à un tableau, on a pas de bordures, on ne voit pas la différence entre les cellules, mais notre texte semble tout de même bien placé. Je vais donc vous répondre que maintenant il nous faut du CSS !

    Pour le bien du tutoriel je vous met le CSS séparé du HTML comme si on l'écrivait dans une feuille HTML. Il est bon aussi d'ajouter un "id" ou une "class" à sa table pour les appeler ensuite en CSS afin d'éviter que toutes les tables du forum (surtout sous phpBB2...) ne soient modifiées ! Tout cela est implicite et je ne le précise donc pas.


    Ajoutons donc des bordures à nos cellules :

    Code:
    td {
      border: 1px solid black;
    }
    Cellule 1, de la ligne 1Cellule 2, de la ligne 1
    Cellule 1, de la ligne 2Cellule 2, de la ligne 2

    Nous avons donc nos bordures, mais elles ne sont pas collées ! On va donc ajouter encore un peu de CSS et je vais donc vous apprendre la propriété border-collapse (que l'on peut traduire "coller les bordures entre elles") qui prend en compte 2 valeurs :
    - collapse : les bordures seront collées entre elles, c'est ce que l'on veut
    - separate : les bordures ne sont pas collées, c'est ce que l'on a actuellement (valeur par défaut)
    On a donc dans notre CSS :

    Code:
    table {
      border-collapse: collapse
    }
    td {
      border: 1px solid black;
    }
    Cellule 1, de la ligne 1Cellule 2, de la ligne 1
    Cellule 1, de la ligne 2Cellule 2, de la ligne 2

    Super ! Maintenant appliquons tout cela à notre exemple, et mettons un peu de style à notre tableau !

    Le HTML :
    Code:
    <table>
      <tr>
        <td>
          Carmen
        </td>
        <td>
          34 ans
        </td>
        <td>
          Boulangère
        </td>
      </tr>
      <tr>
        <td>
          Michelle
        </td>
        <td>
          25 ans
        </td>
        <td>
          Pharmacienne
        </td>
      </tr>
    </table>

    Et le CSS :
    Code:
    table {
      margin: auto;
      border-collapse: collapse;
    }
    td {
      text-align: center;
      border: 1px solid black;
      background: lightgrey;
      color: black;
      padding: 5px;
    }

    Ce qui donne :
    Carmen34 ansBoulangère
    Michelle25 ansPharmacienne

    Ça commence à bien ressembler à l'idée de départ, mais il manque la ligne avec "Nom", "Âge" et "Rôle", non ?


    Et bien oui. Justement cette partie du tableau est ce que l'on appelle l'entête, et il se fait avec d'autres balises, il s'agit des balises th. Elles s'utilisent comme les balises td mais sont faites pour créer un entête. On obtient donc :

    En HTML :
    Code:
    <table>
      <tr>
        <th>
          Nom
        </th>
        <th>
          Âge
        </th>
        <th>
          Rôle
        </th>
      </tr>
      <tr>
        <td>
          Carmen
        </td>
        <td>
          34 ans
        </td>
        <td>
          Boulangère
        </td>
      </tr>
      <tr>
        <td>
          Michelle
        </td>
        <td>
          25 ans
        </td>
        <td>
          Pharmacienne
        </td>
      </tr>
    </table>

    Et on ajoute un peu de CSS :
    Code:
    th {
      text-align: center;
      border: 1px solid black;
      color: black; padding: 5px;
      background: grey;
      border: 1px solid black;
    }

    Ce qui nous donne :
    NomÂgeRôle
    Carmen34 ansBoulangère
    Michelle25 ansPharmacienne

    Voilà vous savez désormais faire un tableau basique !

    Pour aller plus loin...


    Je vais maintenant vous donner quelques petites choses en plus. Je vais finir de vous donner les dernières balises et propriétés relatives aux tableaux et je terminerais par vous donner quelques petits conseils pour vous y retrouver et réussir vos tableaux.

    Structurer son tableau


    • Diviser un gros tableau


    Lorsque l'on a un gros tableau, il est bien de pouvoir le structurer. Il sera vite intéressant de pouvoir séparer plus clairement l'en-tête du tableau, de son corps ou même de son pied (oui on peut faire des pieds de tableaux !)
    Pour cela il existe des balises très simples en HTML, et vous pourrez les retrouver souvent dans vos templates de ForumActif :
    - thead : elle désigne l'en-tête du tableau, on y met les balises th vues précédemment
    - tbody : elle désigne cette fois le corps du tableau, on y met les balises td et non les th
    - tfoot : cette dernière désigne le pied de tableau, en général on y met le même contenu que l'en-tête, et comme l'en-tête on utilise les balises th.

    Voici avec notre exemple :
    Code:
    <table>
      <thead>
        <tr>
          <th>Nom</th>
          <th>Âge</th>
          <th>Rôle</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Nom</th>
          <th>Âge</th>
          <th>Rôle</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Carmen</td>
          <td>34 ans</td>
          <td>Boulangère</td>
        </tr>
        <tr>
          <td>Michelle</td>
          <td>25 ans</td>
          <td>Pharmacienne</td>
        </tr>
      </tbody>
    </table>

    Ce qui nous donne :
    NomÂgeRôle
    NomÂgeRôle
    Carmen34 ansBoulangère
    Michelle25 ansPharmacienne

    Evidemment cela rend mieux avec un tableau plus long, mais pour éviter de surcharger, j'ai préféré reprendre notre exemple.

    Vous pouvez constater que j'ai placé les balises dans l'ordre thead, tfoot, tbody ce qui est le mieux, mais vous les retrouvez tout de même le plus souvent dans l'ordre thead, tbody, tfoot.


    • Un petit truc en plus : le titre !


    Avoir un petit titre de tableau c'est toujours cool ! On peut préciser de façon simple ce que désigne exactement notre tableau. Et pour cela on a une balise toute simple : caption. Elle se place juste après la balise table du début de notre tableau et notre premier tr, comme ceci :
    Code:
    <table>
      <!-- Votre titre de tableau ici -->
      <caption>Nos PNJ</caption>
      <tr>
        <th>Nom</th>
        <th>Âge</th>
        <th>Rôle</th>
      </tr>
      <tr>
        <td>Carmen</td>
        <td>34 ans</td>
        <td>Boulangère</td>
      </tr>
      <tr>
        <td>Michelle</td>
        <td>25 ans</td>
        <td>Pharmacienne</td>
      </tr>
    </table>

    Et je suis sympa je vous donne le CSS que j'ai mit à notre titre pour vous montrer Wink
    Code:
    caption {
      font-weight: bold;
      margin-bottom: 10px;
      color: #000;
      font-size: 16px;
    }

    Ce qui nous donne :
    Nos PNJ
    NomÂgeRôle
    Carmen34 ansBoulangère
    Michelle25 ansPharmacienne


    Vous noterez que par défaut le titre de tableau est centré au dessus du tableau. Vous pouvez bien sûr changer cela, pour l'alignement rien de plus simple il suffit d'utiliser la propriété CSS text-align comme pour du texte classique. Vous pouvez aussi mettre votre titre sous votre tableau en utilisant la propriété caption-side qui prend 2 valeurs :
    - top : qui place le titre au dessus du tableau (par défaut)
    - bottom : qui place le titre en dessous du tableau.

    Exemple
    Code:
    caption {
      caption-side: bottom;
    }

    Qui donne :
    Nos PNJ
    NomÂgeRôle
    Carmen34 ansBoulangère
    Michelle25 ansPharmacienne


    Attention... FUSION !


    Parfois il est utile de fusionner des cellules que ce soit horizontalement ou verticalement, et il existe des propriétés pour cela ! En fait nous en avons deux, et elles s'appliquent aux balises td ou th, et vous les avez sûrement déjà rencontré dans les templates de FA :
    - colspan : littéralement on traduirait "fusion de colonnes", elle sert donc à fusionner des cellules horizontalement.
    - rowspan : l'idée est la même, sauf que cette fois on a une "fusion de lignes", autrement dit on fusionne des cellules verticalement.

    Le tout maintenant en pratique ! On commence horizontalement avec :
    Code:
    <table>
      <tr>
        <th>colonne 1</th>
        <th>colonne 2</th>
      </tr>
      <tr>
        <td>cellule 1</td>
        <td>cellule 2</td>
      </tr>
      <tr>
        <td colspan="2">2 cellules fusionnées</td>
      </tr>
    </table>

    Ce qui donne :
    colonne 1colonne 2
    cellule 1cellule 2
    2 cellules fusionnées

    Et verticalement :
    Code:
    <table>
       <tr>
           <th>colonne 1</th>
           <th>colonne 2</th>
       </tr>
       <tr>
           <td>cellule 1</td>
           <td rowspan="2">2 cellules fusionnées</td>
       </tr>
       <tr>
           <td>cellule 2</td>
       </tr>
    </table>

    Ce qui donne :
    colonne 1 colonne 2
    cellule 1 2 cellules fusionnées
    cellule 2

    Réussir avec les tableaux



    Dernière édition par Shaneliae le Ven 24 Juin 2016 - 14:47, édité 10 fois
    avatar
    Neva
    FémininAge : 27Messages : 18564

    le Mer 11 Mai 2016 - 17:00

    Salut Sha,
    Tu en est où de ce tuto ? Tu t'en sors ?



     
    avatar
    Invité

    le Mer 11 Mai 2016 - 17:01

    Coucou Neva ! Pardon de mon inactivité sur ce tuto, je mets en pause sa rédaction le temps de mes partiels ^^
    avatar
    Onyx
    FémininAge : 24Messages : 3134

    le Jeu 26 Mai 2016 - 3:42

    Salut!

    A-Lice ne donne plus de signe de vie depuis presque un an, mais tu as pensé à combiner son étape du cursus avec ton tutoriel? Ou peut-être voir à juste remplacer son étape par ce tuto? Je trouve que tu apportes certains éléments dont elle ne parle pas, mais en même temps il y a beaucoup de répétitions. Il me semble que cela serait un peu dommage d'avoir un tuto et une étape de cursus si semblable.
    Tu l'as écrit toi-même sur ta demande de recrutement en plus :p
    - ne pas hésiter à passer dans la section des demandes de tuto et ne pas hésiter à signaler si un tuto a déjà été écrit ou non


    Aussi, je te conseillerais de peut-être rajouter une petite partie qui explique certaines propriétés qu'on retrouve sur FA et qui ne sont plus à jour :

    Il est possible qu'à travers votre long voyage parmis les templates de Forumactif (ces labyrinthes incompréhensibles), vous trouviez certains éléments que vous n'avez pas vu lors du tutoriel. La majorité de ces éléments ne sont plus supportés par HTML5 et il est recommendé d'utilisé leur équivalent en CSS. Voici une petite liste des éléments que vous pouvez retrouver directement dans la balise "table" ou les autres balises des tableaux et leur équivalent en CSS que vous pouvez utiliser :

    Spoiler:
    Code:
    <table><tbody><tr><td valign="center">Contenu</td></tr></tbody></table>
    Valign : Cela sert à aligner verticalement le contenu d'une cellule ou du tableau. Ici, le contenu est centré verticalement.
    En CSS, elle peut être remplacée par la propriété "vertical-align".

    Code:
    <table><tbody><tr><td align="center">Contenu</td></tr></tbody></table>
    Align : Cela sert à aligner horizontalement le contenu d'une cellule ou du tableau. Ici, le contenu est centré.
    En CSS, elle peut être remplacée par la propriété "text-align". Pour centrer carrément le tableau, on vous recommende d'utiliser la propriété CSS "margin: auto;".

    Code:
    <table cellpadding="1"><tbody><tr><td>Contenu</td></tr></tbody></table>
    Cellpadding : Cela permet de mettre un padding égal dans tous les cellules d'un tableaux. Ici, le padding des cellules est de 1px.
    En CSS, il vous suffit de mettre une class à votre tableau et de mettre ceci votre CSS ".class td {padding: XX;}" en remplaçant "XX" par le padding que vous voulez mettre.

    Code:
    <table cellspacing="1"><tbody><tr><td>Contenu</td></tr></tbody></table>
    Cellspacing : Cela permet de créer un espace entre les cellules et entre les cellules et le bord du tableau. Ici, l'espace entre les cellules est de 1px.
    L'équivalent en CSS est "border-spacing".

    Code:
    <table border="5"><tbody><tr><td>Contenu</td></tr></tbody></table>
    Border : Cela permet de créer une bordure automatique sur toutes les cellules du tableau et autour du tableau. Plus la valeur est élevée, plus le contour du tableau est gros. Ici, la bordure des cellules serait de 1px et la bordure du tableau de 5px.
    L'équivalent en CSS est "border" pour le tableau. Pour mettre la même bordure à tous les cellules, vous pouvez mettre une class à votre tableau et de mettre ceci votre CSS ".class td {border: XX;}" en remplaçant "XX" par la valeur de la bordure des cellules.

    Code:
    <table width="100%"><tbody><tr><td>Contenu</td></tr></tbody></table>
    Width : Permet d'établir la largeur du tableau ou d'une cellule. Dans cet exemple, le tableau aurait une largeur de 100% de la page.
    En CSS, elle peut être remplacée par la propriété "width".

    Code:
    <table height="46"><tbody><tr><td>Contenu</td></tr></tbody></table>
    Height : Permet d'établir la hauteur du tableau ou d'une cellule. Dans cet exemple, le tableau aurait une hauteur de 46px.
    En CSS, elle peut être remplacée par la propriété "height".



    avatar
    Invité

    le Jeu 26 Mai 2016 - 12:08

    Merci beaucoup Onyx pour cet avis !

    En fait je me suis rendue compte après avoir commencé ce tuto qu'il y avait une étape de cursus et j'étais justement en train de réfléchir si j'avais meilleur temps de demander une fusion avec le cursus ou juste annuler ce tuto :hum:

    Merci aussi pour les indications sur FA ! C'est vrai que je n'y ai pas pensé !
    Contenu sponsorisé


      La date/heure actuelle est Mar 23 Oct 2018 - 3:15