UI MarCom 3

Table Stable Dark theme

Tables present data sets in a comparable, readable and scannable way.

Basic table

Lorem ipsumdolor sitamet
consectetur adipisicingelit sed doirure dolor
reprehenderitvoluptate velit essesunt in culpa
consequatexercitation ullamcoincididunt ut labore
Lorem ipsumdolor sitamet
consectetur adipisicingelit sed doirure dolor
<div class="overflow-x-auto">
  <table width="100%" role="grid" class="table ">
    <thead>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum</td>
        <td>dolor sit</td>
        <td>amet</td>
      </tr>
      <tr>
        <td>consectetur adipisicing</td>
        <td>elit sed do</td>
        <td>irure dolor</td>
      </tr>
      <tr>
        <td>reprehenderit</td>
        <td>voluptate velit esse</td>
        <td>sunt in culpa</td>
      </tr>
      <tr>
        <td>consequat</td>
        <td>exercitation ullamco</td>
        <td>incididunt ut labore</td>
      </tr>
      <tr>
        <td>Lorem ipsum</td>
        <td>dolor sit</td>
        <td>amet</td>
      </tr>
      <tr>
        <td>consectetur adipisicing</td>
        <td>elit sed do</td>
        <td>irure dolor</td>
      </tr>
    </tbody>
  </table>
</div>

Table with head

Lorem ipsumdolor sitamet
Lorem ipsumdolor sitamet
consectetur adipisicing<a href="">elit sed do</a>irure dolor
reprehenderitvoluptate velit essesunt in culpa
consequatexercitation ullamcoincididunt ut labore
Lorem ipsumdolor sitamet
consectetur adipisicingelit sed doirure dolor
<div class="overflow-x-auto">
  <table width="100%" role="grid" class="table ">
    <thead>
      <tr role="row">
        <th scope="col" role="columnheader" aria-sort="none">Lorem ipsum</th>
        <th scope="col" role="columnheader" aria-sort="none">dolor sit</th>
        <th scope="col" role="columnheader" aria-sort="none">amet</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum</td>
        <td>dolor sit</td>
        <td>amet</td>
      </tr>
      <tr>
        <td>consectetur adipisicing</td>
        <td>&lt;a href&#x3D;&quot;&quot;&gt;elit sed do&lt;/a&gt;</td>
        <td>irure dolor</td>
      </tr>
      <tr>
        <td>reprehenderit</td>
        <td>voluptate velit esse</td>
        <td>sunt in culpa</td>
      </tr>
      <tr>
        <td>consequat</td>
        <td>exercitation ullamco</td>
        <td>incididunt ut labore</td>
      </tr>
      <tr>
        <td>Lorem ipsum</td>
        <td>dolor sit</td>
        <td>amet</td>
      </tr>
      <tr>
        <td>consectetur adipisicing</td>
        <td>elit sed do</td>
        <td>irure dolor</td>
      </tr>
    </tbody>
  </table>
</div>

Table on black background

Lorem ipsumdolor sitamet
Lorem ipsumdolor sitamet
consectetur adipisicing<a href="">elit sed do</a>irure dolor
reprehenderitvoluptate velit essesunt in culpa
consequatexercitation ullamcoincididunt ut labore
Lorem ipsumdolor sitamet
consectetur adipisicingelit sed doirure dolor
<div class="overflow-x-auto">
  <table width="100%" role="grid" class="table dark">
    <thead>
      <tr role="row">
        <th scope="col" role="columnheader" aria-sort="none">Lorem ipsum</th>
        <th scope="col" role="columnheader" aria-sort="none">dolor sit</th>
        <th scope="col" role="columnheader" aria-sort="none">amet</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum</td>
        <td>dolor sit</td>
        <td>amet</td>
      </tr>
      <tr>
        <td>consectetur adipisicing</td>
        <td>&lt;a href&#x3D;&quot;&quot;&gt;elit sed do&lt;/a&gt;</td>
        <td>irure dolor</td>
      </tr>
      <tr>
        <td>reprehenderit</td>
        <td>voluptate velit esse</td>
        <td>sunt in culpa</td>
      </tr>
      <tr>
        <td>consequat</td>
        <td>exercitation ullamco</td>
        <td>incididunt ut labore</td>
      </tr>
      <tr>
        <td>Lorem ipsum</td>
        <td>dolor sit</td>
        <td>amet</td>
      </tr>
      <tr>
        <td>consectetur adipisicing</td>
        <td>elit sed do</td>
        <td>irure dolor</td>
      </tr>
    </tbody>
  </table>
</div>