#### les styles
fieldset {
display:block;
border:2px #999999 groove;
width:75%;
padding:10px;
margin-top:10px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
table {
margin:10px auto 10px auto;
border:3px double #000099;
border-collapse:collapse;
width:75%;
}
th, td {
border:1px solid #000099;
padding:5px;
}
th {
text-align:right;
}
td {
text-align:left;
}
label {
cursor:pointer;
}
#### le code html
<form method="get" action="#">
<fieldset>
<legend>Insertion d'une personne</legend>
<table border="1">
<tr>
<th><label for="nom">Nom</label></th>
<td><input type="text" name="nom" id="nom" /></td>
</tr>
<tr>
<th><label for="prenom">Prénom</label></th>
<td><input type="text" name="prenom" id="prenom" /></td>
</tr>
<tr>
<th><label for="dateNaissance">Date de naissance</label></th>
<td><input type="text" name="dateNaissance" id="dateNaissance" /></td>
</tr>
<tr>
<th>Sexe</th>
<td>
<input type="radio" name="sexe" id="sexeM" value="M" /><label for="sexeM">M</label><br />
<input type="radio" name="sexe" id="sexeF" value="F" /><label for="sexeF">F</label>
</td>
</tr>
</table>
<p><input type="submit" value="Valider" /></p>
</fieldset>
</form>
Nom Prénom Date de naissance Sexe Action
<div class="tableau">
<div class="entete">
<p>
<span class="nom">Nom</span>
<span class="prenom">Prénom</span>
<span class="dateNaissance">Date de naissance</span>
<span class="sexe">Sexe</span>
<span class="action">Action</span>
</p>
</div>
<div class="corps">
<form method="get" action="modifier.php">
<p>
<span class="nom"><input type="text" name="nom" value="" maxlength="" /></span>
<span class="prenom"><input type="text" name="prenom" value="" maxlength="" /></span>
<span class="dateNaissance"><input type="text" name="dateNaissance" value="" maxlength="" /></span>
<span class="sexe">
<input type="radio" name="sexe" id="sexeF_1" value="F" /><label for="sexeF_1">F</label>
<input type="radio" name="sexe" id="sexeM_1" value="M" /><label for="sexeM_1">M</label>
</span>
<span class="action"><input type="hidden" name="idPersonne" value="1" />
<input type="submit" name="modif" value="Modifier" /></span>
</p>
</form>
<form method="get" action="modifier.php">
<p>
<span class="nom"><input type="text" name="nom" value="" maxlength="" /></span>
<span class="prenom"><input type="text" name="prenom" value="" maxlength="" /></span>
<span class="dateNaissance"><input type="text" name="dateNaissance" value="" maxlength="" /></span>
<span class="sexe">
<input type="radio" name="sexe" id="sexeF_2" value="F" /><label for="sexeF_2">F</label>
<input type="radio" name="sexe" id="sexeM_2" value="M" /><label for="sexeM_2">M</label>
</span>
<span class="action"><input type="hidden" name="idPersonne" value="2" />
<input type="submit" name="modif" value="Modifier" /></span>
</p>
</form>
<form method="get" action="modifier.php">
<p>
<span class="nom"><input type="text" name="nom" value="" maxlength="" /></span>
<span class="prenom"><input type="text" name="prenom" value="" maxlength="" /></span>
<span class="dateNaissance"><input type="text" name="dateNaissance" value="" maxlength="" /></span>
<span class="sexe">
<input type="radio" name="sexe" id="sexeF_3" value="F" /><label for="sexeF_3">F</label>
<input type="radio" name="sexe" id="sexeM_3" value="M" /><label for="sexeM_3">M</label>
</span>
<span class="action"><input type="hidden" name="idPersonne" value="3" />
<input type="submit" name="modif" value="Modifier" /></span>
</p>
</form>
<form method="get" action="modifier.php">
<p>
<span class="nom"><input type="text" name="nom" value="" maxlength="" /></span>
<span class="prenom"><input type="text" name="prenom" value="" maxlength="" /></span>
<span class="dateNaissance"><input type="text" name="dateNaissance" value="" maxlength="" /></span>
<span class="sexe">
<input type="radio" name="sexe" id="sexeF_4" value="F" /><label for="sexeF_4">F</label>
<input type="radio" name="sexe" id="sexeM_4" value="M" /><label for="sexeM_4">M</label>
</span>
<span class="action"><input type="hidden" name="idPersonne" value="4" />
<input type="submit" name="modif" value="Modifier" /></span>
</p>
</form>
<form method="get" action="modifier.php">
<p>
<span class="nom"><input type="text" name="nom" value="" maxlength="" /></span>
<span class="prenom"><input type="text" name="prenom" value="" maxlength="" /></span>
<span class="dateNaissance"><input type="text" name="dateNaissance" value="" maxlength="" /></span>
<span class="sexe">
<input type="radio" name="sexe" id="sexeF_5" value="F" /><label for="sexeF_5">F</label>
<input type="radio" name="sexe" id="sexeM_5" value="M" /><label for="sexeM_5">M</label>
</span>
<span class="action"><input type="hidden" name="idPersonne" value="5" />
<input type="submit" name="modif" value="Modifier" /></span>
</p>
</form>
<span class="clear"></span>
</div>
</div>
Nom Prénom Date de naissance Sexe Action
div.tableau {
border:1px solid black;
}
.corps form span, .entete span {
border:1px solid red;
}
Nom Prénom Date de naissance Sexe Action
div.tableau {
border:1px solid black;
}
.corps form span, .entete span {
display:block;
float:left;
width:100px;
height:50px;
overflow:auto;
border:1px solid red;
}
.corps form {
clear:both;
}
Nom Prénom Date de naissance Sexe Action
div.tableau {
border:1px solid black;
}
.corps form span, .entete span {
display:block;
float:left;
width:100px;
height:50px;
overflow:auto;
border:1px solid red;
}
.corps form {
clear:both;
}
.clear {
display:block;
clear:both;
visibility:hidden;
}