[CSS] Remplacer un tableau par des div et css

Bonjour, je sais, que pour niveau accessibilité, l'utilisation des tableaux est a éviter. Je sais comment remplacer les tableaux à plusieurs colonnes en div, mais seulement si le tableau possède toujours le même nombre de colonnes sur chaque ligne.

je voudrais savoir comment remplacer ceci par des div :

Code:

---

1 2 3 4 5 6 7 8 9 10

<table> <tr> <td>Ligne 1, premiere case</td> <td>Ligne 2, deuxieme case</td> </tr> <tr> <td colspan="2">Ligne 2 qui englobe 2 cases</td> </tr> </table>

---

Merci de vos réponses.

Une précision, je ne connais pas la hauteur de mes éléments ...

Salut,

Utilise float : http://pbnaigeon.developpez.com/tuto...tions-de-base/

Citation:

---

Envoyé par franculo_caoulene

Salut,

Utilise float : http://pbnaigeon.developpez.com/tuto...tions-de-base/

---

J'ai très bien compris le fonctionnement des floats... mais regarde cette exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<div style="float:left;background-color: red"> premier truc </div> <div style="background-color: yellow"> second truc <div> toto est ici </div> </div> <div style="display:block; background-color: green"> troisieme truc </div>

---

Je voudrais que le div de couleur rouge ait la même hauteur que le jaune.
Et inversement si le rouge a plus de données que le jaune, que la hauteur s'adapte en fonction des 2... comme un tableau en fait

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<div> <div style="clear:both"> <div style="float:left;background-color: red; width:300px;"> premier truc </div> <div style="background-color: yellow; margin-left:300px;"> second truc <div> toto est ici </div> </div> </div> <div style="display:block; background-color: green"> troisieme truc </div> </div>

---

voila le pb, le cadre rouge ne prend pas toute la hauteur de gauche, chose que je voudrais.

En général on fait ça par un moyen détourné. Si les dimensions horizontales sont définies, utilise un conteneur, dans lequel il y aura les <div>, qui aura pour background une image de 1px de haut qui se répètera sur toute la hauteur et qui retournera la mise en forme souhaitée.