Tout d'abord, je vais vous montrer comment connecter les cellules d'une ligne les unes aux autres par colonnes. Cela permet à une colonne dans la ligne concernée de s'étendre sur plusieurs colonnes.
Un exemple :
<table border="1">
<tr>
<th colspan="2">Dates</th>
</tr>
<tr>
<td>11.4.2014</td>
<td>12.4.2012</td>
</tr>
<tr>
<td>13.4.2014</td>
<td>14.4.2014</td>
</tr>
<tr>
<td>15.4.2014</td>
<td>16.4.2014</td>
</tr>
</table>Auparavant, un mot sur l'élément th utilisé ici. Cet élément marque les cellules d'en-tête. Les navigateurs affichent habituellement ces cellules en gras et centrées. Et voici le résultat dans le navigateur :
À l'intérieur du th introductif, l'attribut colspan est défini. La valeur attendue est le nombre de colonnes sur lesquelles la cellule actuelle doit s'étendre. Assurez-vous toujours que le nombre de colonnes spécifié est correct, sinon le résultat risque d'être désagréable. Dans cet exemple, l'en-tête marqué par th devrait s'étendre sur deux colonnes. À l'intérieur des deux lignes restantes, il y a respectivement deux lignes à nouveau.
Un petit conseil concernant la connexion des lignes. Pendant la phase de développement, attribuez une bordure (border) aux tableaux. Ainsi, vous pouvez toujours voir immédiatement si la connexion fonctionne comme prévu.
Connecter les cellules dans une colonne par ligne
Avec l'attribut rowspan, plusieurs cellules dans une colonne peuvent être connectées les unes aux autres. La cellule concernée s'étend alors sur plusieurs lignes dans la colonne. Un exemple ici aussi :
<table border="1">
<tr>
<th rowspan="2">Couleur</th>
<td>Bleu</td>
</tr>
<tr>
<td>Vert</td>
</tr>
<tr>
<th rowspan="2">Taille</th>
<td>1,70</td>
</tr>
<tr>
<td>1,80</td>
</tr>
</table>Dans le navigateur, cela ressemble à ceci :
L'attribut rowspan est assigné une valeur numérique. Cela détermine finalement le nombre de lignes dans une colonne sur lesquelles une cellule doit s'étendre. Ici aussi, il est bien sûr important que le nombre de lignes spécifié soit correct.
Connecter les cellules à la fois par ligne et par colonne
Les deux attributs rowspan et colspan peuvent également être combinés. Ainsi, des cellules peuvent être définies qui s'étendent à la fois sur plusieurs lignes et colonnes. Cela peut également être montré le mieux avec un exemple.
<table border="1">
<tr>
<th colspan="2" rowspan="2">Appartement</th>
<td>5 pièces</td>
</tr>
<tr>
<td>154 m²</td>
</tr>
<tr>
<td>Charlottenburg</td>
<td>Place de parking</td>
<td>Plancher chauffant</td>
</tr>
</table>
Un coup d'œil dans le navigateur donne le résultat suivant :
Lors de la combinaison des deux attributs, il est bien sûr également nécessaire de faire preuve de prudence pour que le nombre de cellules corresponde réellement à la fin.
Étiqueter les tableaux
Une possibilité très intéressante pour rendre les tableaux plus compréhensibles est l'élément caption. Car il permet d'ajouter un titre ou une légende à un tableau. Le contenu de caption est affiché en dehors du tableau, bien que sa définition se fasse dans le tableau.
Voici une application typique pour caption :
Au-dessus du tableau, un titre de tableau est affiché. Par défaut, le titre est centré au-dessus du tableau. Bien sûr, cela peut ensuite être modifié de manière individuelle avec du CSS.
L'élément caption est défini directement après le <table> introductif.
Voici la syntaxe complète de l'exemple précédemment montré :
<table border="1">
<caption>Données média</caption>
<colgroup><col /><col /><col /><colgroup>
<thead>
<tr>
<th>Sujet</th>
<th>Vues</th>
<th>Tendance</th>
</tr>
<thead>
<tfoot>
<tr>
<td colspan="3">Au mois de juin 2014</td>
</tr>
<tfoot>
<tbody>
<tr>
<td>HTML5</td>
<td>12.245</td>
<td>+</td>
</tr>
<tr>
<td>CSS3</td>
<td>12123</td>
<td>+</td>
</tr>
<tr>
<td>JavaScript</td>
<td>11.546</td>
<td>+</td>
</tr>
</tbody>
</table>Créer des tableaux
Pour la conception des tableaux, il existait dans les anciennes versions d'HTML de nombreux attributs. Voici quelques exemples de choses qui pouvaient être régulées à l'aide d'attributs. (Bien sûr, les navigateurs supportent toujours ces attributs aujourd'hui. Cependant, ils ne devraient plus être utilisés en HTML5).
• Cadre extérieur
• Cadre intérieur des tableaux
• Largeur et hauteur
• Lignes de grille
• Alignement du contenu des cellules
• Couleurs
• Images de fond
Vous voyez déjà que tout peut être contrôlé via les attributs HTML correspondants. L'exemple suivant montre un tableau dans lequel ces possibilités ont été largement utilisées :
<table border="1">
<tr>
<td width="200" height="100" bgcolor="#999933">Un</td>
<td width="200" bgcolor="#00ffff">Deux</td>
<td width="200">Trois</td>
</tr>
<tr bgcolor="#ff00ff">
<td height="100">Quatre<</td>
<td bgcolor="#996666">Cinq</td>
<td bgcolor="#003333">Six</td>
</tr>
</table>
Le résultat correspond à ce qui était attendu.
Mais même si cela ressemble à ce que cela devrait être, la syntaxe sous-jacente n'est pas du tout efficace. Il est préférable de contrôler les propriétés des tableaux avec du CSS. Grâce aux nouvelles propriétés CSS, il est possible non seulement de remplacer les anciens attributs par une syntaxe moderne, mais aussi de mettre en œuvre des fonctionnalités supplémentaires. Par exemple, il est désormais possible de colorer facilement en alternance les lignes des tableaux.
Dans les anciens temps d'HTML et de CSS, il fallait parfois faire de grandes acrobaties avec le code pour obtenir un tel résultat. En misant maintenant pleinement sur les possibilités offertes par le CSS, quelque chose comme ça est très facile à réaliser.
tr:nth-child(even) {
background-color: #fd9d5d;
}
tr:nth-child(odd) {
background-color: #c0f390;
}
table {
border-spacing: 0px;
}
Comme mentionné à plusieurs reprises, je traiterai en détail le CSS dans le cadre de cette série.
