Ce que nous allons réaliser
Preparation
La réalisation de cette étape nécessite deux fichiers :
- la page HTML destinée à héberger votre tableau, il peut s'agir d'un nouveau fichier que vous créerez ou d'une page déjà existante de votre site dans laquelle vous souhaitez intégrer le tableau.
- Un fichier CSS, que nous nommerons pour l'exemple "styletable.css". Comme d'habitude, je travaille à partir d'une feuille de style externe mais rien ne vous empeche d'intégrer ces règles directement dans le <head> de votre page HTML.
Mise en place de la structure du tableau et désignation des éléments
Nous allons maintenant insérer une <table> dans notre fichier .html et appeler le fichier "styletable.css" directement, vous permettant ainsi de visualiser le résultat de vos règle de style au fur et à mesure de leur écriture.
Nous utiliserons la balise <caption> pour décrire son contenu et encadrerons son texte par une balise <H1> (ou autre selon vos règles existantes).
Nous définirons ensuite les lignes d'entetes de tableau grace à la balise <thead>, le pied de tableau avec <tfoot> et son contenu par <tbody>. Chaque ligne de tableau sera marquée par un élément <tr>.
Les titres de colonnes
disposeront d'un "scope=col" exception faite de la colonne Internet Explorer qui se verra désignée par "scope=colgroup" puisqu'il s'agit de l'entete de 3 colonnes.
Si une cellule s'étend sur plusieurs lignes ou colonnes, il vous faudra alors l'indiquer à l'aide des attributs "rowspan" et "colspan".
Ici, par exemple, la cellule contenant le titre Firefox s'étend sur 2 lignes (dixit Internet Explorer et ses sous catégories) et se verra donc attribuée un "rowspan=2" ; alors que la cellule contenant le titre Internet Explorer s'étend, elle, sur 3 colonnes (dixit ses sous-catégories) mais sur 1 seule ligne, nous lui attribuerons donc un "rowspan=3".
Voici le résultat de cette structure en language HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pourcentage d'utilisation des navigateurs web en 2010</title>
<!--On appelle la feuille de style CSS -->
<link type="text/css" rel="stylesheet" media="screen" href="tablestyle.css" />
</head>
<body>
<table>
<caption>
<h1>Pourcentage d'utilisation des navigateurs web en 2010</h1></caption>
<thead>
<tr>
<td rowspan="2"></td>
<th scope="col" rowspan="2">ex:Firefox</th>
<th scope="col" rowspan="2">Titre de categorie</th>
<th scope="colgroup" colspan="3">ex:Internet Explorer</th>
<th scope="col" rowspan="2">Titre de categorie</th>
<th scope="col" rowspan="2">Titre de categorie</th>
</tr>
<tr>
<th scope="col">ex:IE 6</th>
<th scope="col">ex:IE 7</th>
<th scope="col">ex:IE 8</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Titre de ligne</th>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
</tr>
<tr>
<th scope="row">Titre de ligne</th>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
</tr>
<tr>
<th scope="row">Titre de ligne</th>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
</tr>
<tr>
<th scope="row">Titre de ligne</th>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Titre de ligne finale</th>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
<td>votre texte</td>
</tr>
</tfoot>
</table>
</body>
</html>
Définitions des règles de style CSS
Nous allons maintenant appliquer des règles de styles aux éléments de ce tableau que nous écrirons dans le fichier "tablestyle.css" préalablement préparé.
Comme nous avons précédemment établi des attributs
à chaque élément de ce tableau, il vous suffira de les reprendre afin de leur assigner leur style respectif.
Afin de faciliter la lecture de ce tableau par le visiteur de votre site, nous intégrerons un effet de ligne et un effet de rollover aux lignes et case survolées grace aux classes ":nth-child" .
Pour ceci, nous utiliserons les arguments "even" et "odd" correspondants respectivement à ":nth-child(2n)" et ":nth-child(2n+1)".
Afin d'adoucir le visuel général du tableau, noous utiliserons la propriété "border-radius".
La règle de style CSS (à personnaliser) :
body { /*regles generales de la page html, a déterminer avec l'existant*/
font: 13px/1.5 Helvetica, sans-serif; /*taille de la police / hauteur de ligne - police*/
padding: 20px;
background-color:#151A13;
}
table, caption, thead, tfoot, tbody, th, td, h1 {
margin: 0;
padding: 0;
}
/* règles générales du tableau */
table {
background: #A7DBD8;
border: 1px solid #79B2AF;
border-collapse: separate;
border-width: 0 1px 1px 0;
border-spacing: 4px;
color: #333333;
margin-top: -20px;
max-width: 900px;
min-width: 400px;
padding: 20px 5px 5px 5px;
width: 100%;
}
/*fin des règles générales du tableau */
table, caption {
text-align: left;
}
caption h1 { /*cellule contenant le titre du tableau*/
background: #F38630;
border: 1px solid #B66A2E;
border-width: 0 1px 1px 0;
color: #38210e;
display: inline-block;
font-size: 16px;
font-weight: bold;
left: -10px;
padding: 3px 12px;
position: relative;
text-shadow: 0 1px 1px #EECAAE;
top: 14px;
}
th, td {
border-width: 5px;
padding: 1px 6px;
}
th { /*texte des intitulés de colonnes et cellules*/
color: #31605D;
}
thead,td {
text-align: center;
}
td:empty {
background: #A7DBD8;
border: 0;
}
thead th { /*background entete de colonne*/
background: #D3EDEB;
}
thead tr:nth-of-type(n+2) th { /*background sous-classes de colonne*/
background: #C1E5E3;
}
tfoot td { /*cellules de resultats*/
background: #95C4C1;
font-style: italic;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 5px 6px;
text-shadow: 0 1px 1px #FFFFFF;
}
th[scope=row] {
font-variant: small-caps;
letter-spacing: 1px;
}
tbody td {
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
text-shadow: 0 1px 1px #FFFFFF;
background: #E5F2F1;
}
tbody tr:nth-child(odd) td { /*effet ligne lignes impaires (ligne1 - ligne 3 - ligne ...)*/
background-color:#d7eceb;
}
tbody tr:nth-child(even) td { /*effet ligne lignes paires (ligne2 - ligne4 - ligne ...)*/
background-color:#e5f2f1;
}
tbody tr:nth-child(odd):hover td,tbody tr:nth-child(even):hover td { /*rollover ligne*/
background-color:#eaae58;
}
tbody tr:nth-child(odd) td:hover,tbody tr:nth-child(even) td:hover { /*rollover cellule*/
background-color:#ece7c9;
}
table,caption h1,thead th,tfoot td,tbody td { /*arrondi des angles*/
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
Conclusion
Et voilà, votre tableau a maintenant beaucoup plus d'allure.
Je ne vous rappellerai pas que ce style est un exemple et qu'il vous appartient de le personnaliser.
Vous pouvez sans problème utiliser la base de code HTML fournie et ajouter, retirer, modifier lignes et colonnes afin d'obtenir le tableau qui completera votre page de site.