Tableaux à bordures fines avec les CSS

Comment faire un tableau à bordures fines !? Sans les feuilles de style, impossible. Rien à faire à part des grosses bordures saillantes et grossières.

Et je rappelle, à toutes fins utiles, que les tableaux sont destinés à une mise en forme de données... tabulaires, et non pour faire de la mise en page.

Avec une petite dose de CSS, border les cellules d'un tableau d'un élégant trait fin devient un jeu d'enfant.

N'hésitez pas à nous faire part de votre avis sur cet article : 1 commentaire Donner une note à l'article (5)

Article lu   fois.

Les deux auteurs

Site personnel

Profil Pro

I. Habillage primaire

Fonctionne avec :
  • Tous les navigateurs graphiques.
Propriétés utilisées :
  • background-color ;
  • border-color ; border-style ; border-width ;
  • float ;
  • height ;
  • left ;
  • margin ;
  • padding ;
  • position ;
  • top ;
  • width.

Un habillage très rapide de la table (table) et des cellules (td) va déjà donner un aperçu de ce que l'on peut faire.

Coté CSS

Indiquez dans votre feuille de style le code suivant :

 
Sélectionnez

table {
  border-width:1px; 
  border-style:solid; 
  border-color:black;
  width:50%;
}

td { 
  border-width:1px;
  border-style:solid; 
  border-color:red;
  width:50%;
}
 				

Astuce :
Pour optimiser le code, l'ensemble des propriétés de bordures peuvent être synthétisées de la façon suivante : border:epaisseur style couleur.

 
Sélectionnez

border:1px solid black
				

Code (X)HTML

Vous noterez que, grâce à l'attribut width, les tailles du tableau et des cellules sont aussi définies. Cela va permettre d'épurer le code (X)HTML qui suit.

Dans votre page (X)HTML, indiquez ceci :

 
Sélectionnez

<table>
  <tr>
    <td>Oh qu'il est beau !</td>
    <td>Ce jouli tableau à bordures fines !!</td>
  </tr>
</table>
				
Image non disponible

Voir le résultat.

Pour fusionner les bordures du contour du tableau et des cellules, il suffira de rajouter, dans les styles de table, l'élement suivant : border-collapse:collapse, ce qui donnera l'effet suivant :

Image non disponible

Voir le résultat.

Astuce :
Pour centrer verticalement le texte dans la cellule, rajouter dans le code CSS du td :

 
Sélectionnez

vertical-align:middle;
				

II. A chaque cellule sa bordure

J'en vois d'ici qui disent : "oui, mais je n'en veux pas du trait noir du tour !! ... et puis d'abord, je veux ma cellule de gauche bordée de noir et avec un fond gris, et celle de droite bordée de bleu."

Pas de problèmes !

Image non disponible

Voir le résultat.

Code CSS
Sélectionnez

.grise {
  border:1px solid black; 
  background-color:silver;
}

.blue {
  border:1px solid blue; 
}

.none {
  border-style:none;
}
			

Code (X)HTML

C'est avec l'attribut class que l'appel aux styles va se faire :

 
Sélectionnez

<table class="none">
  <tr>
    <td class="grise">Oh la belle cellule grise !</td>
    <td class="blue">Oh la belle bleue !!</td>
  </tr>
</table>
				

Vous remarquez donc que les styles .grise et .blue sont appelés dans les cellules du tableau par la syntaxe class="grise" et class="blue". Avec ce système, les combinaisons sont infinies...

Le style des bordures peut être solid comme dans cet exemple, mais aussi en relief grâce à outset ou inset, en pointillé dotted, etc.

On peut aussi avoir les quatre côtés différents puisque chaque bord peut être détaillé : border-style-left, border-color-right, border-width-top, etc. Possibilités infinies je vous dis !

III. Accessibilité

Les tableaux servent à présenter les données tabulaires. Ca paraît évident comme ça, mais cela mérite pourtant d'être rappelé car de nombreux sites s'en servent encore pour la mise en page alors que ce n'est pas nécessaire, voire contre productif.

Afin que l'accessibilité soit meilleure, il existe quelques règles à mettre en place. En voici trois importantes et faciles :

  1. Indiquer le summary à l'intérieur de la balise table, qui fait office de légende pour expliquer le contenu du tableau.
  2. Utiliser la balise caption pour indiquer un titre au tableau.
  3. Utiliser les balises th pour les cellules d'en-têtes. A noter que par défaut le contenu des balises th sont centrées et en gras.

Un petit exemple vite fait :

Code (X)HTML
Sélectionnez

