Les tableaux


Le rôle d'un tableau est avant tout de présenter des informations d'une manière claire et concise, ligne par ligne, cellule par cellule.
L'utilisation des tableaux est proscrite par les normes W3C à des fins de mise en page. Cette technique qui a connu ces grands jours dans les années 90 est à considérer comme inadéquate et obsolète. Sans toutefois en abuser (lien externe), Il est préférable de lui substituer une mise en page à l'aide de DIV.

Tableaux dans yeswiki


yeswiki

test de tableau
à 3 colonnes


Tableaux HTML


alphabet
A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z

Code HTML


<table summary="Ce tableau est un alphabet">
<tbody>
<tr>
<th colspan="13">alphabet</th>
</tr>
<tr>
<td abbr="La lettre A">A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
</tr> 
<tr>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
<td>U</td>
<td>V</td>
<td>W</td>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</tbody>
</table>

Code CSS


table {
background-color: ivory; /*couleur d'arrière-plan du tableau*/
width:72%; /*spécifie une largeur au tableau, soit 72% de la largeur totale de la page; condition nécessaire pour calculer les marges automatiques, de chaque côté du tableau*/
margin-left:auto; /*la marge gauche, automatique, centre le tableau dans la largeur de la page*/
margin-right:auto /*la marge droite, automatique, centre le tableau dans la largeur de la page*/
}
th {
text-align: center; /*texte centré dans la cellule d'entête*/
font-weight: bold; /*texte en gras*/
text-transform: uppercase; /*texte en majuscule*/
color:ivory; /*couleur du texte de la cellule d'entête*/
border-style: solid; /*bordure*/
border-width: 0.1em; /*épaisseur de la bordure; */
border-color: #004464; /*couleur de la bordure*/
padding: 0.5em; /*espace autour du contenu de la cellule*/
background-color: #004464
}
td {
text-align: center;
border-style: solid;
border-width: 0.1em;
padding: 0.5em;
border-color: #004464;
background-color: ivory;
}

Commentaires


Accessibilité: l'attribut summary de la balise table permettait de décrire le contenu du tableau. Obsolète en HTML5.

L'attribut "abbr" précise la signification d'un acronyme : pour W3C, la valeur de "abbr" serait : "World Wide Web Consortium".

Le titre du tableau est une cellule "entête" particulière obtenue par l'usage de la balise th (h pour "head") au lieu de la balise td; ces cellules sont fusionnées par l'usage de l'attribut <th colspan="13"> (col pour "colonne") qui, dans ce cas, permet la fusion horizontale de 13 cellules.
Pour fusionner des lignes de cellules (row signifiant ligne), il faut utiliser l'attribut rowspan (lien externe) .


Alignement du texte dans les cellules


Code HTML


<td style="text-align: left">alignement du contenu à gauche
<td style="text-align: center"> alignement du contenu au centre
<td style="text-align: right"> alignement du contenu à droite