• Typography
  • Buttons
  • Inputs
  • Controls
  • Navigation
  • Notifications
  • Boxes
  • Tables
  • Icons
  • Media
  • Components
    • Generic
    • Showcase
    • View the code

      Classic Table

      Classic Table
      Col1 Header Col2 Header Col3 Header Col4 Header Col5 Header
      R1C1 R1C2 R1C3 R1C4 R1C5
      R2C1 R2C2 R2C3 R2C4 R2C5
      R3C1 R3C2 R3C3 R3C4 R3C5
      R4C1 R4C2 R4C3 R4C4 R4C5
      R5C1 R5C2 R5C3 R5C4 R5C5
      Col1 Footer Col2 Footer Col3 Footer Col4 Footer Col5 Footer
       
      <table class="legacy-table">
          <caption>Classic Table</caption>
          <thead>
              <tr>
                  <th>Col1 Header</th>
                  <th>Col2 Header</th>
                  <th>Col3 Header</th>
                  <th>Col4 Header</th>
                  <th>Col5 Header</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>R1C1</td>
                  <td>R1C2</td>
                  <td>R1C3</td>
                  <td>R1C4</td>
                  <td>R1C5</td>
              </tr>
              <tr>
                  <td>R2C1</td>
                  <td>R2C2</td>
                  <td>R2C3</td>
                  <td>R2C4</td>
                  <td>R2C5</td>
              </tr>
              <tr>
                  <td>R3C1</td>
                  <td>R3C2</td>
                  <td>R3C3</td>
                  <td>R3C4</td>
                  <td>R3C5</td>
              </tr>
              <tr>
                  <td>R4C1</td>
                  <td>R4C2</td>
                  <td>R4C3</td>
                  <td>R4C4</td>
                  <td>R4C5</td>
              </tr>
              <tr>
                  <td>R5C1</td>
                  <td>R5C2</td>
                  <td>R5C3</td>
                  <td>R5C4</td>
                  <td>R5C5</td>
              </tr>
          </tbody>
          <tfoot>
              <tr>
                  <td>Col1 Footer</td>
                  <td>Col2 Footer</td>
                  <td>Col3 Footer</td>
                  <td>Col4 Footer</td>
                  <td>Col5 Footer</td>
              </tr>
          </tfoot>
      </table>
    • View the code
      Employees
      Managers Programmers Designers Testers
      Johnny Katie Michael Bob
      Billy Jake Roland Monica
      Desmond Rosalie Stella Patricia
      Kevin Eugene Gina Elena
       
      <table class="legacy-table">
          <caption>Employees</caption>
          <thead>
              <tr>
                  <th>Managers</th>
                  <th>Programmers</th>
                  <th>Designers</th>
                  <th>Testers</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>Johnny</td>
                  <td>Katie</td>
                  <td>Michael</td>
                  <td>Bob</td>
              </tr>
              <tr>
                  <td>Billy</td>
                  <td>Jake</td>
                  <td>Roland</td>
                  <td>Monica</td>
              </tr>
              <tr>
                  <td>Desmond</td>
                  <td>Rosalie</td>
                  <td>Stella</td>
                  <td>Patricia</td>
              </tr>
              <tr>
                  <td>Kevin</td>
                  <td>Eugene</td>
                  <td>Gina</td>
                  <td>Elena</td>
              </tr>
          </tbody>
      </table>
  • View the code

    Classic Centered Table with Stripes

    Classic Centered Table with Stripes
    Col1 Header Col2 Header Col3 Header Col4 Header Col5 Header
    R1C1 R1C2 R1C3 R1C4 R1C5
    R2C1 R2C2 R2C3 R2C4 R2C5
    R3C1 R3C2 R3C3 R3C4 R3C5
    R4C1 R4C2 R4C3 R4C4 R4C5
    R5C1 R5C2 R5C3 R5C4 R5C5
    Col1 Footer Col2 Footer Col3 Footer Col4 Footer Col5 Footer
     
    <table class="legacy-table center stripes">
        <caption>Classic Centered Table with Stripes</caption>
        <thead>
            <tr>
                <th>Col1 Header</th>
                <th>Col2 Header</th>
                <th>Col3 Header</th>
                <th>Col4 Header</th>
                <th>Col5 Header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>R1C1</td>
                <td>R1C2</td>
                <td>R1C3</td>
                <td>R1C4</td>
                <td>R1C5</td>
            </tr>
            <tr>
                <td>R2C1</td>
                <td>R2C2</td>
                <td>R2C3</td>
                <td>R2C4</td>
                <td>R2C5</td>
            </tr>
            <tr>
                <td>R3C1</td>
                <td>R3C2</td>
                <td>R3C3</td>
                <td>R3C4</td>
                <td>R3C5</td>
            </tr>
            <tr>
                <td>R4C1</td>
                <td>R4C2</td>
                <td>R4C3</td>
                <td>R4C4</td>
                <td>R4C5</td>
            </tr>
            <tr>
                <td>R5C1</td>
                <td>R5C2</td>
                <td>R5C3</td>
                <td>R5C4</td>
                <td>R5C5</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Col1 Footer</td>
                <td>Col2 Footer</td>
                <td>Col3 Footer</td>
                <td>Col4 Footer</td>
                <td>Col5 Footer</td>
            </tr>
        </tfoot>;
    </table>
  • View the code

    Classic Condensed Table

    Classic Condensed Table
    Col1 Header Col2 Header Col3 Header Col4 Header Col5 Header
    R1C1 R1C2 R1C3 R1C4 R1C5
    R2C1 R2C2 R2C3 R2C4 R2C5
    R3C1 R3C2 R3C3 R3C4 R3C5
    R4C1 R4C2 R4C3 R4C4 R4C5
    R5C1 R5C2 R5C3 R5C4 R5C5
    Col1 Footer Col2 Footer Col3 Footer Col4 Footer Col5 Footer
     
    <table class="legacy-table condensed">
        <caption>Classic Condensed Table</caption>
        <thead>
            <tr>
                <th>Col1 Header</th>
                <th>Col2 Header</th>
                <th>Col3 Header</th>
                <th>Col4 Header</th>
                <th>Col5 Header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>R1C1</td>
                <td>R1C2</td>
                <td>R1C3</td>
                <td>R1C4</td>
                <td>R1C5</td>
            </tr>
            <tr>
                <td>R2C1</td>
                <td>R2C2</td>
                <td>R2C3</td>
                <td>R2C4</td>
                <td>R2C5</td>
            </tr>
            <tr>
                <td>R3C1</td>
                <td>R3C2</td>
                <td>R3C3</td>
                <td>R3C4</td>
                <td>R3C5</td>
            </tr>
            <tr>
                <td>R4C1</td>
                <td>R4C2</td>
                <td>R4C3</td>
                <td>R4C4</td>
                <td>R4C5</td>
            </tr>
            <tr>
                <td>R5C1</td>
                <td>R5C2</td>
                <td>R5C3</td>
                <td>R5C4</td>
                <td>R5C5</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Col1 Footer</td>
                <td>Col2 Footer</td>
                <td>Col3 Footer</td>
                <td>Col4 Footer</td>
                <td>Col5 Footer</td>
            </tr>
        </tfoot>
    </table>
    • Generic
    • Showcase
    • View the code

      List Table

      Simple List Table
      • Col1 Header
      • C1R1
      • C1R2
      • C1R3
      • C1R4
      • C1R5
      • Col1 Footer
      • Col2 Header
      • C2R1
      • C2R2
      • C2R3
      • C2R4
      • C2R5
      • Col2 Footer
      • Col3 Header
      • C3R1
      • C3R2
      • C3R3
      • C3R4
      • C3R5
      • Col3 Footer
      Extra Table Footer
       
      <div class="table">
          <header>
              <span class="title">Simple List Table</span>
          </header>
          <section class="cols">
              <ul class="list col">
                  <li class="item header">
                      <span class="title">Col1 Header</span>
                  </li>
                  <li class="item">
                      <span class="title">C1R1</span>
                  </li>
                  <li class="item">
                      <span class="title">C1R2</span>
                  </li>
                  <li class="item">
                      <span class="title">C1R3</span>
                  </li>
                  <li class="item">
                      <span class="title">C1R4</span>
                  </li>
                  <li class="item">
                      <span class="title">C1R5</span>
                  </li>
                  <li class="item footer">
                      <span class="title">Col1 Footer</span>
                  </li>
              </ul>
              <ul class="list col">
                  <li class="item header">
                      <span class="title">Col2 Header</span>
                  </li>
                  <li class="item">
                      <span class="title">C2R1</span>
                  </li>
                  <li class="item">
                      <span class="title">C2R2</span>
                  </li>
                  <li class="item">
                      <span class="title">C2R3</span>
                  </li>
                  <li class="item">
                      <span class="title">C2R4</span>
                  </li>
                  <li class="item">
                      <span class="title">C2R5</span>
                  </li>
                  <li class="item footer">
                      <span class="title">Col2 Footer</span>
                  </li>
              </ul>
              <ul class="list col">
                  <li class="item header">
                      <span class="title">Col3 Header</span>
                  </li>
                  <li class="item">
                      <span class="title">C3R1</span>
                  </li>
                  <li class="item">
                      <span class="title">C3R2</span>
                  </li>
                  <li class="item">
                      <span class="title">C3R3</span>
                  </li>
                  <li class="item">
                      <span class="title">C3R4</span>
                  </li>
                  <li class="item">
                      <span class="title">C3R5</span>
                  </li>
                  <li class="item footer">
                      <span class="title">Col3 Footer</span>
                  </li>
              </ul>
          </section>
          <footer>
              <span class="title">Extra Table Footer</span>
          </footer>
      </div>
    • View the code
      Employees
      • Managers
      • Johnny
      • Billy
      • Desmond
      • Kevin
      • Programmers
      • Katie
      • Jake
      • Rosalie
      • Eugene
      • Designers
      • Michael
      • Roland
      • Stella
      • Gina
      • Testers
      • Bob
      • Monica
      • Patricia
      • Elena
       
      <div class="table">
          <header>
              <span class="title">Employees</span>
          </header>
          <section class="cols">
              <ul class="list col">
                  <li class="item header">
                      <span class="title">Managers</span>
                  </li>
                  <li class="item">
                      <span class="title">Johnny</span>
                  </li>
                  <li class="item">
                      <span class="title">Billy</span>
                  </li>
                  <li class="item">
                      <span class="title">Desmond</span>
                  </li>
                  <li class="item">
                      <span class="title">Kevin</span>
                  </li>
              </ul>
              <ul class="list col">
                  <li class="item header">
                      <span class="title">Programmers</span>
                  </li>
                  <li class="item">
                      <span class="title">Katie</span>
                  </li>
                  <li class="item">
                      <span class="title">Jake</span>
                  </li>
                  <li class="item">
                      <span class="title">Rosalie</span>
                  </li>
                  <li class="item">
                      <span class="title">Eugene</span>
                  </li>
              </ul>
              <ul class="list col">
                  <li class="item header">
                      <span class="title">Designers</span>
                  </li>
                  <li class="item">
                      <span class="title">Michael</span>
                  </li>
                  <li class="item">
                      <span class="title">Roland</span>
                  </li>
                  <li class="item">
                      <span class="title">Stella</span>
                  </li>
                  <li class="item">
                      <span class="title">Gina</span>
                  </li>
              </ul>
              <ul class="list col">
                  <li class="item header">
                      <span class="title">Testers</span>
                  </li>
                  <li class="item">
                      <span class="title">Bob</span>
                  </li>
                  <li class="item">
                      <span class="title">Monica</span>
                  </li>
                  <li class="item">
                      <span class="title">Patricia</span>
                  </li>
                  <li class="item">
                      <span class="title">Elena</span>
                  </li>
              </ul>
          </section>
      </div>
  • View the code

    List Table with Stripes

    Simple List Table with Stripes
    • Col1 Header
    • C1R1
    • C1R2
    • C1R3
    • C1R4
    • C1R5
    • Col1 Footer
    • Col2 Header
    • C2R1
    • C2R2
    • C2R3
    • C2R4
    • C2R5
    • Col2 Footer
    • Col3 Header
    • C3R1
    • C3R2
    • C3R3
    • C3R4
    • C3R5
    • Col3 Footer
    Extra Table Footer
     
    <div class="table">
        <header>
            <span class="title">Simple List Table with Stripes</span>
        </header>
        <section class="cols stripes">
            <ul class="list col">
                <li class="item header">
                    <span class="title">Col1 Header</span>
                </li>
                <li class="item">
                    <span class="title">C1R1</span>
                </li>
                <li class="item">
                    <span class="title">C1R2</span>
                </li>
                <li class="item">
                    <span class="title">C1R3</span>
                </li>
                <li class="item">
                    <span class="title">C1R4</span>
                </li>
                <li class="item">
                    <span class="title">C1R5</span>
                </li>
                <li class="item footer">
                    <span class="title">Col1 Footer</span>
                </li>
            </ul>
            <ul class="list col">
                <li class="item header">
                    <span class="title">Col2 Header</span>
                </li>
                <li class="item">
                    <span class="title">C2R1</span>
                </li>
                <li class="item">
                    <span class="title">C2R2</span>
                </li>
                <li class="item">
                    <span class="title">C2R3</span>
                </li>
                <li class="item">
                    <span class="title">C2R4</span>
                </li>
                <li class="item">
                    <span class="title">C2R5</span>
                </li>
                <li class="item footer">
                    <span class="title">Col2 Footer</span>
                </li>
            </ul>
            <ul class="list col">
                <li class="item header">
                    <span class="title">Col3 Header</span>
                </li>
                <li class="item">
                    <span class="title">C3R1</span>
                </li>
                <li class="item">
                    <span class="title">C3R2</span>
                </li>
                <li class="item">
                    <span class="title">C3R3</span>
                </li>
                <li class="item">
                    <span class="title">C3R4</span>
                </li>
                <li class="item">
                    <span class="title">C3R5</span>
                </li>
                <li class="item footer">
                    <span class="title">Col3 Footer</span>
                </li>
            </ul>
        </section>
        <footer>
            <span class="title">Extra Table Footer</span>
        </footer>
    </div>
Blackhole - Released under MIT license