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.
