html tableau détails apparition sous ligne code example

Example: tableau html simple et complexe

<style>
      td,th{border:1px black solid; padding: 15px; text-align:center;}

table{border-collapse:collapse ;margin: 30px;}

</style>




	<!--tableau simple-->
        <table>
          <tr>
            <th> Prénoms</th>
            <th>Noms</th>
          </tr>
             <tr>
               <td>Pierre</td>
               <td>Martinet</td>
            
            </tr>
        </table>
        
              <!-- tableau complexe-->
        
          <table>
            
            <thead>
              <tr>
                <th>Prénoms</th>
                <th>Noms</th>
                <th>Célibataire</th>
                <th>Couple</th>
                
              </tr>
            </thead>
            
            <tbody>
              <tr>
                <td>Pierre</td>
                <td>jardinier</td>
                <td>oui</td>
                <td>non</td>
              </tr>
              <tr>
                <td>Clarisse</td>
                <td>vendeuse</td>
                <td>non</td>
                <td>oui</td>
              </tr>
               <tr>
                <td>Bernard</td>
                <td>Politicien</td>
                <td>??</td>
                <td>??</td>
              </tr>
            </tbody>
            
            <tfoot>
               <th>Prénom</th>
               <th>Profession</th>
               <th>Célibataire</th>
              <th>Couple</th>
            </tfoot>
            
           </table>

	


        </body>

Tags:

Html Example