Discussion :

[irenee]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

[franculo_caoulene]

Salut,

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

[irenee]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[franculo_caoulene]

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.