Fieldsts like boxes

by Manuel Souto Pico

HTML

<!DOCTYPE html>
<html>
<body>

<form>
<!-- box 1 -->
<fieldset style="margin:auto; text-align:center;">
  <fieldset>
    <legend>Top box: logo</legend>
  </fieldset>
  <fieldset>
    <legend>Middle box 1: Search fields</legend>
      <fieldset>
        <legend>Personalia:</legend>
        <div style="display:block"><select></select>N<input type="text"><input type="submit"></div>
        <div style="display:block"><select></select>E<input type="text"></div>
        <div style="display:block"><select></select>D<input type="text"></div>
       </fieldset>
  </fieldset>
  <fieldset>
    <legend>Middle box 2: Options</legend>
    <!-- box 2 left -->
      <fieldset style="display:inline">
      <legend>Box 2 left</legend>
       <fieldset>
        <legend>Personalia:</legend>
        <span style="display:inline"><select></select></span>
        <span style="display:inline"><select></select></span>
        <span style="display:inline"><select></select></span>
       </fieldset>
      </fieldset>

      <!-- box 2 right -->
      <fieldset style="display:inline">
      <legend>Box 2 right</legend>
       <fieldset>
        <legend>Personalia:</legend>
        <span style="display:block">Name</span>
        <span style="display:block">Email<input type="checkbox"/><input type="checkbox"/></span>
        <span style="display:block">Date <input type="checkbox"/><input type="checkbox"/></span>
       </fieldset>
      </fieldset>

  </fieldset>
  <fieldset>
    <legend>Bottom box: Results</legend>
   <div  style="text-align:center;">
    <table>
    <tr>
      <td>blabla</td>
      <td>blabla</td>
      <td>blabla</td>
    </tr>
    <tr>
      <td>blabla</td>
      <td>blabla</td>
      <td>blabla</td>
    </tr>
    
    </table>
   </div>
  </fieldset>
</fieldset>
</form>

</body>
</html>

CSS

table, tr, td {
   border: 1px solid black; 
   border-collapse: collapse;
   
}

table {
  width:100%;
}