faire des tableaux sans <table><tr><td>

**bigs3232** · 08/01/2012, 20h31

bonjour
j'aimerais avoir celà comme résultat

Code :

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

1
2
3
 
champ1	:1
champ2	:2

Pour faire des tableaux ,Je ne veux pas utiliser <table><tr><td>.
car trop long et lourd à gérer .
Connaissez d'autres fàçon de coder.Pour l'instant j'utilise ce code ci-dessous
merci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<ul style="list-style-type: none;" ;="">
<li style="float: left; width: 100px;">champ1</li>
<li style="float: left;">:</li>
<li style="float: left; width: 100px;">1</li>
<br>
<li style="float: left; width: 100px;">champ2</li>
<li style="float: left;">:</li>
<li style="float: left; width: 100px;">2</li>
<br>
</ul>

**thelvin** · 08/01/2012, 22h20

Pour ce genre de choses ce serait une definition list :

Code :

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

1
2
3
4
5
6
<dl>
  <dt>champ1</dt>
  <dd>: 1</dd>
  <dt>champ2</dt>
  <dd>: 2</dd>
</dl>

Je mets les : dans les <dd> et pas les <dt> puisque ça a l'air d'être ce que tu veux au rendu, mais c'est un style bizarre.

Pour la stylisation demandée, utiliser le CSS suivant :

Code css :

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

1
2
3
4
5
6
7
8
9
/* On a besoin de styliser que les dt, pour les autres le défaut suffit */
dt {
  /* faire en sorte que le dd flotte à sa droite */
  float: left;
  /* faire en sorte d'aller à la ligne après le précédent dt */
  clear: left;
  /* avoir une taille mini */
  min-width: 5em;
}