Data display

Table and accordion

a table with a row marker and an accordion that eases open.

new

Examples

Table

row marks itself

Name	Owner
Atlas	Team A
Nova	Team B
Orion	Team A

<table class="pt-tbl">
  <thead>
    <tr>
      <th>Name</th>
      <th>Owner</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Atlas</td>
      <td>Team A</td>
    </tr>
    <tr>
      <td>Nova</td>
      <td>Team B</td>
    </tr>
    <tr>
      <td>Orion</td>
      <td>Team A</td>
    </tr>
  </tbody>
</table>

Accordion

height eases open

What is included

Every part, one stylesheet.

How it is built

Plain html and css.

<div class="pt-acc">
  <details open>
    <summary>What is included</summary>
    <div class="pt-body">
      <div>
        <p>Every part, one stylesheet.</p>
      </div>
    </div>
  </details>
  <details>
    <summary>How it is built</summary>
    <div class="pt-body">
      <div>
        <p>Plain html and css.</p>
      </div>
    </div>
  </details>
</div>