Aspect des tableaux

[Tipitch]

Bonjour,

Je souhaiterais insérer des tableaux sur mon forum, mais un tableau qui n'a pas l'aspect des tableaux standard de forumactif, à savoir des colonnes sans délimitations, ce qui fait un peu triste.

Est-il possible de trouver des variantes ?

Merci !

[Neptunia]

Bonjour ^^


Que ce soit chez Forumactif ou n'importe où ailleurs, un tablerau standard sera toujours un assemblage d'une ou plusieurs lignes et d'une ou plusieurs colonnes sans rien d'autre.

Si vous voulez autre chose qu'un tableau brut, c'est à vous de préciser ce que vous voulez dans la feuille de style CSS : couleurs, bordures, espacement etc etc.

Un exemple : Stop ou encore - Version 2019 (lien externe)

Comme le tableau en lui-même et son entête sont uniques, j'ai embarqué le CSS directement dans le code HTML :

Code:

<table class="NepStopMore" style="border-collapse: separate; border-spacing: 20px 10px; background-color: #CCCCCC; width: 90%; margin: 20px auto; border-width: 3px; border-color: #FF0000; border-style: solid; border-radius: 10px;"  cellspacing="20" cellpadding="3">
<caption style="text-align:center; font-size: 25px; margin-bottom:10px; padding: 5px;background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #FF0000; border-style: solid; border-radius: 10px; ">Séries des chaînes étasuniennes 2019 : Stop ou encore ?</caption>
<thead style="text-align:center; font-size: 17px;">
<tr>
<th style=" width: 45%; background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #000000; border-style: solid; border-radius: 10px; ">Nom français de la série</th>
<th style=" width: 15%; background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #000000; border-style: solid; border-radius: 10px; ">Chaîne TV</th>
<th style=" width: 15%; background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #000000; border-style: solid; border-radius: 10px; ">Statut</th>
<th style=" width: 25%; background-color: #B4EDE0; color: #000000; border-width: 3px; border-color: #000000; border-style: solid; border-radius: 10px; ">Date de la décision</th>
</tr>
</thead>
<tbody style="text-align:center;">
<tr class="NepMore">
<td>13 Reasons Why</td>
<td>Netflix</td>
<td>Renouvelée [3]</td>
<td>06.06.2018</td>
</tr>
...
...</tbody>
</table>

En revanche, comme chaque ligne du tableau réutilise le même format, je passe par la feuille de style CSS :

Code:

/* TABLEAU STOP OU ENCORE */
.NepStopMore td {
   background-color: #F2ECD5;
   border: 1px solid #000000;
   border-radius: 10px;
   }
.NepStopMore td:nth-child(1) {
   text-align: left;
   padding-left: 20px;
   }

.NepStopMore tr.NepMore td {
   background-color: #88F28F;
   }
.NepStopMore tr.NepStop td {
   background-color: #DC6154;
   }
.NepStopMore tr.NepWhat td {
   background-color: #F7F2B2;
   }
/* FIN TABLEAU STOP OU ENCORE */

Je définis d'abord le format standard des cellules, puis le format de la première colonne (alignement à gauche), enfin le formatage en fonction du contenu de chaque ligne, mis en avant par l'attribut class de chaque rangée (balise <tr>)

A noter que pour suivre la même logique, j'aurais pu externaliser le code relatif aux entêtes (balises <th>) où seule la largeur est variable, le reste étant commun à chaque colonne.

[Tipitch]

Merci Neptunia pour la réponse,

Je pensais à quelque chose de plus simple que j'aurais pu modifier directement dans le message comportant le tableau.
Je pense donc me rabattre sur une autre solution, mais merci pour le détail !

[Neptunia]

Si vous voulez tout avoir sans rien faire (ou presque) il y a la solution Générateur de tableaux

[Tipitch]

Si vous voulez tout avoir sans rien faire (ou presque) il y a la solution Générateur de tableaux

Ce n'est pas tant tout avoir sans rien faire, mais une solution directement dans la réponse postée, même si la formule ou la manipulation est complexe.

Le générateur de tableaux ?

[Neptunia]

Et bien l'exemple que je vous ai donné s'intègre très bien dans un message.

Si vous ne voulez pas utiliser de CSS externe il suffit d'appliquer aux cellules le même principe que j'avais appliqué à la table et aux entêtes. Embarquer directement le CSS dans le code HTML.

Mais ce n'était pas ce que je comprenais par "Je pensais à quelque chose de plus simple"

Pour le générateur de tableaux j'avais précisé entre parenthèses (ou presque). Le presque correspondant à une petite recherche sur un site spécialisé.

[Tite-May]

Bonjour,

Un exemple de tableau serait plus parlant je pense :/

Ce n'est pas un tableau comme ceci que tu veux, c'est ça ?


Avec un schéma on verrait peut-être mieux ce que tu attends.

A bientôt

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.