Tables et Colonnes en <div>

Bonjour à vous,

J'ai longtemps consulté cette très utile source d'information qu'est ce bien joli forum, qui semble fréquenté par beaucoup de gens fort impliqués et compétents dans le domaine de la conception web. C'est donc avec l'espoir de dévorer vos précieux conseils que je me décide aujourd'hui à poster mon premier sujet, car je préfère comprendre, plutôt que copier/coller aveuglément une solution servie sur un plateau d'argent...

Bref... Je cherche à créer une série de classes CSS élémentaires que je pourrais réutiliser pour n'importe quel tableau crée avec des <div> au lieu de <table>. J'abouti à une imbrication assez similaire à cette d'un élément <table>, soit:

<div class="divTable">
  <div class="divTableLine" style="width: 350px;">
    <span class="divTableCell" style="width:70px;">Col1</span>
    <div class="divTableCell" style="width: 70px;">Col2</div>
    <div class="divTableCell" style="width: 70px;">Col3</div>
    <div class="divTableCell" style="width: 70px;">Col4</div>
    <div class="divTableCell" style="width: 70px;">Col5</div>
  </div>
</div>

Avec la feuille de style suivante:

.divTable {
}

.divTableLine {
    display: box;
}

.divTableCell {
    display: inline;
}

L'affichage en colonne est parfait, mais je remarque que chaque colonne s'adapte à la taille du texte qu'elle contient, or j'aimerais pouvoir spécifier une largeur déterminée. J'ai beau spécifier une largeur vi l'attribut width, mais le navigateur semble l'ignorer (Aussi bien IE que Firefox)
Je dois donc avoir loupé quelque chose...
Quelqu'un peut-il m'apporter un peu d'aide ??

D'avance, un grand merci!

bonjour...

les tableaux sont faits pour être conçus avec la balise <table> lorsqu'il s'agit de données tabulaires...
pourquoi utiliser des <div> ?

il ne faut pas croire que les <table> sont à bannir totalement.
dans beaucoup de cas la balise <table> est justifiée et nécessaire.

Merci pour ta réponse

C'est très juste, et j'ai effectivement mal illustré mon exemple. Mon objectif est d'éviter la balise <table> dans le cas d'une mise en page organisée en colonnes, pour l'affichage d'un texte en colonnes, etc...

Les tableaux de mise en page, c'est Mal. OK.
Les CSS c'est Bien. OK.

Mais le pire de tout : vouloir "faire du tableau" à l'aide de <div>.

Pourquoi ?

- parce qu'on se retrouve avec autant de <div> imbriqués qu'il y'avait de <td> et de <table> imbriqués. En clair, c'est tout aussi compliqué et inaccessible qu'avant.
- parce que <div> est une balise dépourvue de sémantique (façon de parler), et faite pour regrouper des éléments ayant du sens, ou pour être utilisée lorsqu'aucun autre élément ne correspond.

Bref :
- arrêtons de suivre les modes sans en comprendre vraiment le sens et l'utilité
- utilisons les balises à bon escient et laissez parfois tranquile les pauvres <div>
Modifié par Raphael (17 Jul 2006 - 17:49)

display:table-cell ! display:table-cell ! display: table-cell !

-> []

Ok, merci à vous.

Mais que faire lorsqu'on est face à des données tabulaires, pour lesquelles un formulaire par ligne est souhaité ? Vu qu'il n'est pas valide de faire quelque chose du genre:

<table>
<tr>
  <form ...>
    <td></td>
    <td><input type="submit" /></td>
  </form>
</tr>
</table>

On semble donc obligé de passer par des tableaux imbriqués, ce qui devient vite fastidieux et qui, d'un point de vue purement sémantique, n'a pas l'air tout à fait acceptable. Dans ce cas précis, quelle est selon vous la plus sage décision ?

Merci

Tableaux imbriqués, en effet, du moins le plus souvent : reste à voir quelles sont les contraintes précises sur le contenu permettant éventuellement de gérer les "lignes" autrement. Mais pour cela, il faut avoir le contenu sous la main.

Ce n'est pas un problème (ni pour l'accessibilité, si la linéarisation est correcte et si les éléments d(accessibilité de tableau sont en place, ni pour la "Shémantique" dont je ne sais toujours pas ce que c'est). Après, c'est évidemment un code un peu lourd, mais on fait avec.
Modifié par Laurent Denis (18 Jul 2006 - 10:59)