Alignement checkbox et largeur de colonne

Dans le cas de ce formulaire, comme puis je définir mes largeurs de colonnes indépendamment et aligner mes checkbox sur leur texte "je participe" ?

Merci par avance pour votre aide

Le CSS :

#tableau table { 
	border: none ; 
		}
#tableau th {
	border: thin solid #6495ed;
		}
#tableau td {
	border: thin solid #6495ed;
	vertical-align: middle;
		}
#tableau tr {
	height: 15px;	
		}
.sujet {
	color: #369829;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
		}
.horaires {
	color: #990000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
		}
.inscription {
	font-size: 12px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
			}

Le HTML

<div id="tableau">
<table align="center" border="1" width="679"> 
<tr> <th>Horaires</th> <th>Sujet</th> <th>Inscription</th></tr> 
<tr> <td class="horaires">10h00 - 11h30 </td> 
<td class="sujet">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac tortor mauris.</td> 
<td><span class="inscription">Je participe
    <input name="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac tortor mauris." type="checkbox" value="OUI" />
</span></span></td> 
</tr> 
  <td rowspan="3"><span class="sujet ">Cras congue velit sit amet est hendrerit</span></td>
  <td><span class="sujet"><span class="horaires">10h00 :</span> Nam venenatis felis ac sem sodales id luctus</span></td>
  <td><span class="inscription">Je participe
      <input name="Nam venenatis felis ac sem sodales id luctus" type="checkbox" value="OUI" />
  </span></td>
</tr>
<tr>
  <td><span class="sujet"><span class="horaires">14h30 :</span>  Praesent ac nunc massa</span></td>
  <td><span class="inscription">Je participe
      <input name="Praesent ac nunc massa " type="checkbox" value="OUI" />
  </span></td>
</tr>
<tr>
  <td><span class="sujet"><span class="horaires">16h00 :</span> Proin non ligula non magna malesuada varius</span></td>
  <td><span class="inscription">Je participe
      <input name="Proin non ligula non magna malesuada varius" type="checkbox" value="OUI" />
  </span></td>
</table>
</div>

Modifié par kawaz (18 Aug 2010 - 15:52)

Bonjour,

Tu peux refuser le passage à la ligne du contenu de tes cellules de classe "inscription" grâce à la proprité "white-space : nowrap".

Mais je pense que ce lien pourrait beaucoup t'aider dans l'élaboration d'un tableau :
Elements Col et colgroup, sur le site du w3c
Modifié par Nigel (21 Aug 2010 - 15:15)

Tu trouveras peut-être un réponce ici, c'est une page qui regroupe pleins de css pour des formulaires.
Modifié par elkastor (25 Aug 2010 - 22:06)

Salut @tous

Eh bien merci elkastor pour le lien.
C'est toujours une question délicate concernant les formulaires en CSS.

++

Hello kawaz et bienvenue,

sans m'étendre sur ton code il y a tout de même un point important : pour des questions d'accessibilité essentiellement il faut associer chaque champ d'un formulaire à un élément LABEL (qui est fait pour ça) et pas à un SPAN (cf. cette astuce et plus généralement http://openweb.eu.org/articles/formulaire_accessible ).

Au passage ton tableau n'est pas très clair : l'entête de la première colonne parle des horaires alors qu'à part pour la première ligne cette information se trouve à chaque fois dans la colonne sujet. Voir http://www.pompage.net/pompe/autableau/
Modifié par Heyoan (25 Aug 2010 - 23:56)

Bonjour,

Je n'ai pas vraiment ce que je voulais, mais j'ai appliqué un "text-align: center;" sur "inscription" et cela a passé ma case a cocher à la ligne et centré en dessous.

Merci pour les remarques Heyoan je vais appliquer l'élément LABEL à mes formulaires et pour le "sujet" c'est une mauvaise manip à force de faire des essais

Merci pour vos liens !