Forms within tables

Sometimes it is necessary to have form controls within tables. And while tables provide their own labelling mechanism, it is important that each and every control still has its dedicated label.

Forms in tables are rather rare, but they can be a necessity. Be sure though you are using tables not simply for layout purposes - the days of layout tables are long gone. Forms in tables only make sense if they are handling data that has a tabular structure itself.

It is important that the table itself is marked up properly using table headers <th> (see General good table example). This allows navigating the table (and the contained form controls) using desktop screen readers' table navigation: simply press Ctrl + Alt + Up/Down/Left/Right when inside a table (see How to handle tables).

But what about navigation in focus mode (using the Tab key)?

Table headers instead of labels?

As we know from from General good form example, each and every form control ought to have its own label.

But when placing form controls into a table, one could argue that proper table headers should be a suitable substitute for "real" labels. Technically speaking, this sounds reasonable.

So take a look at the following example and try to navigate it using the Tab key:

Form controls without labels in a table

Show HTML code

Show CSS code

<form>
  <table>
    <thead>
      <tr>
        <th>
          Delivery provider
        </th>
        <th>
          Insurance
        </th>
        <th>
          Comment
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          <input id="dhl" name="provider" type="radio" /><label for="dhl">DHL</label>
        </th>
        <td>
          <input type="checkbox" />
        </td>
        <td>
          <textarea></textarea>
        </td>
      </tr>
      <tr>
        <th>
          <input id="ups" name="provider" type="radio" /><label for="ups">UPS</label>
        </th>
        <td>
          <input type="checkbox" />
        </td>
        <td>
          <textarea></textarea>
        </td>
      </tr>
      <tr>
        <th>
          <input id="post" name="provider" type="radio" /><label for="post">Post</label>
        </th>
        <td>
          <input type="checkbox" />
        </td>
        <td>
          <textarea></textarea>
        </td>
      </tr>
    </tbody>
  </table>
</form>

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid;
}

Firefox announces both the table's column and row headers like a charm in focus mode. For example, when focusing the "insurance" checkbox in the row "DHL":

Insurance. DHL. checkbox not checked.

But Internet Explorer does only announce the row headers:

DHL. checkbox not checked.

What a bummer.

No, real labels!

We can fix this by simply adding real <label> elements for each form control, then hide them visually (see Hiding elements visually by moving them off-screen).

Form controls with labels in a table

Show HTML code

Show CSS code

✔ (pass) ,

✔ (pass)

<form>
  <table>
    <thead>
      <tr>
        <th>
          Delivery provider
        </th>
        <th>
          Insurance
        </th>
        <th>
          Comment
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          <input id="dhl" name="provider" type="radio" /><label for="dhl">DHL</label>
        </th>
        <td>
          <input id="dhl_insurance" type="checkbox" /><label class="visually-hidden" for="dhl_insurance">Insurance</label>
        </td>
        <td>
          <label class="visually-hidden" for="dhl_comment">Comment</label><textarea id="dhl_comment"></textarea>
        </td>
      </tr>
      <tr>
        <th>
          <input id="ups" name="provider" type="radio" /><label for="ups">UPS</label>
        </th>
        <td>
          <input id="ups_insurance" type="checkbox" /><label class="visually-hidden" for="ups_insurance">Insurance</label>
        </td>
        <td>
          <label class="visually-hidden" for="ups_comment">Comment</label><textarea id="ups_comment"></textarea>
        </td>
      </tr>
      <tr>
        <th>
          <input id="post" name="provider" type="radio" /><label for="post">Post</label>
        </th>
        <td>
          <input id="post_insurance" type="checkbox" /><label class="visually-hidden" for="post_insurance">Insurance</label>
        </td>
        <td>
          <label class="visually-hidden" for="post_comment">Comment</label><textarea id="post_comment"></textarea>
        </td>
      </tr>
    </tbody>
  </table>
</form>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  left: -10000px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid;
}

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-5-14
NVDA 2018.1 + FF Quantum 59.0.2	✔ (pass) pass	-	2018-5-8
NVDA 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
NVDA 2023.1 + Edge	✔ (pass) pass	-	2023-7-13
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-5-7
JAWS 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
JAWS 2023.23 + Edge	✔ (pass) pass	-	2023-7-13

This makes the whole thing work in both Firefox and Internet Explorer, at least more or less: JAWS seems to have some troubles announcing the row headers in focus mode. But all in all, it is acceptable.

Optional: alternative using ARIA?

As we know from Placing non-interactive content between form controls, elements can be associated to a form control by using aria-describedby. So instead of using real <label> elements, we could try to associate the table headers with the form controls.

Form controls without labels in a table, fixed with ARIA

Show HTML code

Show CSS code

✔ (pass) ,

✔ (pass)

<form>
  <table>
    <thead>
      <tr>
        <th>
          Delivery provider
        </th>
        <th id="insurance_header">
          Insurance
        </th>
        <th id="comment_header">
          Comment
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          <input id="dhl" name="provider" type="radio" /><label for="dhl">DHL</label>
        </th>
        <td>
          <input aria-describedby="insurance_header" type="checkbox" />
        </td>
        <td>
          <textarea aria-describedby="comment_header"></textarea>
        </td>
      </tr>
      <tr>
        <th>
          <input id="ups" name="provider" type="radio" /><label for="ups">UPS</label>
        </th>
        <td>
          <input aria-describedby="insurance_header" type="checkbox" />
        </td>
        <td>
          <textarea aria-describedby="comment_header"></textarea>
        </td>
      </tr>
      <tr>
        <th>
          <input id="post" name="provider" type="radio" /><label for="post">Post</label>
        </th>
        <td>
          <input aria-describedby="insurance_header" type="checkbox" />
        </td>
        <td>
          <textarea aria-describedby="comment_header"></textarea>
        </td>
      </tr>
    </tbody>
  </table>
</form>

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid;
}

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-5-14
NVDA 2018.1 + FF Quantum 59.0.2	✔ (pass) pass	-	2018-5-8
NVDA 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
NVDA 2023.1 + Edge	✔ (pass) pass	-	2023-7-13
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-5-7
JAWS 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
JAWS 2023.23 + Edge	✔ (pass) pass	-	2023-7-13

But like in the very first example, JAWS seems to only announce the column headers. Also, this clearly violates our rule that each and every input needs its dedicated label.

So we can barely call this a real improvement, and we recommend to just use plain labels (without any ARIA).

You are here:

Forms within tables

Table headers instead of labels?

No, real labels!

Optional: alternative using ARIA?

Previous/next navigation