Construire un tableau en CSS pur : comment et pourquoi ?
Il n’y a pas que les TR/TD dans la vie !
L’idée est de définir un bloc positionné par une balise <div> dont le positionnement est relatif (par rapport au dernier élément du document HTML). Au sein de ce calque on en définit d’autres, cette fois de positionnement absolu par rapport au calque qui les contient.
Ce dernier est bien un calque et non un simple bloc, car il est positionné (de manière relative ici). Si on avait utilisé un bloc non positionné, les calques en position absolue auraient été placés par rapport au coin supérieur gauche de la fenêtre du navigateur.
Quels sont les avantages de cette deuxième approche?
- Premièrement l’ordre des blocs de positionnement "absolu" est arbitraire, ce qui peut être pratique pour le référencement par exemple (on met en avant le bloc qui contient le plus de mots-clés, alors qu’il s’affiche en fin de table).
- Deuxièmement, la structure du code HTML est simplifiée, les blocs sont homogènes.
- Troisièmement l’affichage est maîtrisé au pixel près sur la plupart des navigateurs classiques (Firefox, IE,etc…)
- Quatrièmement, le code HTML sera valide suivant les spécifications HTML 4.0.1.
Inconvenient :
- pas de gestion des hauteurs : il faut donner a chaque cellule une hauteur. L’attribut height="100%" par exemple, n’est pas géré.
- pas d’attributs Valign…
Le résultat :
MON TABLEAU EN CSS
Le code :
<div style="position: relative; width: 420px; height: 40px; font-family: Verdana; font-size: 10px; color: #000000">
<div style="position: absolute; left: 0px; top: 0px; width: 140px; height: 40px; background-color: #FFFF99; text-align: left; font-weight: bold">
Texte noir sur jaune
</div>
<div style="position: absolute; left: 140px; top: 0px; width: 140px; height: 40px; background-color: #0000FF; text-align: right; font-weight: bold; color: #FFFFFF">
Texte blanc sur bleu
</div>
<div style="position: absolute; left: 280px; top: 0px; width: 140px; height: 20px; background-color: #FFCC99; text-align: center; font-style: italic">
Texte italique 1
</div>
<div style="position: absolute; left: 280px; top: 20px; width: 140px; height: 20px; background-color: #99CC66; text-align: center; font-style: italic">
Texte italique 2
</div>
</div>
<i>MON TABLEAU EN CSS</i>
:p
exact, inaden, on peut jouer sur vertical-align
Personnellement je trouve ce code plus lourd qu’à « l’époque » des attributs de type valign. mais ça marche en CSS…
Bonjour,
par rapport à la remarque sur l’absence d’attribut Valign… on peut remplacer (peut-être) par des règle css liées à la balise qui formate le texte dans le div.
Par exemple, on met une balise p dans le div et on lui attribue vertical-align: middle; et un padding adapté…
C’est pas pareil mais on peut bidouiller quand même.
:)) Bonne solution alternative
Semble super pour faire des tableaux personnalisés ou des pages à agencement complexe et imbrications diverses
web tolosa tjs généreux avec les amateurs et à la hauteur
Ceci n’est pas un message publicitaire