Tél.: 05 32 92 09 16 Email: contact@sagexa.com

Tutoriel


Taux global de satisfaction Client : 4.8 sur 5 pour 457 formations

Accueil / Tutoriels / Web / Client

C.S.S.::Styler les Tableaux en CSS

Cascading Style Sheets

Par • • programmation client

Styler les Tableaux en CSS

Dans ce tutoriel CSS vous apprendrez à...
  1. Utiliser les CSS pour mettre vos tablaux en forme .

Bien que les tableaux ne doivent plus être utilisés pour la mise en page des sites web (tableaux transparents), leur utilisation reste naturelle pour la mise en forme de données tabulaires (rapports financiers, états de bases de données, agenda,...).

Syntaxe HTML d'un tableau

Le code suivant décrit un tableau simple :

Exemple de Code: Tableaux/Demos/TableHomeRuns.html

<html>
<head>
<title>Tutoriel CMBP :: CSS :: Tableaux</title>
</head>
<body>
<h1>Tutoriel CMBP :: CSS</h1>
<h2>Tableau et CSS  :: Tableau simple </h2>
<body>
<table summary="Ce tableau reprend les meilleures ventes du mois de juillet 2002">
<caption>
 Les Meilleures Ventes
</caption>
<thead>
	 <tr>
		<th>Titre</th>
		<th>Auteur</th>
		<th>Prix</th>
		<th>Editeur</th>
	 </tr>
</thead>
<tfoot>
 <tr>
 <td colspan="4">*Edition U.S. non expurgée</td>
 </tr>
</tfoot>
<tbody>
	<tr>
		<td>La Fille du Vent</td><td>Leloup</td><td>24</td><td>Dupuis</td>
	</tr>
	<tr>
		<td>Love in Sabino Canyon*</td><td>Tran</td><td>69</td><td>Tucson TMC</td>
	</tr>
	<tr>
		<td>Aventure en Jaune</td><td>Yann / Conrad</td><td>9</td><td>Glenat</td>
	</tr>
</tbody>
</table>
</body>
</html>

Le tableau suivant reprend les attributs de structure et d'information utilisés dans les tableaux HTML :

attributs de structure et d'information
Attribut Balises
summary table
colspan th, td
rowspan th, td

Les autres attributs servent à la mise en forme et peuvent être remplacés par leur équivalent CSS :

CSS pour les Tableaux
Attribut Equivalent CSS Balises
cellspacing border-collapse et border-spacing table
cellpadding padding (appliqué aux cellules) table
border border table
background background-image table, th, td
bgcolor background-color toutes
width width table, th, td
height height table, tr, th, td
align text-align tr, th, td
valign vertical-align tr, th, td

Certaines valeurs CSS ci-dessus peuvent être utilisées dans d'autres balises. Par exemple :

  • border peut être appliqué à td et th mais aussi à table.
  • text-align peut être appliqué à table, thead, tbody, et tfoot mais aussi à tr, th et td.

Nous allons uniquement analyser cellpadding, cellspacing et border dans la mesure où les autres paramètres ne sont pas spécifiques aux tableaux.

border-spacing

border-spacing détermine l'espace entre des bordures adjacentes et le contenu qui entoure le tableau.

Exemple de Code: Tables/Demos/border-spacing.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#spacing-0 {
 border-spacing:0px;
}

#spacing-10 {
 border-spacing:10px;
}

#spacing-20 {
 border-spacing:20px;
}

td {
 border:10px solid black;
 padding:20px;
}

caption {
 font-weight:bold;
}
</style>
<title>border-collapse</title>
</head>

<body>
 <table id="spacing-0">
  <caption>border-spacing: 0px</caption>
  <tr>
   <td>1</td>
   <td>2</td>
  </tr>
 </table>
 <hr/>
 <table id="spacing-10">
  <caption>border-spacing: 10px</caption>
  <tr>
   <td>1</td>
   <td>2</td>
  </tr>
 </table>
 <hr/>
 <table id="spacing-20">
  <caption>border-spacing: 20px</caption>
  <tr>
   <td>1</td>
   <td>2</td>
  </tr>
 </table>
</body>
</html>
Explication du Code

Le code ci-dessous donnera :

tuto css table border spacing

Note historique : IE 7 (6, 5, 4,...), ne supportait pas border-spacing.

border-collapse

La propriété border-collapsepeut être separate ou collapse. Elle définit si les bords doivent se recouvrir (collapse) ou pas (separate). Le comportement par défaut est separate. Par exemple, si 2 bords ont une bordure de 5px, une bordure de 10px apparaîtra entre eux.

La capture écran suivant illustre ceci fort à propos : tutoriel css table css collapse

Notez que la bordure entre les cellules 1 et 2 a 2 fois la largeur des bordures externes.
La règle css utilisée est :

table1 {
 border-spacing:0px; 
 border-collapse:separate; 
}
table2 {
 border-spacing:0px; 
 border-collapse:collapse; 
}

 

Remarques sur border-collapse:

  • Quand border-collapse est à collapse, border-spacing devient non-pertinent.
  • Quand on fusionne des bordures d'épaisseur différentes, la plus épaisse est utilisée.
  • Pour IE 7 (et avant), border-collapse garde le cellspacing qui vaut par défaut 2. Il faut donc spécifier un cellspacing à 0.

border

L'attribut déprécié border concernait toutes les bordures du tableau, et travaillait donc en "tout ou rien".

Les CSS donnent plus de contrôle et permettent de définir les bords de chaque côté de chaque élément, selon les principes abordés dans la section "Border, margin et padding".

Par exemple: une bordure 3px solid orange en haut et en bas du tableau :

