<h1>Demo: Uniquely Labeling Fields in Table</h1>

  <caption>Books I May or May Not Have Read</caption>
    <th id="ColFlag">Flag</th>
    <th id="ColAuthor">Author</th>
    <th id="ColTitle">Title</th>
    <th id="ColYear">Year</th>
    <th id="ColISBN13">ISBN-13</th>
    <th id="ColClaimed">Claimed by</th>
    <th id="ColRemove">Remove</th>
    <th scope="row" id="Row01">1</th>
    <td><input type="checkbox" id="f01" aria-labelledby="Row01 ColFlag"></td>
    <td>Miguel De Cervantes</td>
    <td>The Ingenious Gentleman Don Quixote of La Mancha</td>
    <td><input type="text" id="c01" aria-labelledby="Row01 ColClaimed"></td>
    <td><button type="button" id="b01" aria-labelledby="b01 Row01">Remove</button></td>
    <th scope="row" id="Row02">2</th>
    <td><input type="checkbox" id="f02" aria-labelledby="Row02 ColFlag"></td>
    <td>Mary Shelley</td>
    <td>Frankenstein; or, The Modern Prometheus</td>
    <td><input type="text" id="c02" aria-labelledby="Row02 ColClaimed"></td>
    <td><button type="button" id="b02" aria-labelledby="b02 Row02">Remove</button></td>
    <th scope="row" id="Row03">3</th>
    <td><input type="checkbox" id="f03" aria-labelledby="Row03 ColFlag"></td>
    <td>Herman Melville</td>
    <td>Moby-Dick; or, The Whale</td>
    <td><input type="text" id="c03" aria-labelledby="Row03 ColClaimed"></td>
    <td><button type="button" id="b03" aria-labelledby="b03 Row03">Remove</button></td>
    <th scope="row" id="Row04">4</th>
    <td><input type="checkbox" id="f04" aria-labelledby="Row04 ColFlag"></td>
    <td>Emma Dorothy Eliza Nevitte Southworth</td>
    <td>The Hidden Hand</td>
    <td><input type="text" id="c04" aria-labelledby="Row04 ColClaimed"></td>
    <td><button type="button" id="b04" aria-labelledby="b04 Row04">Remove</button></td>
    <th scope="row" id="Row05">5</th>
    <td><input type="checkbox" id="f05" aria-labelledby="Row05 ColFlag"></td>
    <td>F. Scott Fitzgerald</td>
    <td>The Great Gatsby</td>
    <td><input type="text" id="c05" aria-labelledby="Row05 ColClaimed"></td>
    <td><button type="button" id="b05" aria-labelledby="b05 Row05">Remove</button></td>
    <th scope="row" id="Row06">6</th>
    <td><input type="checkbox" id="f06" aria-labelledby="Row06 ColFlag"></td>
    <td>George Orwell</td>
    <td>Nineteen Eighty-Four</td>
    <td><input type="text" id="c06" aria-labelledby="Row06 ColClaimed"></td>
    <td><button type="button" id="b06" aria-labelledby="b06 Row06">Remove</button></td>

  This is used in my blog post <a href="http://adrianroselli.com/2019/05/uniquely-labeling-fields-in-a-table.html">Uniquely Labeling Fields in a Table</a>.
body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.4;
  color: #333;
  background-color: #eee;

table {
  margin: 1em 0;
  border-collapse: collapse;
  border: 0.1em solid rgba(0, 0, 0, 0.1);

caption {
  text-align: left;
  font-style: italic;
  padding: 0.25em 0.5em 0.5em 0.5em;

td {
  padding: 0.25em 0.5em 0.25em 1em;
  vertical-align: text-top;
  text-align: left;
  text-indent: -0.5em;

th {
  vertical-align: bottom;
  background-color: rgba(0, 0, 0, 0.1);

th[scope=row] {
  vertical-align: top;

tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);

tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.05);

td:nth-of-type(3) {
  font-style: italic;

td:nth-of-type(4) {
  text-align: right;

table td > input[type=text], #Sample + table td > button {
  font: inherit;
  border: .1em solid #666;
  width: 7em;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.