<main>
  <h1>Table Rows with Different Display Properties</h1>
  <p>
    For this example, individual rows are set to whatever <code>display</code> property you choose, which breaks the entire table structure. To demonstrate, the buttons below converts all but the header rows to whichever style you press.
  </p>
  <p>
    Note that only the first row (of data, not the header row) has ARIA properties set. These properties will retain semantics for all but <code>display: contents</code>, but can do nothing for the layout.
  </p>
  <p>
    <button onclick="ToggleRowDisplay('block',this);">Convert rows to <code>block</code>.</button>
    <button onclick="ToggleRowDisplay('inline',this);">Convert rows to <code>inline</code>.</button>
    <button onclick="ToggleRowDisplay('contents',this);">Convert rows to <code>contents</code>.</button>
    <button onclick="ToggleRowDisplay('table-row',this);">Reset rows to <code>table-row</code>.</button>
  </p>
  <div role="region" aria-labelledby="Cap1" tabindex="0" id="TableContainer">
    <table id="Books" role="table">
      <caption id="Cap1">Books I May or May Not Have Read</caption>
      <thead>
        <tr role="row">
          <th role="columnheader">Author</th>
          <th role="columnheader">Title</th>
          <th role="columnheader">Year</th>
          <th role="columnheader">ISBN-13</th>
          <th role="columnheader">ISBN-10</th>
        </tr>
      </thead>
      <tbody>
        <tr role="row">
          <td role="cell">Miguel De Cervantes</td>
          <td role="cell">The Ingenious Gentleman Don Quixote of La Mancha</td>
          <td role="cell">1605</td>
          <td role="cell">9783125798502</td>
          <td role="cell">3125798507</td>
        </tr>
        <tr>
          <td>Mary Shelley</td>
          <td>Frankenstein; or, The Modern Prometheus</td>
          <td>1818</td>
          <td>9781530278442</td>
          <td>1530278449</td>
        </tr>
        <tr>
          <td>Herman Melville</td>
          <td>Moby-Dick; or, The Whale</td>
          <td>1851</td>
          <td>9781530697908</td>
          <td>1530697905</td>
        </tr>
        <tr>
          <td>Emma Dorothy Eliza Nevitte Southworth</td>
          <td>The Hidden Hand</td>
          <td>1888</td>
          <td>9780813512969</td>
          <td>0813512964</td>
        </tr>
        <tr>
          <td>F. Scott Fitzgerald</td>
          <td>The Great Gatsby</td>
          <td>1925</td>
          <td>9780743273565</td>
          <td>0743273567</td>
        </tr>
        <tr>
          <td>George Orwell</td>
          <td>Nineteen Eighty-Four</td>
          <td>1948</td>
          <td>9780451524935</td>
          <td>0451524934</td>
        </tr>
      </tbody>
    </table>
  </div>
  <p>
    This pen is used in the post <cite><a href="http://adrianroselli.com/2018/05/layout-as-a-clue-to-semantics.html">Layout as a Clue to Semantics</a></cite>.
  </p>
</main>