LES TABLEAUX HTML <table>

1- La base

source : http://openclassrooms.com/courses/apprenez-a-creervotre-site-web-avec-html5-et-css3/les-tableaux-1

<table> </table>.
C'est cette balise qui permet d'indiquer le début et la fin d'un tableau.
Cette balise est de type bloc, il faut donc la placer en dehors d'un paragraphe.
Exemple :
<p>Ceci est un paragraphe avant le tableau.</p>
<table>
<!-- Ici, on écrira le contenu du
tableau -->
</table>
<p>Ceci est un paragraphe après le tableau.</p>

D'un certain point de vue, un tableau possède une architecture assez similaire à celle d'une liste à puces, mais les 'ul' deviennent des 'tr' et les 'li' des 'td'. De plus, on construit à l'horizontale.
•<tr> </tr> :
indique le début et la fin d'une ligne du tableau ;
•<td> </td> :
indique le début et la fin du contenu d'une cellule.
En HTML, un tableau se construit ligne par ligne. Dans chaque ligne (<tr>), on indique le contenu des différentes cellules
(<td>).


Un tableau, avec des cellules contenues dans des lignes
On a une balise de ligne (<tr>) qui englobe un groupe de cellules (<td>).
Par exemple, pour un tableau à deux lignes, avec trois cellules
par ligne :
<table>
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>États-Unis</td>
</tr>
</table>

2- Les bordures

Pour ajouter des bordures, dans le CSS :
td /* Toutes les cellules des tableaux...
*/
{
border: 1px solid black; /* auront une
bordure de 1px */
}

Chaque cellule a sa propre bordure
Pour n'avoir qu'une seule bordure, il existe une propriété CSS spécifique aux tableaux, border-collapse, qui signifie « coller les bordures entre elles ».
Cette propriété peut prendre deux valeurs :
• collapse : les bordures seront collées entre elles
• separate : les bordures seront dissociées (valeur par défaut)
table
{
border-collapse: collapse; /* Les bordures
du tableau seront collées (plus
joli) */
}
td
{
border: 1px solid black;
}
Les bordures sont collées les unes aux autres.

3- La ligne d'en-têtes

La ligne d'en-tête se crée avec un <tr> comme on l'a fait jusqu'ici, mais les cellules qu'elle contient sont, cette fois, encadrées par des balises <th> et non pas <td> !
<table>
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>États-Unis</td>
</tr>
</table>

La ligne d'en-tête est très facile à reconnaître pour deux raisons :
• les cellules sont des <th> au lieu des <td> habituels ;
• c'est la première ligne du tableau (c'est idiot, mais encore faut-il le préciser).
Comme le nom des cellules est un peu différent pour l'en-tête, il faut penser à mettre à jour le CSS pour lui dire d'appliquer une bordure sur les cellules normales et sur l'en-tête
table
{
border-collapse: collapse;
}
td, th /* Mettre une bordure sur les td ET
les th */
{
border: 1px solid black;
}
Le navigateur a mis en gras le texte des cellules d'en-tête. C'est ce que font en général les navigateurs mais, si vous le désirez, vous pouvez changer cela à coups de CSS.

4- Titre du tableau

<caption>
Cette balise se place tout au début du tableau, juste avant l'entête :
<table>
<caption>Passagers du vol 377</caption>
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>États-Unis</td>
</tr>
</table>

Vous pouvez changer la position du titre avec la propriété CSS caption-side qui peut prendre deux valeurs :
• top : le titre sera placé au-dessus du tableau (par défaut) ;
• bottom : le titre sera placé en dessous du tableau.

5- Un tableau structuré

Il arrivera que vous ayez besoin de réaliser des tableaux plus complexes.
• Pour les gros tableaux, il est possible de les diviser en trois parties :
• En-tête ;
• Corps du tableau ;
• Pied de tableau.

