On a tous déjà rigolé (au moins une fois) en voyant un dev. essayer de faire de l’intégration : des interrogations qui ont ni queue ni tête, des résultats farfelus, tout cela relevé d’un « IE on s’en fou, ça marche en CSS4 sur Firefox ».
La question débile (ou pas)
Mais il y a des questions qui se révèlent parfois magiques intéressantes. La dernière en date fut : « C’est légal de mettre zéro à un colspan ? » J’avoue avoir hésiter un long moment avant de répondre. D’ailleurs, mes premiers mots auraient pu être : « T’es débile ! », « Mais où vas-tu chercher un truc comme ça ? ».
Mais nous le savons tous, les questions les plus bêtes sont souvent loin de l’être et accrochez vous bien : OUI ! il est tout à fait possible d’assigner la valeur zéro à l’attribut colspan. C’est même le W3C qui le dit : w3.org/TR/html4/struct/tables.html.
Le cas pratique
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>colspan="0"</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
color: #333;
font: 13px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
table {
border: 1px solid #ddd;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
caption, th, td { text-align: left; }
th, td {
border: 1px solid #ddd;
padding: 8px;
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<thead>
<tr><th>#</th><th>First Name</th><th>Last Name</th><th>Website</th></tr>
</thead>
<tbody>
<tr><td rowspan="2">1</td><td>Xavier</td><td>Zalawa</td><td><a href="http://7studio.fr/">7studio.fr</a></td></tr>
<tr><td></td><td></td><td><a href="http://bricks-css.tumblr.com/">bricks-css.tumblr.com</a></td></tr>
</tbody>
<tbody>
<tr><td>2</td><td>Matthieu</td><td>Lebreton</td><td><a href="http://gorlo.fr/">gorlo.fr</a></td></tr>
</tbody>
<tfoot>
<tr><th colspan="0">Tables For, you guessed it, tabular data</th></tr>
</tfoot>
</table>
</body>
</html>Rien de mieux qu’un exemple concret : colspan-0.html ou plus généralement browsers-table.html.
Concrètement, la valeur zéro “0” signifie que la cellule va couvrir toutes les colonnes, à partir de la colonne courante jusqu’à la dernière colonne du groupe de colonnes (COLGROUP) dans lequel la cellule est définie.
Dorénavant, cette solution simple nous permet d’envisager une maintenabilité plus facile et plus rapide des tableaux que nous aimons tant. Mais il y a un hic. Contrairement au précédent article, seul Firefox semble interpréter cette règle. Bizarre ? Carrément. Dommage ? Encore plus.
Un Hack sinon rien
En cherchant bien, il existe finalement une solution cross-browser :
colspan="100%"Je vous l’accorde, cette solution n’est pas très propre et totalement plutôt incompréhensible mais elle marche. Je vous laisse donc seul juge de son utilisation. Après, si “100%” ne vous plait pas, vous pouvez tout à fait mettre “1000”, ça marche très bien aussi (sans commentaire sur ce coup)…
Sur ce coup, je n’ai pas de mots racoleurs percutants pour finir. Mais sachez quand même que ça marche aussi pour rowspan.