Je voudrais construire un tableau comme suit:
| Major Heading 1 | Major Heading 2 |
| Minor1 | Minor2 | Minor3 | Minor4 |
----------------------------------------------
| col1 | col2 | col3 | col4 |
rest of table ...
Vu qu'il n'y a qu'une seule ligne pour les éléments TH, comment puis-je construire la ligne d'en-tête telle que les colonnes alignées? Les tables hiérarchiques ne semblent pas être une bonne option car la largeur des colonnes ne s'aligne pas et je ne peux pas non plus utiliser deux lignes avec des balises TH avec colspan.
Voici comment je le ferais (je travaillais avec http://jsfiddle.net/7pDqb/ ) Testé en Chrome.
th, td { border: 1px solid black }
<table>
<thead>
<tr>
<th colspan="2">Major 1</th>
<th colspan="2">Major 2</th>
</tr>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
Avez-vous utilisé accidentellement rowspan
au lieu de colspan
? Ou avez-vous accidentellement oublié une balise </tr>
de fermeture?
Pour étendre la réponse de tvanfosson, j'utiliserais l'attribut scope
SUR LES &EACUTE;L&EACUTE;MENTS th
à des fins sémantiques et d'accessibilité :
th, td { border: 1px solid black }
<table>
<thead>
<tr>
<th colspan="2" scope='colgroup'>Major Heading 1</th>
<th colspan="2" scope='colgroup'>Major Heading 2</th>
</tr>
<tr>
<th scope='col'>Minor1</th>
<th scope='col'>Minor2</th>
<th scope='col'>Minor3</th>
<th scope='col'>Minor4</th>
</tr>
</thead>
<tbody>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr>
</tbody>
</table>
Toutefois, outre le cas de cellules d'en-tête couvrant plusieurs colonnes, les tables comportant une cellule d'en-tête couvrant deux lignes sont également très souvent consultées.
Voici un exemple. Voir col 5
et data5
ci-dessous:
<table>
<thead>
<tr>
<th colspan="2">Major 1</th>
<th colspan="2">Major 2</th>
<th rowspan="2">col 5</th>
</tr>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
</tr>
</tbody>
</table>
Voici le violon .
Le site Web de la WAI (Web Accessibility Initiative) du W3C recommande d'utiliser la structure de balisage indiquée ci-dessous.
(Notez que le balisage rendu dans l'exemple de tableau sur le site Web diffère légèrement de celui affiché dans l'exemple de balisage. Voir le lien et inspectez le tableau.)
Source: https://www.w3.org/WAI/tutorials/tables/irregular/#table-with-two-tier-headers
<table>
<col>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<tr>
<td rowspan="2"></td>
<th colspan="2" scope="colgroup">Mars</th>
<th colspan="2" scope="colgroup">Venus</th>
</tr>
<tr>
<th scope="col">Produced</th>
<th scope="col">Sold</th>
<th scope="col">Produced</th>
<th scope="col">Sold</th>
</tr>
<tr>
<th scope="row">Teddy Bears</th>
<td>50,000</td>
<td>30,000</td>
<td>100,000</td>
<td>80,000</td>
</tr>
<tr>
<th scope="row">Board Games</th>
<td>10,000</td>
<td>5,000</td>
<td>12,000</td>
<td>9,000</td>
</tr>
</table>