remplacement de tableaux par CSS

[K-ZimiR]

Je pense, enfin j'éspère que ma question va en interesser plus d'un

Je cherche à remplacer des mises en pages tableaux HTML par les CSS et voilà ce que je souhaite faire : un cadre général, et dans ce cadre 3 colonnes par exemple.

.cadreprincipal{
     border: 1px solid #999;
     padding: 3px;
     background: #ccc;
} 

.colonne1{
     /* doit contenir une image de 60 x 60 pixels */
     float: left;
}

.colonne2{
     /* contient du texte */
     width: 250px;
     float: left;
}

.colonne3{
     /* contient du texte*/
     float: right;
}

<div class="cadreprincipal">
     <span class="colonne1"><img ........></span>
     <span class="colonne2">bla bla bla</span>
     <span class="colonne3">bla</span>
</div>

Je ne peux pas utiliser de position: absolute; et dès que j'utilise les float, mes éléments sortent du cadre principal.

Pour rester pratique, allez voir la page que je souhaite transformer : www.bioblock.com puis click sur "promotions" et c'est le tableau en bas de la page avec les affaires à saisir.

Comment faire ? et quelles techniques conseillez et/ou utilisez-vous ?

Merci

[Ganf]

Pourquoi souhaites tu transformer ton tableau ? Qu'il y a t'il qui ne va pas avec ce tableau ?

à mon avis tu fais fausse route et tu n'as pas vraiment fait le point de tes motivations pour faire cette transformation.

[K-ZimiR]

Pourquoi souhaites tu transformer ton tableau ? Qu'il y a t'il qui ne va pas avec ce tableau ?

Parce que c'est un tableau qui sert à la mise en page et qu'il ne contient pas de données tabulées à proprement dit.

à mon avis tu fais fausse route et tu n'as pas vraiment fait le point de tes motivations pour faire cette transformation

Je crois bien que si, mais ce n'est pas l'objet du post, il y a assez de posts sur ce forum qui traitent de ces sujets :conformité, sémantique, normes, accessibilité, etc ... et les avantages, le pourquoi, etc ... .

Je souhaite ici solutionner un problème technique et en faire profiter tout le monde.

[Reuns]

Pour ne pas rentrer dans le débat du : Doit-on le faire ou ne pas la faire, je vais directement te donner un lien qui explique et illustre assez bien plusieurs exemples de style en colonnes !

Box Lessons

[Ganf]

Parce que c'est un tableau qui sert à la mise en page et qu'il ne contient pas de données tabulées à proprement dit.

C'est justement ce qui me semble contestable.

Dans http://www.bioblock.com/pages/promotions/promotions.asp, à la fin de la page ce qui est présent c'est bien une suite de données avec chacune :

- image

- descriptif

- réduction

- prix

- liens d'action

Ça me parait justement être tout ce qu'il y a de tabulaire : deux dimensions (une pour le type d'info et une pour les différents objets).

C'est justement quelque chose que moi je conseillerai de mettre sous forme de tableau si ça ne l'était pas.

mais ce n'est pas l'objet du post

Désolé d'avoir dérivé mais ça me semble important de dire quand je pense que c'est une erreur au lieu de donner une solution qui au final est mauvaise à mes yeux. Voir d'ailleurs à ce sujet mon dernier article (ça ne correspond pas tout à fait mais l'idée directrice est la même).

Ce d'autant plus qu'on est dans un espace public et que ce n'est pas à toi que je répond mais à tout ceux qui lisent ou qui liront. Donner une réponse sans faire la remarque alors que je pense ça faux, c'est plus ou moins inciter les gens derrière à faire pareil (ou plutot à ne pas voir le problème).

Pour la solution si tu y tiens vraiment je pense que le plus adapté ici c'est (si tu imposes de ne pas utiliser le <table> ) :

- transformer le <table> en <ul>

- transformer les <tr> en <li>

- transformer les <td> en <span>

Par la suite tu peux appliquer une présentation :

- sous mozilla et opera faire un display:table, display:table-row, display: table-cell sur les <ul> <li> <span>

- sous les autres définir les span en float:left, leur donner une taille horizontale (fixe pour la première colonne, proportionnelle au texte pour les autres) et affecter un clear:left aux <span> de première colonne.

Ça devrait dégrader correctement dans tous les navigateurs, textes compris.

Les solutions à base de colonnes comme "little boxes" (et non de lignes comme plus haut) sont plutot à réserver pour le layout de la page. Ils ont déjà des rendus bien plus complexes à mettre en oeuvre pour autre chose qu'un 3 colonnes simples sans gestion des lignes, et en plus ils dégradent mal dans les navigateurs texte/oraux qui font une lecture linéaire (on aurait alors tous les descriptifs, puis tous les prix, puis tous les boutons ...)

[K-ZimiR]

Effectivement, je dois avouer que je ne l'avais pas vu de cet angle là et je te remercie d'avoir poursuivi dans ta dérive afin d'expliquer ton pôint de vue

Le but de ma démarche est de nettoyer le code des pages du site en question et de recourrir au maximum au couple HTML/CSS, d'une part pour la facilité de maintenance, et d'autre part pour un éclaircicement du code (qui en a bien besoin).

C'est pour cela que je tente de m'affranchir des tableaux pour tous ce qui est de la mise en page et c'est vrai que je considérais l'utilisation des tableaux de cette liste d'articles comme un élément de mise en page ...

Merci pour ton analyse et pour la solution en listes

Et merci Reuns, j'avais déjà vu cette page et je ne la retrouvais plus