▼ Table des matières
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
| test | de | tableau |
| à | 3 | colonnes |
Michel Cauzid, concevoir un tableau intégré dans Yeswik (lien externe).
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