Pour certains tableaux, il se peut que vous ayez besoin de fusionner des cellules entre elles.
Si votre tableau est assez gros, vous aurez tout intérêt à le découper en plusieurs parties. Pour cela, il existe des balises HTML qui permettent de définir les trois « zones » du tableau :
• l'en-tête (en haut) : il se définit avec les balises
<thead></thead>
;
• le corps (au centre) : il se définit avec les balises
<tbody></tbody>
;
• le pied du tableau (en bas) : il se définit avec les balises
<tfoot></tfoot>.
Que mettre dans le pied de tableau ? Généralement, si c'est un
long tableau, vous y recopiez les cellules d'en-tête. Cela permet
de voir, même en bas du tableau, à quoi se rapporte chacune
des colonnes.

Un tableau découpé en plusieurs parties
C'est un peu déroutant mais il est conseillé d'écrire les balises
dans l'ordre suivant :
1 <thead>
2 <tfoot>
3 <tbody>
Dans le code, on renseigne donc d'abord la partie du haut, ensuite la partie du bas, et enfin la partie principale (<tbody>).
Le navigateur se chargera d'afficher chaque élément au bon endroit.
Voici donc le code à écrire pour construire le tableau en trois parties :
<table>
<caption>Passagers du vol 377</caption>
<thead> <!-- En-tête du tableau -->
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
</thead>
<tfoot> <!-- Pied de tableau -->
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
</tfoot>
<tbody> <!-- Corps du tableau -->
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>États-Unis</td>
</tr>
<tr>
<td>François</td>
<td>43 ans</td>
<td>France</td>
</tr>
<tr>
<td>Martine</td>
<td>34 ans</td>
<td>France</td>
</tr>
<tr>
<td>Jonathan</td>
<td>13 ans</td>
<td>Australie</td>
</tr>
<tr>
<td>Xu</td>
<td>19 ans</td>
<td>Chine</td>
</tr>
</tbody>
</table>

Il n'est pas obligatoire d'utiliser ces trois balises (<thead>, <tbody>, <tfoot>) dans tous les tableaux. En fait, vous vous en servirez surtout si votre tableau est assez gros et que vous avez besoin de l'organiser plus clairement.
Pour les « petits » tableaux, vous pouvez garder sans problème l'organisation plus simple que nous avons vue au début.

6- Fusionner des cellules

Dans certains tableaux complexes, vous aurez besoin de « fusionner » des cellules entre elles.
Pour effectuer une fusion, on rajoute un attribut à la balise
<td>.
Il faut savoir qu'il existe deux types de fusion :
• La fusion de colonnes : c'est ce que je viens de faire dans cet exemple. La fusion s'effectue horizontalement. On utilisera l'attribut colspan.
• La fusion de lignes : là, deux lignes seront groupées entre elles. La fusion s'effectuera verticalement. On utilisera l'attribut rowspan.
Comme vous le savez, vous devez donner une valeur à l'attribut (que ce soit colspan ou rowspan). Il faut indiquer le nombre de cellules à fusionner entre elles.
<td colspan="2">… qui signifie : « Cette cellule est la fusion de deux cellules ». Il est possible de fusionner plus de cellules à la fois (trois, quatre, cinq… autant que vous voulez).
Voilà le code HTML :
<table>
<tr>
<th>Titre du film</th>
<th>Pour enfants ?</th>
<th>Pour adolescents ?</th>
</tr>
<tr>
<td>Massacre à la tronçonneuse</td>
<td >Non, trop violent</td>
<td>Oui</td>
</tr>
<tr>
<td>Les bisounours font du ski</td>
<td>Oui, adapté</td>
<td>Pas assez violent...</td>
</tr>
<tr>
<td>Lucky Luke, seul contre tous</td>
<td colspan="2">Pour toute la famille
!</td>
</tr>
</table>

