Comment définir une bordure personnalisée pour un élément table ?

 Objectif

Lorsque vous éditez un webBlock et insérez des éléments table, il est possible définir une taille de bordure en éditant les “Propriétés de la table”.
>>

Toutefois, le rendu des bordures HTML n’offre pas un visuel très agréable car la bordure s’applique à la fois au tableau et aux cellules contenues dans celui-ci. Il est donc intéressant de recourir au CSS pour créer des bordures fines autour d’un élément table.

Bordure HTML Bordure CSS

Il existe deux méthodes pour appliquer une bordure CSS à un élément Table :

 
 Insertion d’une bordure via le champ inline style (méthode simple)

La solution la plus simple, pour appliquer une bordure sur élément table est d'utiliser le champ inline style des propriétés de l'élément table. Assurez-vous que le champ taille de bordure soit défini sur 0, puis ajoutez la règles CSS suivante dans le champ inline style :



Le code douleur peut être personnalisé ou remplacé par le nom de la couleur (en anglais). Exemple :





Notez que le résultat ne sera visible qu’en mode [Prévisualisation] ou  une fois le webBLock affiché dans le site.

Notez également que cette astuce sera applicable dans les webBLocks destinés à être envoyés en lettre d’information.

 
 Insertion d’une bordure via une classe CSS (méthode avancée)


Il est possible d’affecter des classes ou des ID associés aux éléments table en éditant les "propriétés de la table". Ceci permet de leur appliquer un identifiant que l’on pourra “styler” via une règle définie dans le CSS.

Avantage de cette méthode : la mise en forme s’appliquera pour tous les webBLocks où l’identifiant aura été utilisé. Ainsi, si vous décidez un jour de changer la couleur des bordures de tous les webBlocks de votre site, une seule mise à jour dans le CSS sera suffisante !

Attention : Cette solution n’est pas indiquée pour un webBLock destiné à être envoyé en lettre d’information. En effet, le CSS du site ne sera pas consulté par le logiciel de messagerie : la bordure ne sera donc pas appliquée.
  • Étape 1 : Affecter un nom de classe au tableau

    Pour encadrer un élément table de votre webBlock, cliquez sur l'icône des "propriétés de la table" et définissez un nom de Classe CSS associée. Cette classe pourra être définie de manière identique pour tous les tableaux nécessitant cette même bordure.

    Dans notre exemple, le nom donné à cette classe est : bordure


  • Étape 2 : Définir la règle CSS

    • Cas 1 : vous utilisez une présentation CSS personnalisée.

      Éditez votre contenu CSS en cliquant sur le menu [Site\Présentation], bouton [Gérer les présentations personnalisées] et éditez votre présentation.
      Ajoutez la règle suivante dans le contenu CSS (le "." est très important).



    • Cas 2 : vous utilisez une présentation avancée HTML ou un Smartskin

      Rendez vous dans les points d'insertion de votre site ( menu [Site\Propriétés par langues] ), zone "Entête HTML” et ajoutez le script suivant :



    Notez qu’il est quelquefois indispensable de vider le cache et les cookies pour visualiser les changements.
 

Ajouter aux favoris : http://www.oxatis.com/Help/HelpCenterContent.asp?ActionID=1024&TID=55235&MID=55563%7C53001&LangID=0
© 2001-2017 Oxatis. Tous droits réservés.