title: Horizontal checkbox layout with label underneath
body: <p>I just started coding a small page for myself after not doing any web design for a couple of years. As I now learned, laying out the page with tables is not state-of-the-art anymore (not sure if it ever really was).</p>
  
  <p>Now I am trying to layout my page with CSS but couldn't find anything on:</p>
  
  <ol>
  <li><p>How to align 7 checkboxes horizontally and put the corresponding label centered below the checkboxes?</p></li>
  <li><p>How to align 2 selects horizontally and put the corresponding label centered above the selects?</p></li>
  </ol>
  
  <p>The initial pure table-code was the following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.form fieldset {
    display: table;
    border: 1px solid #c6c7cc;
    border-radius: 5px;
  }
  .form label {
    display: table-cell;
    text-align: right;
    padding: 5px;
  }
  .form input,
  .form select {
    display: table-cell;
  }
  .form .cssRow {
    display: table-row;
  }
  .form .submit {
    display: table-cell;
    caption-side: bottom;
    display: table-caption;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td align="right"&gt;Name&lt;/td&gt;
      &lt;td align="left"&gt;
        &lt;input name="name" type="text"&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td align="right"&gt;Day(s) of week&lt;/td&gt;
      &lt;td align="center"&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;td align="center"&gt;
              &lt;input type="checkbox" name="day[]" value="mo" checked&gt;
            &lt;/td&gt;
            &lt;td align="center"&gt;
              &lt;input type="checkbox" name="day[]" value="tu" checked&gt;
            &lt;/td&gt;
            &lt;td align="center"&gt;
              &lt;input type="checkbox" name="day[]" value="we" checked&gt;
            &lt;/td&gt;
            &lt;td align="center"&gt;
              &lt;input type="checkbox" name="day[]" value="th" checked&gt;
            &lt;/td&gt;
            &lt;td align="center"&gt;
              &lt;input type="checkbox" name="day[]" value="fr" checked&gt;
            &lt;/td&gt;
            &lt;td align="center"&gt;
              &lt;input type="checkbox" name="day[]" value="sa" checked&gt;
            &lt;/td&gt;
            &lt;td align="center"&gt;
              &lt;input type="checkbox" name="day[]" value="su" checked&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td align="center"&gt;Mo&lt;/td&gt;
            &lt;td align="center"&gt;Tu&lt;/td&gt;
            &lt;td align="center"&gt;We&lt;/td&gt;
            &lt;td align="center"&gt;Th&lt;/td&gt;
            &lt;td align="center"&gt;Fr&lt;/td&gt;
            &lt;td align="center"&gt;Sa&lt;/td&gt;
            &lt;td align="center"&gt;Su&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td align="right"&gt;Validity&lt;/td&gt;
      &lt;td align="center"&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;td&gt;Valid from&lt;/td&gt;
            &lt;td&gt;Valid to&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;select&gt;
                &lt;option&gt;January&lt;/option&gt;
                &lt;option&gt;February&lt;/option&gt;
              &lt;/select&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;select&gt;
                &lt;option&gt;January&lt;/option&gt;
                &lt;option&gt;February&lt;/option&gt;
              &lt;/select&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td align="center" colspan="2"&gt;
        &lt;input type="submit" name="submit" value="Refresh"&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  My CSS attempt so far looks like this:
  
  &lt;div class="form"&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Search&lt;/legend&gt;
      &lt;div class="cssRow"&gt;
        &lt;label for="name"&gt;Name&lt;/label&gt;
        &lt;input name="name" type="text" size="30" maxlength="30"&gt;
      &lt;/div&gt;
      &lt;div class="cssRow"&gt;
        &lt;label for="day[]"&gt;Day(s) of week&lt;/label&gt;
        &lt;input name="day[]" type="text" value="ToDo" size="30" disabled&gt;
      &lt;/div&gt;
      &lt;div class="cssRow"&gt;
        &lt;label&gt;Validity&lt;/label&gt;
        &lt;input type="text" value="ToDo" size="30" disabled&gt;
      &lt;/div&gt;
      &lt;div class="submit"&gt;
        &lt;input type="submit" name="submit" value="Suchen"&gt;
      &lt;/div&gt;
    &lt;/fieldset&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>To illustrate my problem, I created the following JSFiddle: <a href="http://jsfiddle.net/c9a7ezyk/" rel="nofollow">http://jsfiddle.net/c9a7ezyk/</a></p>
  
  <p>Any suggestions are welcome, although I prefer a simple solution, as I am just (re)learning HTML and CSS.</p>