INFOR logo_ordinateurMATIQUE

Aide pour les CSS - Bruno Gadrat

Tables et bordures par CSS

Donner forme aux divers éléments de la table

Pour faire défiler le texte de la table regardez: Faire défiler le texte de la table en fixant l'en-tête

La balise <table></table> est utilisée de diverses manières. C'est le seul élément qui se met automatiquement à la dimension de son contenu ou qui permet de fixer facilement des alignements de cases. Elle est donc, à tord, utilisée pour la mise en forme générale dans les pages. La mise en page doit se faire avec des <div></div>. Pour éviter de reprendre complètement l'écriture des anciennes pages qui contiennent des <table></table> et éviter des désordres ou des aspects curieux, on ne donnera donc du style qu'au tables identifiées par une classe.

Expertise
pub
Acheter en ligne

Tableau de données

L'utilisation normale d'une table

Titre
\ABCDE
L\CC1C2C3C4C5
L112345
L2678910
L31112131415
L41617181920
L52122232425
\ABCDE

Fichier html de cette table incluant le <style> css dans le <head> pour faire vos test d'aspect.

Tableau pour facture

Autre utilisation normale d'une table

DescriptionQuantitéPrix
unitaire		Total
Simulation réaliste 3D2720,00 $1 440,00 $
Conseil sur place au tarif horaire3110,00 $ 330,00 $
    
    
    
    
    
    
Total avant taxes :1 770,00 $
TPS : 5%88,50 $
TVQ : 9,975%139,39 $
TOTAL taxes incluses :1 997,89 $

Fichier html 4 de cette table incluant le <style> css dans le <head> pour faire vos test d'aspect.

Beaux jardins
pub
Acheter en ligne

Bordure: séparer les cases

border-collapse:separate; border-spacing:10px 20px;

Titre
\ABCDE
L\CC1C2C3C4C5
L112345
L2678910
L31112131415
L41617181920
L52122232425
\ABCDE

Fichier html de cette table incluant le <style> css dans le <head> pour faire vos test d'aspect.

Bordure: faire une grille

border-collapse:collapse;

Titre
\ABCDE
L\CC1C2C3C4C5
L112345
L2678910
L31112131415
L41617181920
L52122232425
\ABCDE

Fichier html de cette table incluant le <style> css dans le <head> pour faire vos test d'aspect.

Faire malgré tout une grille avec border-collapse:separate;

Pourquoi les bordures ne s'affichent pas ?

Bordures et autres aspects de fond ou de caractère dans les tables

Rien de plus énervant que d'avoir prévu des bordures pour les balises <table>, <col>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, et que ça ne s'affiche pas, ou pire, que la bodure disparaisse quand on ajoute une nouvelle instruction css.

  1. Commencez par vérifier que vous avez bien écrit le code html et le code css avec ses <> { } , ; au bon endroit et de ne pas avoir inversé ou oublié des lettres dans les noms.
  2. Choisissez entre cases et grille. Vous ne pouvez pas avoir en même temps des cases séparées et donner les caractéristiques aux groupes de cases <col>, <thead>, <tbody>, <tfoot>, <tr>.
    table {border-collapse:separate;} permet de fixer des espaces entre les cellules par border-spacing:10px 20px; et permet de ne pas afficher les cellules vides par empty-cells:hide; mais ne permet pas d'afficher les bordures de <col>, <thead>, <tbody>, <tfoot>, <tr>.
    C'est l'inverse pour table {border-collapse:collapse;} qui permet d'afficher les bordures de <col>, <thead>, <tbody>, <tfoot>, <tr> mais qui ne permet pas de fixer des espaces entre les cellules par border-spacing:10px 20px; ni d'afficher les cellules vides par empty-cells:hide;
  3. Vérifiez les priorités. Les bordures ne s'appliquent qu'aux balises <table>, <th>, <td> les autres balises <col>, <thead>, <tbody>, <tfoot>, <tr> ne font que transmettre (ou ne pas transmettre) aux balises <th>, <td> des caractéristiques de bordures aux groupes de balises qu'elles englobent par héritage. Si deux instructions donnent une bordure différente à vos balises <th> ou <td> l'effet sera donné par la balise qui a la plus grande priorité.

Priorité des feuilles de style:

Style dans la balise locale > Style dans <head> > Feuille de style externe

Priorité des balises

balise class="..." > balise

balise fille > balise parent

Pour les tableaux, cela peut varier d'un navigateur à l'autre
<p> > <th> <td> > <tr> ><thead> <tbody> <tfoot> > <col> > <table>

Changer la priorité:

La façon la plus usuelle est d'utiliser des classes. Mais la position de déclaration des styles peut aussi changer les priorités.

Voir exemple de priorité des style css

Voir des exemples avec border-collapse:separate; et border-collapse:collapse;

 

Quelques références

Changer l'aspect des choses les plus ordinaires

Bruno Gadrat Design Végétal / Mieux Vivre ici: Jardins et paysages durables

pub

Bruno Gadrat

Orig: 2009/07 Rev: 2017/12/30

CSS-table-bordures.html

Design et gestion du site B.Gadrat

Contrôle qualité