Une remarque importante : vous voyez que la ligne 19 ne contient que deux cellules au lieu de trois (il n'y a que deux balises <td>). C'est tout à fait normal car j'ai fusionné les deux dernières cellules entre elles. Le <td colspan="2"> indique que cette cellule prend la place de deux cellules à la fois.

Avec rowspan, cela se complique un petit peu. Pour notre exemple, nous allons « inverser » l'ordre de notre tableau : au lieu de mettre les titres de films à gauche, on va les placer en haut.
C'est une autre façon de voir le tableau : au lieu de le construire en hauteur, on peut le construire en longueur.
Dans ce cas, le colspan n'est plus adapté, c'est un rowspan qu'il faut utiliser :
<table>
<tr>
<th>Titre du film</th>
<td>Massacre à la tronçonneuse</td>
<td>Les bisounours font du ski</td>
<td>Lucky Luke, seul contre tous</td>
</tr>
<tr>
<th>Pour enfants ?</th>
<td>Non, trop violent</td>
<td>Oui, adapté</td>
<td rowspan="2">Pour toute la famille
!</td>
</tr>
<tr>
<th>Pour adolescents ?</th>
<td>Oui</td>
<td>Pas assez violent...</td>
</tr>
</table>

Les cellules ont été fusionnées verticalement
Notez qu'on peut modifier l'alignement vertical du texte des cellules de tableaux avec la propriété vertical-align .

EN RÉSUMÉ

• Un tableau s'insère avec la balise <table> et se définit ligne par ligne avec <tr>.
• Chaque ligne comporte des cellules <td> (cellules normales) ou <th> (cellules d'en-tête).
• Le titre du tableau se définit avec <caption>.
• On peut ajouter une bordure aux cellules du tableau avec border. Pour fusionner les bordures, on utilise la propriété CSS border-collapse.
• Un tableau peut être divisé en trois sections :
<thead> (en-tête), <tbody> (corps) et <tfoot> (bas du tableau). L'utilisation de ces balises n'est pas obligatoire.
• On peut fusionner des cellules horizontalement avec l'attribut colspan ou verticalement avec rowspan. Il faut indiquer combien de cellules doivent être fusionnées.

LES TABLEAUX CSS

la base :http://www.alsacreations.com/tuto/lire/610-Mise-enpage-CSS-avancee-grace-a-la-propriete-display.html
http://openclassrooms.com/courses/des-techniques-modernespour-l-agencement-en-colonnes
http://css.mammouthland.net/mise-en-page-avec-display-table.php
http://www.w3.org/TR/CSS21/tables.html#table-display

Pendant longtemps , il fallait faire beaucoup de chipotages pour arriver à avoir des colonnes de même
taille. Avant l’apparition du CSS, on utilisait les tableaux, ce qui causait des problèmes au niveau de la sémantique (“le tableau est là pour illustrer des données).
En général, les techniques ne sont pas toujours compatibles avec internet explorer .

Voici une liste des balises CSS et leur équivalent en HTML :
table = { display: table }
tr = { display: table-row }
thead = { display: table-header-group }
tbody = { display: table-row-group }
tfoot = { display: table-footer-group }
col = { display: table-column }
colgroup = { display: table-column-group }
td, th = { display: table-cell }
caption = { display: table-caption }

Notre but n’est pas d’imiter un tableau car on reproduira sa principale lacune . On ne s’occupera pas du design sans stocker les données. Il aura le risque d’alourdir le code source comme sur cet exemple ( déconseillé à utiliser):
<table>
<tr>
<td>Colonne 1</td>
<td>Colonne 2, avec du contenu
supplémentaire<br />…<br />…</td>
</tr>
</table>
La chose intéressante dans cet exemple est la capacité du tableau à obtenir des cellules de mêmes tailles. Depuis le CSS2.1 , il est possible de reproduire le comportement des cellules de tableaux sans faire de tableaux. Nous pouvons donc les faire à n’importe quels éléments. Nous
touchons plus aux HTML, mais on va du coté du CSS, on fabrique la représentation sous forme de tableau.
Les deux avantages sont que la présentation est hors du contenu et la sémantique est respectée. Et elle est maintenant parfaitement supportée par les navigateurs d’après Caniuse ( lien: http://caniuse.com/#feat=css-table).

Un peu de pratique :
Voici une structure en HTML sans le CSS: les deux
colonnes ont du contenu et sont dans des balises
paragraphes :
<p class=”colonne”>Contenu de la colonne</
p>
<p class=”contenu”>Contenu</p>
Attention ça ne suffit pas pour la représentation CSS, ces deux bouts de code sont abandonnés en plein milieu d’autres éléments.
Nous allons instaurer un élément qui regroupera les deux paragraphes : un div ( attention le div
n’est pas sémantiquement correct mais peut être utilisé s’il n’y a pas de balise plus appropriée:
<div class=”colonnes”>
<p class=”colonne”>Contenu de la colonne</p>
<p class=”contenu”>Contenu principal</
p>
</div>
Si on lit ce fichier sans le CSS, on ne sera pas dérangé par des éléments qui ont un rapport avec le design .

Passons au CSS :

Mettons la fondation de nos colonnes grâce au CSS
Permet de dresser la base de nos colonnes, grâce au CSS et parlons un moment de la propriété display. Elle est surtout connue pour ses trois valeurs les plus répandues :
display: block; /* Affiche en tant
qu’élément block */
display: inline; /* Affiche en tant
qu’élément en-ligne */
display: none; /* N’affiche pas l’élément
*/
Depuis le CSS2 , la propriété display est complétée par de nouvelles fonctions dont deux qui vont nous intéresser plus particulièrement :
display: table; /* Affiche en tant
qu’élément principal de tableau */
display: table-cell; /* Affiche en tant que
cellule de tableau */
Mais comment afficher les éléments de colonnes ?
Pendant le code HTML, nous avons rajouté un div mais il n’était pas obligatoire car il n’y pas de vraies cellules.
Voici un bout de code CSS:
div.colonnes {
display: table;
}
p.colonne, p.contenu {
display: table-cell;
padding: 5px;
border: 1px solid black;
}
Nous avons défini deux colonnes qui ont la même hauteur mais les largeurs varient car les colonnes s’adaptent au contenu.
Parlons des avantages de la propriété table : Permet de produire un espacement entre nos cellules ( borderspacing).
ex :
div.colonnes {
display: table;
border-collapse: separate; /* Pour
s’assurer que les cellules ne sont pas
collées */
border-spacing: 5px; /* 5 pixels
d’écartement entre les colonnes */
}

La propriété empty-cells: permet de montrer ou cacher un élément.
Les avantages de display: table-cell : le vertical-align est son plus grand avantage ( centré un texte verticalement) et qui se conforme au contenu .
ex :
p.colonne {
display: table-cell;
text-align: center; /* Centrage horizontal
*/
vertical-align: middle; /* Centrage
vertical */
}

Explication d’éléments display pour simuler un tableau :
La propriété display est capable d’afficher, en plus des cellules, tous les éléments concernant les tableaux.

Voici une liste à laquelle , vous pouvez vous référer :table = Élément principal de tableau
table-inline = Tableau en-ligne
table-row = Ligne de tableau
table-column = Colonne de tableau
table-row-group = Groupement de lignes de tableau
table-column-group= Groupement de colonnes de
tableau
table-cell = Cellule de tableau
table-header-group = En-tête de tableau
table-footer-group = Pied de tableau
table-caption = Titre de tableau

Source des valeurs :http://www.w3.org/TR/CSS21/visuren.
html#propdef-display

EN RÉSUMÉ

On peut modifier quand on veut les couleurs de fond sans passer par la création d’images .
On ne doit pas prévoir de colonne qui se basera sur le contenu qui prendra le plus de hauteur, à l’inverse des positionnements absolus.
On utilise cette propriété dans son sens sémantique, contrairement aux détournements récurrents de certaines propriétés et au balisage de mise en forme .





Pour plus d'informations : http://openweb.eu.org/articles/le-modele-tabulaire-en-css
- Benjamin Farris, Pascal Vanhoren - Février 2015 -