Insertion d'une personne
Sexe

#### 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;
}