table {
 border-collapse: collapse;
 border-top: 3px solid #993300;
 border-bottom: 3px solid #993300;
}

Des lignes intermédiaires :

td, th {
 border-top: 2px solid orange;
 border-bottom: 2px solid orange;
}

Et des bordures verticales :

td, th {
 border-top: 2px solid orange;
 border-bottom: 2px solid orange;
 border-left: 2px solid #ff3300;
 border-right: 2px solid #ff3300;
}

Résultat :

tuto css table border

 

padding

le padding fonctionne comme le padding d'élément (voir "Border, margin et padding") :

thead th {
 padding: 6px;
}

Et pour le pied de table :

tfoot td {
 padding-top: 12px;
}

Avec tous ces contrôle, nous pouvons arriver au résultat suivant : tuto css table stylee amelioree

Le code correspondant se trouve dans Demos/Tables/bordures.html.

Exercice: Dresser la Table

Durée: 30 à 40 minutes.

Dans cet exercice vous allez améliorer la présentation d'un bon de commande.
Le html existe déjà, mais vous devez implémenter le css correspondant à l'illustration.

  1. Ouvrez Exercices/Table/bonDeCommande.html dans votre éditeur.
  2. Ajoutez le css nécessaire à l'obtention du résultat suivant : les meilleurs spots de glisse
  3. Les couleurs utilisées sont listées ci-après :
    1. vert turquoise (fond du titre et bords horizontaux): #00CC99
    2. vert d'eau (fond de thead et lignes impaires): #fde9d9
    3. bleu gris (fond tfoot ): #006699
    4. vert de gris (bords verticaux): #99cc66
    5. jaune pâle (couleur police entête et pied): #ffc
Où est la solution ?

SAGEXA

La bienveillance numérique à vos côtés,

en Nouvelle-Aquitaine et partout ailleurs.

information actualisée le 21/11/2024

Nous contacter

Adresse: St Georges des Agoûts

Téléphone: Tél.: 05 32 92 09 16

Fax: 00 71 50 20 17

Email: contact@sagexa.com

Clients & Témoignages

avatar
"Le stage s'est très bien déroulé, dans une bonne ambiance, et bien mené par le formateur."
E.P., DRASS Caen
avatar
"Excellente formation sur la découverte de PHP/MySql"
R.A., Cetelem
avatar
"Bon prof, bonne formation"
C.P., Crédit Agricole
avatar
"Formation très efficace"
M.D., Dassault Systèmes
avatar
"Très condensé avec des exercices pertinents"
I.B., Orange
avatar
"Une très bonne approche pour évaluer la potentialité de PHP."
S.C., La Documentation Française
avatar
"Bonnes bases pour retravailler seul et approfondir."
Y.C., DRASS Caen
avatar
"Formation très complète, et de nombreux exercices à difficultés dosées ce qui permet de bien assimiler."
H.S., DRASS Caen
avatar
"Très bien !"
B.A., ALCATEL
avatar
"Un peu court pour tout voir, mais la doc permet de compléter."
C.C., Philips
avatar
"Très bien. Correspond exactement à ce que je suis venu chercher."
B.R., Etat-Major des Armées
avatar
"Il y a beaucoup de manipulations. Bon cours."
L.H., Etat-Major des Armées
avatar
"Rythme intense. Méthode efficace."
F.C., France Télécom
avatar
"Formateur très disponible à toutes les questions et difficultés rencontrées au cours des exercices."
C.J-P., Préfecture de Police
avatar
"Très dense et très riche, mais trop court !"
C.P., Ministère de l'Intérieur
avatar
"Cours très complet qui permet de voir énormément de points.Les exercices sont pertinents et permettent de voir des cas concrets.Beaucoup d’infos à absorber en 4 jours qui nécessitent de beaucoup pratiquer pour bien assimiler.La doc fournie est complète et sera très utile."
L.S., Camaieu
avatar
"Contenu approprié à mes besoins"
V.M., Normand Info
avatar
"Le contenu de la formation est à la hauteur de mes attentes, très bon sur la pédagogie."
D.M., IHEDN
avatar
"Très bonne formation, assez approfondie pour de la "prise en main"."
P.J., Safran Aircraft Engines
avatar
"Cette formation est très bien conçue avec une très bonne pédagogie du formateur."
M.L.J., RATP
avatar
"Formation correspondant à mes attentes"
G.L.G., CRAMIF
avatar
"Très satisfait - Formateur maitrisant parfaitement le sujet."
B.A., EDF
avatar
"Très satisfait - Le formateur était pédagogue, patient et expérimenté. De plus, le groupe comprenait peu de personnes. Je suis donc très satisfait de cette formation."
B.F., Alten SIR
avatar
"Très satisfait - Je suis particulièrement satisfait de la formation surtout par la disponibilité du formateur et par le contenu du programme."
E.Y.Z., CGI
avatar
"Très satisfait - Super formation avec un super formateur !"
J.B., Devoteam
avatar
"Très satisfaite - vraiment ravie de cette formation, j’ai pu mieux appréhender l’orientation objet. Xavier a toujours su répondre à mes questions et remarques!"
C.A., BRED Banque Populaire
avatar
"Très satisfaite - Approche pas à pas avec une alternance pratique et théorie fortement appréciée"
F.M., Invensense Movea France
avatar
"Très satisfait - Explications toujours pertinentes et très claires. Formateur ayant une approche très pédagogique et très compétent sur le sujet"
L.S., Collins Aerospace
avatar
"Très satisfait - Très bon formateur, très compétent et expliquant de manière graduelle les concepts mis en jeu."
V.N., SNAO

© Sagexa.com