Tableaux plus jolis ? Angles arrondis ...

[gnosis]

Bonjour,

Je souhaiterai savoir s'il était possible de faire de plus jolis tableaux.

J'imagine des cellules arrondis avec des bordures transparentes pour que cela donne un effet plus sympa, moins HTML basique...

Je sais pas si cela est réalisable...

Dois je d'abord le faire par JCE puis appliquer un css dessus (ce que je ne sais pas faire...)

Merci si vous avez des pistes, une extension qui permettrait de faire cela.

[APWEB]

Re : Tableaux plus jolis ? Angles arrondis ...

Bonjour,
Tu trouveras ici des extensions qui, peut être, te faciliterons la tâche :

http://extensions.joomla.org/extensions/news-display/tables-a-lists

comme RokFeatureTable ou SuperTable ...

[Rajoz]

Re : Tableaux plus jolis ? Angles arrondis ...

Bonjour gnosis,

Si le template que tu utilises est basé sur Bootstrap comme Protostar (c'est le cas de la plupart des templates actuels), tu peux utiliser directement les classes CSS de Bootstrap. Les exemples des différentes classes utilisables pour les tableaux sont documentées ici : http://getbootstrap.com/2.3.2/base-css.html#tables

Avec JCE c'est facile d'ajouter des classes CSS à une table :

• Si le tableau n'existe pas : positionner le curseur à l'endroit où créer le tableau puis cliquer sur l'icône "Insérer/Modifier un tableau"
• Si le tableau existe déjà : sélectionner le tableau puis cliquer sur l'icône "Insérer/Modifier un tableau"
• Dans les deux cas (création/modification) le pop-up suivant s'ouvre (ici un tableau de 5 colonnes pour 3 lignes) :
  
• Il faut sélectionner l'onglet "Avancé" et mettre dans "Ajouter des styles" ce que l'on souhaite. Ici j'ai mis "table table-striped table-bordered" (table pour style de table de Bootstrap, table-striped pour une ligne sur deux grisée, table-bordered pour avoir les coins arrondis et avoir toutes les bordures) :
  
• Voilà le résultat (template Protostar) : j'ai juste mis le type de la première ligne à "En-tête du tableau" via le bouton "Propriétés de la ligne" et le type des cellules de la première ligne à "En-tête" via le bouton "Propriétés de la cellule" :
  
• Les boutons "Propriétés de la ligne" et "Propriétés de la cellule" ont aussi un onglet "Avancé" qui permet d'ajouter des styles respectivement à la ligne ou à la cellule.

En complément de ces classes Bootstrap, chaque template peut aussi avoir ses propres classes CSS définies pour rendre les tableaux adaptés au style du template. Quand ces classes existent, elles sont habituellement expliquées dans la partie Typography de la démo ou de la documentation du template. Ces classes s'utiliseront de la même façon avec JCE.

Si l'on connaît un peu HTML, on peut aussi basculer JCE du mode WYSIWYG en mode code via le lien Activer/Désactiver au-dessus des boutons de l'éditeur, ou par le bouton "Editeur de code" [<>]). Dans ce cas on peut mettre directement la classe dans la balise <table> du tableau. Ci-dessous le code du tableau créé précédemment avec JCE :

<table class="table table-striped table-bordered" border="0">
<thead>
<tr><th>COLONNE 1</th><th>COLONNE 2</th><th>COLONNE 3</th><th>COLONNE 4</th><th>COLONNE 5</th></tr>
</thead>
<tbody>
<tr>
<td>Ligne1</td>
<td>cellule</td>
<td>cellule</td>
<td>cellule</td>
<td>cellule</td>
</tr>
<tr>
<td>Ligne 2</td>
<td>cellule</td>
<td>cellule</td>
<td>cellule</td>
<td>cellule</td>
</tr>
</tbody>
</table>

Enfin, avec un peu de connaissance CSS, il n'est finalement pas si compliqué de développer ses propres classes CSS pour pouvoir définir son propre style pour les tableaux.

Amicalement,
Rajoz

[APWEB]

Re : Tableaux plus jolis ? Angles arrondis ...

Le problème des tableaux <table> c'est qu'ils ne sont pas responsive et c'est vite la catastrophe sur tablettes et smartphones!
Ne pas oublier d'encadrer la balise Table avec :
<div class="table-responsive">
<table>
...
</table>
</div>
toujours dans l’hypothèse d'un template Bootstrap.
Il y a bien sur des techniques plus poussées à condition de se plonger un peu plus dans le CSS et dans les classes Bootstrap.

Sinon des extensions comme RokFeatureTable font le job assez bien sans aucune ligne de code, mais il est vrai que ça alourdi le site. Il est toujours mieux de surcharger le template.