AccueilRechercherS'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.

Le Deal du moment : -14%
Climatiseur réversible mobile (chaud et froid) ...
Voir le deal
299.99 
Le deal à ne pas rater :
Kingston A400 – SSD interne – 2.5 » – 960 Go
81.9
Voir le deal

    Partie 1 - Etape 7b (annexe) : Les tableaux en plus profond

    Onyx
    Onyx
    FémininAge : 26Messages : 3317

    le Lun 18 Avr 2016 - 6:53

    Étape 7b : Les tableaux en plus profond et comment les manipuler



    Vous avez vu, à l'étape 7, ce qu'était un tableau et ses principales composantes :
    Code:
    <table> /*Tableau*/
      <tbody> /*Contenu du tableau*/
        <tr> /*Rangée du tableau*/
          <td> /*Cellule dans une rangée du tableau*/
          </td>
        </tr>
      </tbody>
    </table>

    Si vous regardez les templates de la version phpBB2 de Forumactif, vous constaterez qu'ils sont remplis de tableaux imbriqués les uns dans les autres. C'est une mauvaise pratique puisque les tableaux devraient être utilisés uniquement pour montrer des données et non pour mettre en page votre page (si on veut un effet similaire, il est possible d'utiliser Grid-layout).

    Par conséquent, cette annexe vous sera utile dans 2 situations :
    - Vous voulez faire un tableau de données.
    - Vous voulez jouer avec les tableaux de la version phpBB2 de forumactif.

    Voici ce que cette annexe vous montrera :
    - Les autres balises importantes : caption, thead, th, tbody et tfoot
    - Fusionner des cellules : rowspan et colspan
    - Mettre en forme un tableau
    - Attributs dépréciés


    Autres balises importantes



    Avec vos lectures précédentes, vous savez déjà que la structure d'un tableau est la suivante :
    Code:
    <table> /*Tableau*/
      <tbody> /*Contenu du tableau*/
        <tr> /*Rangée du tableau*/
          <td> /*Cellule dans une rangée du tableau*/
          </td>
        </tr>
      </tbody>
    </table>

    Si on veut avoir un tableau qui ressemble un véritable tableau tel qu'on les voit dans les livres, vous vous retrouveriez plutôt avec quelque chose comme ceci :
    Code:
    <table>
      <caption>Budget pour 2020</caption>
      <thead>
        <tr>
          <th>Objets</th>
          <th>Dépenses</th>
          <th>Budget dépassé</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Beignes</th>
          <td>3,000</td>
          <td>Non</td>
        </tr>
        <tr>
          <th>Café</th>
          <td>18,000</td>
          <td>Oui</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Total</th>
          <td>21,000</td>
          <td>50%</td>
        </tr>
      </tfoot>
    </table>

    Qui donnerait ceci :

    Budget pour 2020
    ObjetsDépensesBudget dépassé
    Beignes3,000Non
    Café18,000Oui
    Total21,00050%

    Wooo ! Il y a des nouveautés, c'est quoi tout ça ?

    Pas de panique ! On va y aller étape par étape, ça ira bien ^^





    caption



    La première nouvelle balise est caption :
    Code:
    <caption>Budget pour 2020</caption>

    Budget pour 2020

    caption indique tout tout simplement le titre de votre tableau.





    thead et th



    Les deuxième et troisième nouvelles balises sont thead et th :
    Code:
      <thead>
        <tr>
          <th>Objets</th>
          <th>Dépenses</th>
          <th>Budget dépassé</th>
        </tr>
      </thead>

    ObjetsDépensesBudget dépassé

    thead est utilisé pour regrouper tout ce qu'il y a dans l'en-tête du tableau. Cela veut dire que si vous avez plusieurs lignes, le thead va servir à séparer la ligne qui inclut les titres des colonnes du reste des autres lignes. Si vous n'avez pas d'en-tête, vous pouvez vous en passer. En fait, beaucoup ne s'en servent pas.

    th remplace td dans certaines circonstances :
    Lorsque cela désigne un en-tête ou une catégorie (dans notre exemple, l'entête et les cellules de la première colonne sont tous des th.)
    De plus, par défaut, les cellules qui sont en th sont en gras.





    tbody



    On le connait déjà :
    Code:
      <tbody>
        <tr>
          <th>Beignes</th>
          <td>3,000</td>
          <td>Non</td>
        </tr>
        <tr>
          <th>Café</th>
          <td>18,000</td>
          <td>Oui</td>
        </tr>
      </tbody>

    Beignes3,000Non
    Café18,000Oui

    Je sais, vous l'avez déjà vu. On vous a dit que c'était essentiel de l'inclure dans votre tableau. Pourquoi?

    tbody désigne "corps" du tableau, soit le contenu du tableau autre que l'en-tête et le bas.
    Pas de tbody, pas de données dans votre tableau !





    tfoot



    La dernière nouvelle balise est tfoot :
    Code:
      <tfoot>
        <tr>
          <th>Total</th>
          <td>21,000</td>
          <td>50%</td>
        </tr>
      </tfoot>

    Total21,00050%

    tfoot est utilisé pour regrouper tout ce qu'il y a dans "pied", soit le bas du tableau. Cela veut dire que si vous avez plusieurs lignes, le tfoot va servir à séparer la ligne du bas (qui correspond souvent à la ligne des totaux) du reste des autres lignes. Si vous n'avez pas de ligne de bas, vous pouvez vous en passer. En fait, beaucoup ne s'en servent pas.


    On résume :
    • table est le tableau lui-même.

    • tr est une ligne (une rangée) du tableau qui contient des cellules.

    • td est une cellule du tableau.

    • th est une cellule du tableau mise en gras utilisée pour les en-têtes ou les titres de catégories.

    • caption est le titre du tableau.

    • thead est la tête du tableau et regroupe la ligne d'en-tête.

    • tbody est le corps du tableau et regroupe les lignes du contenu.

    • tfoot est le pied du tableau et regroupe la ligne du bas.


    Et voilà ! Ce n'était pas si effrayant finalement ^^




    Fusionner des cellules - rowspan et colspan



    Dans le meilleur des mondes, toutes nos rangées ont le même nombre de colonnes et toutes nos colonnes ont le même nombre de rangées. Sauf que des fois... Ce serait utile de pouvoir fusionner des colonnes ou des rangées, non?

    C'est actuellement possible!

    Note : Dans les exemple, je n'ai pas mis les "table" et les "tbody". Vous devez les mettre, j'ai juste fait ça histoire de raccourcir un peu les exemples.





    Le colspan



    Le "colspan" sert à fusionner horizontalement des cellules.

    Voici un petit exemple. Je veux obtenir ceci :
    Titre
    Truc1Truc2

    Bref, au total, j'ai une rangée de 1 cellule et une rangée de 2 cellule. Si j'étais sur excel, j'écrirais j'écrirais Truc1 dans une cellule, Truc2 dans la cellule de droite et je fusionnerais les 2 cellules d'en haut pour y mettre Titre.

    C'est exactement ce que je vais faire ici. Le vais faire une rangée où je fusionne 2 cellule (donc je vais mettre un colspan de 2) et ensuite je vais faire une rangée avec 2 cellules :
    Code:
    <tr>
      <td colspan="2">Titre</td>
    </tr>
    <tr>
      <td>Truc1</td>
      <td>Truc2</td>
    </tr>

    C'était pas si compliqué... Si c'est si simple, pourquoi certains ont de la difficulté parfois?

    Un autre exemple plus difficile? Je veux avoir ceci :
    Titre
    Truc1Truc2
    Truc3Truc4Truc5

    Ok, donc on fusionne la première rangée de... Euh... De 3? Et je fusionne les 2 cellules de la 2e rangée... De 1,5?

    Bip, erreur! On ne peut pas mettre de décimales dans un colspan.

    Du coup, c'est le temps de jouer les fractions !
    Dans la première rangée, on a 1 cellule qui fait toute la largeur du tableau, donc 1/1.
    Dans la deuxième rangée, on a 2 cellules qui font la moitié du tableau chacune, donc 1/2.
    Dans la troisième rangée, on a 3 cellules qui font le tiers du tableau chacune, donc 1/3.

    Si vous avez bien appris à l'école, vous saurez qu'on ne peut pas additionner 1/1, 1/2 et 1/3 si facilement que cela. Vos professeurs vous aurons dit "on met tout sur le même dénominateur".

    Ok, donc qu'est-ce qui se divise par 1, 3 et 2? La réponse est 6 !

    Donc on se retrouve avec
    Dans la première rangée, on a 1 cellule qui fait toute la largeur du tableau, donc 6/6.
    Dans la deuxième rangée, on a 2 cellules qui font la moitié du tableau chacune, donc 3/6.
    Dans la troisième rangée, on a 3 cellules qui font le tiers du tableau chacune, donc 2/6.

    Cela veut dire que c'est comme si on devait mettre au total 6 cellules de large. Dans la 1ère rangée, on fusionne les 6, ce qui donne une seule cellule. Dans la 2e rangée, on en fusionne 3 de chaque côté, ce qui donne 2 cellules. Dans la 3e rangée, on en fusionne 2 à la fois, ce qui donne 3 cellules.

    Donc on se retrouve avec ceci :
    Code:
    <tr>
      <td colspan="6">Titre</td>
    </tr>
    <tr>
      <td colspan="3">Truc1</td>
      <td colspan="3">Truc2</td>
    </tr>
    <tr>
      <td colspan="2">Truc3</td>
      <td colspan="2">Truc4</td>
      <td colspan="2">Truc5</td>
    </tr>

    Pas si facile finalement, non?





    Le rowspan



    Le "rowspan" sert à fusionner verticalement des cellules.

    Voici un petit exemple. Je veux obtenir ceci :
    TitreTruc1
    Truc2

    Bref, au total, j'ai une colone de 1 cellule et une colone de 2 cellule. Si j'étais sur excel, j'écrirais j'écrirais Truc1 dans une cellule, Truc2 dans la cellule d'en bas droite et je fusionnerais les 2 cellules d'à gauche pour y mettre Titre.

    Wait a minute... Une colonne? Je croyais qu'on avait juste le tr qui faisait les rangées, non?

    Oui. C'est exact. C'est là où le rowspan devient plus compliqué que le colspan. Puisqu'on ne peut pas fonctionner par colonne, on va devoir un peu plus se casser la tête.

    Commençons! Je vais commencer par faire un tableau super normal pour visualiser :
    MachinMachin
    MachinMachin

    Ce qui donne :
    Code:
    <tr>
      <td>Machin</td>
      <td>Machin</td>
    </tr>
    <tr>
      <td>Machin</td>
      <td>Machin</td>
    </tr>

    Mon titre commence sur la première rangée et se termine sur la deuxième rangée. Puisqu'il se commence sur la première, c'est là que je vais mettre mon titre! En plus, je sais que mon Titre a 2 cellules de hauteur et que pour fusionner verticalement, je dois utiliser un rowspan. Alors je lui mets un rowspan de 2. Donc je vais mettre ceci :
    Code:
    <tr>
      <td rowspan="2">Titre</td>
      <td>Machin</td>
    </tr>
    <tr>
      <td>Machin</td>
      <td>Machin</td>
    </tr>

    Bon, on a dit tout à l'heure qu'il n'y avait pas de colonne. Alors du coup... On continue sur la même rangée? Le première rangée du haut? Pourquoi pas. À droite, sur la première rangée du haut, il y a Truc1. Je le mets :
    Code:
    <tr>
      <td rowspan="2">Titre</td>
      <td>Truc1</td>
    </tr>
    <tr>
      <td>Machin</td>
      <td>Machin</td>
    </tr>

    J'ai terminé ma première rangée. Je passe à la deuxième. Donc première cellule à gauche... Je n'en ai pas, c'est caché par mon titre. Du coup, je ne mets pas de cellule à gauche.

    C'est là qu'on se rend compte qu'il faut mettre une cellule uniquement si elle commence sur cette rangée. Le reste, on va l'ignorer.

    Il ne me reste plus que le Truc2 que je mets dans la dernière cellule de ma 2e rangée :
    Code:
    <tr>
      <td rowspan="2">Titre</td>
      <td>Truc1</td>
    </tr>
    <tr>
      <td>Truc2</td>
    </tr>

    Pfiou... C'est moins facile...

    Ha. Ha. Ha. Vous pensez que c'est compliqué? Essayez de faire ceci :
    TitreTruc1Truc3
    Truc4
    Truc2
    Truc5

    Euh...

    Oui, c'est un beau casse-tête.

    Du coup, je mets la suite en spoiler, ne vous sentez pas obligés de le lire, mais je vous le recommande Wink

    Spoiler:
    Souvent, les gens trichent. À la place de fusionner les cellules de leur tableau, ils vont faire un tableaux avec 1 rangée et 3 cellules. Dans la 1ère cellule, ils vont mettre un tableau à 1 rangée qui a 1 cellule. Dans la 2e cellule, ils vont mettre un tableau à 2 rangée qui ont chacune 1 cellule. Et enfin, dans la 3e cellule, ils vont mettre un tableau à 3 rangées qui ont chacune 1 cellule.

    C'est une solution souvent utilisée. Au final, cela donnera quelque chose du genre :
    Code:
    <table border="1">
      <tbody>
        <tr>
          <td>
            <table border="1">
              <tbody>
                <tr>
                  <td>Titre</td>
                </tr>
              </tbody>
            </table>
          </td>
          <td>
            <table border="1">
              <tbody>
                <tr>
                  <td>Truc1</td>
                </tr>
                <tr>
                  <td>Truc2</td>
                </tr>
              </tbody>
            </table>
          </td>
          <td>
            <table border="1">
              <tbody>
                <tr>
                  <td>Truc3</td>
                </tr>
                <tr>
                  <td>Truc4</td>
                </tr>
                <tr>
                  <td>Truc5</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>

    Tricher est parfois plus simple, mais cela rallonge beaucoup le code.





    Pour ceux qui ne veulent pas tricher, je vous laisse faire, voilà la solution avec l'utilisation du rowspan :

    La logique pour savoir combien on doit mettre de rowspan est la même que pour les colspan, on fait l'exercice des fractions et voilà! La seule différence, c'est qu'à la place de mettre 6 pour les cellules de la première rangée, 3 pour les cellules de la deuxième et 2 pour les cellules de la troisième, on va mettre 6 pour les cellules de la première colone, 3 pour les cellules de la deuxième et 2 pour la les cellules de troisième.

    Après ça, ça se complique. Une astuce, c'est de se faire des lignes imaginaires ou un tableau avec le nombre de rangées que le dénominateurs (6) en mettant quel élément va où :
    TitreTruc1Truc3
    TitreTruc1Truc3
    TitreTruc1Truc4
    TitreTruc2Truc4
    TitreTruc2Truc5
    TitreTruc2Truc5

    Donc si on regarde ça :
    Dans la rangée 1, "Titre", "Truc1" et "Truc3" commencent.
    Dans la rangée 2, rien de nouveau.
    Dans la rangée 3, "Truc4" commence.
    Dans la rangée 4, "Truc2" commence.
    Dans la rangée 5, "Truc5" commence.
    Dans la rangée 6, rien de nouveau.

    1 Donc on va faire une rangée avec Titre, Truc1 et Truc3, selon les mêmes rowspan que les colspan de la dernière fois (6, 3 et 2).
    2 Ensuite, on faire une rangée vide parce qu'aucune cellule ne commence sur cette rangée.
    3 Ensuite, on fait une rangée où on met Truc4, avec 2 de rowspan parce que c'est la 3e colone.
    4 Ensuite, on fait une rangée où on met Truc2 avec 3 de rowspan parce que c'est la 2e colone.
    5 Ensuite, on fait une rangée où on met Truc5 avec 2 de rowspan parce que c'est la 3e colone.
    6 Enfin, on fait une rangée vide parce qu'aucune cellule ne commence sur cette rangée.

    Cela donne ceci :
    Code:
    <tr>
      <td rowspan="6">Titre</td>
      <td rowspan="3">Truc1</td>
      <td rowspan="2">Truc3</td>
    </tr>

    <tr>
    </tr>

    <tr>
      <td rowspan="2">Truc4</td>
    </tr>

    <tr>
      <td rowspan="3">Truc2</td>
    </tr>

    <tr>
      <td rowspan="2">Truc5</td>
    </tr>

    <tr>
    </tr>

    Pfiou ! Enfin, fini !


    Mettre en forme un tableau



    Pour mettre en forme un tableau, nous allons utiliser un peu 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.


    Option1Option2
    Option3Option4





    Les bordures



    Afin de mettre des bordures, on utilise la propriété border que vous devez déjà avoir vu.

    On va commencer par donner une bordure aux cellules de notre tableau :
    Code:
    .td {
      border: 1px solid blue;
    }

    Ce qui donne ceci :
    Option1Option2
    Option3Option4





    Mais les bordures sont séparées... C'est laid... Je fais quoi ?


    Afin de fusionner les bordures, on utilisera 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)

    Pour coller les bordures, on ferait cela dans notre CSS :
    Code:
    .table {
      border-collapse: collapse;
    }
    td {
      border: 1px solid blue;
    }

    Ce qui donne ceci :
    Option1Option2
    Option3Option4

    border-collapse doit être utilisé sur le tableau et non sur les cellules.






    Les espacements



    Peut-être qu'à la place de fusionner vos bordures, vous préférez les espacer. Afin de les séparer et de déterminer un espacement, on se servira de la propriété du border-spacing. Comme son nom l'indique (border = bordures et spacing = espace), on va créer un espace entre les bordures.

    Notre CSS serait cela :
    Code:
    table {
      border-spacing: 5px;
    }
    td {
      border: 1px solid blue;
    }

    Ce qui donne ceci :
    Option1Option2
    Option3Option4

    border-spacing doit être utilisé sur le tableau et non sur les cellules.






    Si vous souhaitez éviter que le texte à l'intérieur soit collé aux rebords de la cellule, on va créer un espacement intérieur entre les bordures et le contenu de la cellule. Pour cela, on utilisera la propriété padding que vous avez déjà vu dans le passé.

    Voilà notre CSS :
    Code:
    td {
      padding: 5px;
      border: 1px solid blue;
    }

    Ce qui donne ceci :
    Option1Option2
    Option3Option4





    Hauteur et largeur



    Pour ajuster la hauteur (height) et la largeur (width) d'une cellule, c'est comme ça :
    Code:
    td {
      height: 50px;
      width: 150px;
      border: 1px solid blue;
    }

    Ce qui donne ceci :
    Option1Option2
    Option3Option4

    Note : On peut aussi ajuster la hauteur et la largeur du tableau en le mettant sur le tableau directement.






    Alignement



    Comment je centre mon tableau?

    Facile, on va utiliser la propriété "margin" (à mettre sur le tableau) :
    Code:
    table {
      margin: auto;
    }
    td {
      border: solid 1px blue;
    }

    Option1Option2
    Option3Option4





    Et le texte dans les cellules?

    Il suffit d'utiliser la propriété "text-align" (à mettre sur les cellules) :
    Code:
    td {
      text-align: center;
      width: 150px;
      border: solid 1px blue;
    }

    Option1Option2
    Option3Option4





    Verticalement ?

    Il suffit d'utiliser la propriété "vertical-align" (à mettre sur les cellules) :
    Code:
    td {
      vertical-align: middle;
      height: 50px;
      border: solid 1px blue;
    }

    Ce qui donne ceci :
    Option1Option2


    On résume :
    • border permet de à mettre une bordure sur les cellules.

    • border-collapse permet de coller les bordures des cellules. (à mettre sur le tableau).

    • border-spacing permet d'espacer les cellules entre elles (à mettre sur le tableau).

    • padding permet d'espacer le contenu des cellules de leur bordure.

    • height et width permettent d'établir la hauteur et largeur des cellules.

    • margin: auto; permet de centrer le tableau.

    • text-align permet d'aligner horizontalement le contenu des cellules.

    • vertical-align permet d'aligner verticalement le contenu des cellules.






    Modifier la police, couleur, background, etc.



    Je n'irai pas en profondeur ici, vous devriez avoir compris l'essentiel avec les parties précédentes, donc je fais juste une résumé de quoi sélectionner pour les mises en formes.
    À noter les bordures (border), l'espacement interne (padding), la hauteur (height) et la largeur (width) peuvent êtres différentes d'un type de cellule à un autre, c'est à vous de modifier quelles cellules comme vous le voulez.

    Certains exemples de propriétés à utiliser :
    Code:
    /*Fond*/
    background: #aaaaaa;

    /*Taille de la police*/
    font-size: 13px;

    /*Police*/
    font-family: 'Times New Roman';

    /*Couleur*/
    color: #000000;

    /*Bordure*/
    border: 1 px solid blue;

    /*Espacement interne*/
    padding: 5px;

    /*Hauteur*/
    height: 150px;

    /*Largeur*/
    width: 200px;

    /*Alignement horizontal*/
    text-align: left/center/right;

    /*Alignement vertical*/
    vertical-align: top/middle/bottom;

    Pour donner du style à toutes les cellules du tableau :
    Code:
    td, th {
      On met le style ici;
    }

    Pour donner du style aux cellules du tableau de type td uniquement :
    Code:
    td {
      On met le style ici;
    }

    Pour donner du style aux cellules du tableau de type th uniquement :
    Code:
    th {
      On met le style ici;
    }

    Pour donner du style aux cellules de l'en-tête (thead) uniquement :
    Code:
    thead th, thead td {
      On met le style ici;
    }

    Pour donner du style aux cellules du corps (tbody) uniquement :
    Code:
    thody th, tody td {
      On met le style ici;
    }

    Pour donner du style aux cellules du bas (tfoot) uniquement :
    Code:
    tfoot th, tfoot td {
      On met le style ici;
    }



    Attributs dépréciés



    Il existe plusieurs attributs propres aux tableaux qui sont dépréciés, mais qu'on retrouve parfois dans les templates de ForumActif ou dans les vieux codes. Je vous les mentionne pour que vous sachiez l'équivalent en CSS si vous les croisez, mais c'est à éviter.

    Voilà à quoi cela pourrait ressembler :
    Code:
    <table border="1" cellpadding="1" cellspacing="1">
      <tbody>
        <tr>
          <td height="150" width="90%" align="center" valign="top">Machin</td>
        </tr>
      </tbody>
    </table>

    Et voilà les équivalents :

    cellpadding="1" => padding dans les cellules
    (les chiffres 1, 2, 3, etc. correspondent à l'espacement interne en px)

    cellspacing="1" => border-spacing
    (les chiffres 1, 2, 3, etc. correspondent à l'espacement en px)

    height="150" => height
    (les chiffres 1, 2, 3, etc. correspondent à l'espacement en px)

    width="90%" => width
    (les chiffres 1, 2, 3, etc. correspondent à l'espacement en %)

    align="center" => alignement du texte horizontal

    valign="top" => alignement du texte vertical





    Ma foi, vous avez terminé de lire cette annexe, beau travail ! Allez, c'est le temps d'aller pratiquer \o/



    Dernière édition par Onyx le Dim 12 Avr 2020 - 0:44, édité 11 fois



    Neva
    Neva
    FémininAge : 29Messages : 18565

    le Mer 11 Mai 2016 - 17:12

    Tu t'en sors avec ce tuto, Onyx ?



     
    Onyx
    Onyx
    FémininAge : 26Messages : 3317

    le Jeu 26 Mai 2016 - 3:06

    Salut!

    Eh bien il était presque fini, il me restait à parler des border-collapse et des équivalents en CSS. Sauf qu'après ça, j'ai vu que Shanelia avait aussi commencé un tuto du même style et honnêtement, il est pas mal mieux que le mien u_u

    Alors si ça ne dérange pas, je crois que ce serait mieux d'archiver ce sujet :hum:



    Anonymous
    Invité

    le Jeu 26 Mai 2016 - 12:33

    Salut Onyx !

    J'ai répondu à ton message sur mon tuto ^^ Je vais essayer de voir ce que je peux faire entre le cursus commencé par A-lice, ta partie et mon tuto :hum: ça va me prendre un peu de temps mais je veux faire quelque chose de propre et complet pour le cursus ^^

    Si tu veux, je te montrerai par MP ce que j'aurai avant d'envoyer pour avoir des conseils et un avis ! Bref je laisse ça là pour le moment le temps que je regarde plus en détail ce que tu as fait sur cette étape, et j'archive dès que j'ai tout vu :)
    Onyx
    Onyx
    FémininAge : 26Messages : 3317

    le Mar 14 Juin 2016 - 4:05

    Salut!

    Bah en gros, c'est à peu près ce que j'ai mis en spoiler sur ton tuto à toi, à l'exception des rowspan et colspan qui sont un peu plus détaillés ici je dirais.



    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    le Mar 14 Juin 2016 - 11:09

    Du coup vous pensez faire quoi les filles ? Vous pouvez aussi faire un gros tuto ensemble et simplement mettre vos deux noms dessus ^^



    Anonymous
    Invité

    le Sam 18 Juin 2016 - 19:55

    Désolée de ne pas avoir répondu plus tôt ! J'ai eu de gros soucis ces derniers jours et je n'ai donc pas été très présente malheureusement... je n'ai pas eu l'occasion d'avancer sur ce tuto en tous cas... Onyx qu'est ce que tu penses de faire un tuto où on mettra nos deux noms ou alors on met vraiment à jour l'étape de Alice dans le cursus ?
    Onyx
    Onyx
    FémininAge : 26Messages : 3317

    le Ven 24 Juin 2016 - 4:45

    Salut !

    L'important, c'est ce ne pas avoir 2-3 fois le même sujet traité à différents endroits. Du coup, je suis d'avis qu'on remplace l'étape de cursus de A-Lice avec ton tuto. Tu peux vérifier ce qu'elle avait mis dedans, mais je suis assez sûre que tu as tout ça dans le tien et tu as même des éléments supplémentaires.

    Quant à moi, la majorité de mon tuto se résume dans le petit spoiler sur les variables qui ne sont plus vraiment acceptées selon le html5 mais qui sont encore utilisées par FA que j'avais posté dans ton tuto.

    Sinon, je suis allée un peu plus en profondeur dans le colspan et le rowspan (parce que ça devient compliqué après un moment) alors si tu veux, tu peux prendre cette partie (celle où il faut faire des fractions, pas celle où on fusionne juste 2 cellules) et la mettre en mode "pour ceux qui veulent se casser un peu plus la tête pour faire fusionner des cellules avec le rowspan et le colspan, vous pouvez voir des idées un peu plus complexes ici".

    Avec ça, t'as fait le tour de mon tuto et tu peux l'archiver u_u

    Et prend pas la peine de mettre mon nom pour ça u_u
    D'ailleurs, il faut que j'arrête de commencer des tutos que je finis pas, je galère sur mon tuto de qeel depuis un sacré bout >< (mais je déteste PunBB T_T)



    Anonymous
    Invité

    le Ven 24 Juin 2016 - 14:35

    Très bien !

    J'avais regardé l'étape de A-lice, et elle reprenait les mêmes choses que nous, peut être sans moins expliquer. De plus depuis on a ajouté des choses, et avec nos deux tutos on complète bien la chose.

    Elle avait aussi fait une partie "Disposer ses éléments avec un tableau" pour plus lier à l'utilisation sur des forums. J'essayerais donc aussi de reprendre ce principe.

    Merci en tous cas pour ton aide Onyx o/

    Je m'occupe de cela dès que possible !
    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    le Mar 24 Déc 2019 - 11:47

    Du coup Onyx, ça en est où ce tuto ?



    Onyx
    Onyx
    FémininAge : 26Messages : 3317

    le Ven 10 Avr 2020 - 0:00

    Dommage que le tutoriel de Shaneliae ait disparu, j'aurais fusionné les deux.

    Sinon, j'ai rajouté ce que je me souvenais qu'il y avait dans son tuto, donc normalement, c'est terminé.



    Sparrow-style
    Sparrow-style
    FémininAge : 35Messages : 32055

    le Ven 10 Avr 2020 - 10:40

    Whaou ! Nickel ! Merci beaucoup Onyx, c'est vraiment très complet. En plus comme les versions phpbb2 et 3 des forums sont construites avec des tableaux, ça permettra aussi aux gens qui ont lu ce tutoriel de mieux comprendre comment les catégories sont structurées, et donc à les modifier plus facilement, notamment avec la fusion des cellules.

    Bon du coup je déplace dans la section concernée ^^ Encore merci !!



    sign
    Shaneliae
    Shaneliae
    FémininAge : 23Messages : 287

    le Ven 10 Avr 2020 - 18:27

    Coucou Onyx !

    J'ai vu que tu ne retrouvais plus mon tuto de l'époque, mais je l'ai cherché pour toi ! Le voici !
    Ton cursus me semble bien complet, mais n'hésites pas à picorer dedans si tu vois des choses que tu peux ajouter 😉



    Contenu sponsorisé


      La date/heure actuelle est Jeu 6 Aoû 2020 - 0:32