<table summary="ligne 1 : les navigateurs, ligne 2 : les pourcentages">
  <caption>Top 5 des navigateurs utilisés sur CSS débutants en décembre 2007<caption>
  <tr>
    <th>Firefox</th>
    <th>Explorer</th>
    <th>Mozilla</th>
    <th>Safari</th>
    <th>Opéra</th>
  </tr>
  <tr>
    <td>49,6 %</td>
    <td>39,4 %</td>
    <td>5,0 %</td>
    <td>2,4 %</td>
    <td>0,9 %</td>
  </tr>
</table>
			
Code CSS
Sélectionnez

table {
  border-collapse:collapse;
  width:90%;
}

th, td {
  border:1px solid black;
  width:20%;
}

td {
  text-align:center;
}

caption {
  font-weight:bold
}
			
Image non disponible

Voir le résultat.

Pour la mise en forme de tableaux plus complexes et pour plus de critères d'accessibilité, consulter ces différentes pages :

IV. Le tableau sans tableau !

Warning : En attendant MSIE 8, cette option ne fonctionne pas encore avec Internet Explorer
Grâce à la propriété display et l'attribut table-cell, on peut aussi simuler une présentation tabulaire sans faire de tableau.
Mettons que je veuille présenter le top 5 de mes navigateurs non pas sous forme de tableau mais sous forme de liste :

Image non disponible

Mais je voudrais que les pourcentages soient alignés verticalement...
Pour cela, on peut encadrer les éléments que l'on veut aligner par la balise span et lui attribuer un table-cell ce qui va permettre de lui affecter une largeur fixe comme un élément de type block, chose impossible par défaut.

Petit écueil néanmoins au niveau de l'alignement des images de puces : elles vont se trouver décalées par rapport au texte. Mais cela peut-être réglé par la méthode "Made in Sam" décrite dans le tutoriel sur les puces.

Code (X)HTML
Sélectionnez

<ul>
  <li><span>Firefox :</span> <span>49,6 %</span></li>
  <li><span>Internet Explorer :</span> <span>39,4 %</span></li>
  <li><span>Mozilla :</span> <span>5,0 %</span></li>
  <li><span>Safari :</span> <span>2,4 %</span></li>
  <li><span>Opéra :</span> <span>0,9 %</span></li>
</ul>
			
Code CSS
Sélectionnez

li span { 
  display:table-cell;
  width:130px;
}

li { /*pour l'alignement des puces*/
  list-style-image:none;
  list-style-type:none;
  background: url(pucegrise.gif) no-repeat 0% 50%;
  padding-left:20px;
}
			

Résultat attendu :

Image non disponible

Pardon ? Vous dites ? « Oui mais les nombres, ça doit s'aligner sur la droite ? ». Mais vous êtes pire que moi dans le souci du détail !!

Ok, vos désirs sont des ordres. On va utiliser les "combinateurs d'enfants adjacents (fr)" (E + F) pour arranger cela et qui va permettre de ne styler que le second span de chaque item. On va donc en fixer la largeur à 50 pixels et aligner le texte sur la droite en rajoutant ceci au code CSS :

 
Sélectionnez

li span + span {
  width:50px;
  text-align:right;
}
			

Résultat attendu :

Image non disponible
Liste de mes articles :
Principe des feuilles de style CSS - Commentez Donner une note à l'article (5)
Balises (X)HTML de base - 1 commentaire Donner une note à l'article (4.5)
Feuille de style CSS de base - Commentez Donner une note à l'article (3.5)
Mettre en forme un texte en CSS - Commentez Donner une note à l'article (4)
Gérer les marges en CSS - 5 commentaires Donner une note à l'article (4.5)
Résoudre les problèmes de marges en CSS - Commentez Donner une note à l'article (4)
Sélecteurs class et id - 3 commentaires Donner une note à l'article (5)
Mise en page full CSS - 4 commentaires Donner une note à l'article (4.5)
Bordures en CSS - 2 commentaires Donner une note à l'article (4.5)
Image de fond en CSS - 3 commentaires Donner une note à l'article (4.5)
Effets Rollover à l'aide de :hover - 2 commentaires Donner une note à l'article (4.5)
Aligner une image et du texte à l'aide de la propriété float - 1 commentaire Donner une note à l'article (4)
Listes à puces en image - 2 commentaires Donner une note à l'article (5)
Citations et retraits - Commentez Donner une note à l'article (4.5)
Concevez des boutons graphiques avec du CSS - 11 commentaires Donner une note à l'article (4.5)
Positionnez des images aux quatre coins d'une page web - 16 commentaires Donner une note à l'article (5)
Appliquez un effet de zoom sur une image avec les CSS - 1 commentaire Donner une note à l'article (4.5)
Zoomer une image façon thumbnail en CSS - 3 commentaires Donner une note à l'article (4.5)
Tableaux à bordures fines avec les CSS - 1 commentaire Donner une note à l'article (5)
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 14/12/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.