Tableaux plus jolis ? Angles arrondis ...

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Tableaux plus jolis ? Angles arrondis ...

    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.

  • #2
    Re : Tableaux plus jolis ? Angles arrondis ...

    Bonjour,
    Tu trouveras ici des extensions qui, peut être, te faciliterons la tâche :
    Find extensions for your Joomla site in the Joomla Extensions Directory, the official directory for Joomla components, modules and plugins.

    comme RokFeatureTable ou SuperTable ...
    Accompagnateur de Projets WEB depuis 1995
    Joomla! 3x Certified Administrator

    Développeur Front-End à l'Observatoire Nice Côte d'Azur

    Commentaire


    • #3
      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" Cliquez sur l'image pour l'afficher en taille normale

Nom : tableau.png 
Affichages : 1 
Taille : 489 octets 
ID : 1803691
      • Si le tableau existe déjà : sélectionner le tableau puis cliquer sur l'icône "Insérer/Modifier un tableau" Cliquez sur l'image pour l'afficher en taille normale

Nom : tableau.png 
Affichages : 1 
Taille : 489 octets 
ID : 1803691
      • Dans les deux cas (création/modification) le pop-up suivant s'ouvre (ici un tableau de 5 colonnes pour 3 lignes) :
        Cliquez sur l'image pour l'afficher en taille normale

Nom : tableau1.jpg 
Affichages : 1 
Taille : 18,5 Ko 
ID : 1803692
      • 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) :
        Cliquez sur l'image pour l'afficher en taille normale

Nom : tableau2.jpg 
Affichages : 1 
Taille : 26,5 Ko 
ID : 1803693
      • 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" :
        Cliquez sur l'image pour l'afficher en taille normale

Nom : tableau3.png 
Affichages : 1 
Taille : 3,8 Ko 
ID : 1803690
      • 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 :
      Code HTML:
      <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

      Commentaire


      • #4
        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.
        Dernière édition par APWEB à 14/09/2014, 21h28
        Accompagnateur de Projets WEB depuis 1995
        Joomla! 3x Certified Administrator

        Développeur Front-End à l'Observatoire Nice Côte d'Azur

        Commentaire

        Annonce

        Réduire
        Aucune annonce pour le moment.

        Partenaire de l'association

        Réduire

        Hébergeur Web PlanetHoster
        Travaille ...
        X