section#tables

  h2 Tables
  p When using tables remember about appropriate content grouping with <code>thead</code> and <code>tbody</code>. 

  .table-responsive
    table
      thead
        tr
          th #
          th Name
          th Surname
          th Email
      tbody
        tr
          td 1
          td Adam
          td Brault
          td 
            a adam@andyet.com
        tr
          td 2
          td Lynn 
          td Fisher
          td 
            a lynn@andyet.com
        tr
          td 3
          td Adam
          td Baldwin
          td
            a baldwin@andyet.com

  :markdown
    ```html
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Surname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Adam</td>
            <td>Brault</td>
            <td>adam@andyet.com</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Lynn</td>
            <td>Fisher</td>
            <td>lynn@andyet.com</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Adam</td>
            <td>Baldwin</td>
            <td>baldwin@andyet.com</td>
          </tr>
        </tbody>
      </table>
    ```

  h3 Outlined tables
  p Use <code>table-outlined</code> class for additional border around the <code>table</code>. For hover effects on rows add <code>table-with-hover</code>.

  .table-responsive
    table.table-outlined.table-with-hover
      thead
        tr
          th #
          th Name
          th Surname
          th Email
      tbody
        tr
          td 1
          td Adam
          td Brault
          td 
            a adam@andyet.com
        tr
          td 2
          td Lynn
          td Fisher
          td 
            a lynn@andyet.com
        tr
          td 3
          td Adam
          td Baldwin
          td
            a baldwin@andyet.com

  h3 Striped table
  p For odd striped rows add <code>table-striped</code> class.

  .table-responsive
    table.table-striped
      thead
        tr
          th #
          th Name
          th Surname
          th Email
      tbody
        tr
          td 1
          td Adam
          td Brault
          td 
            a adam@andyet.com
        tr
          td 2
          td Lynn 
          td Fisher
          td 
            a lynn@andyet.com
        tr
          td 3
          td Adam
          td Baldwin
          td
            a baldwin@andyet.com
        tr
          td 4
          td Amy
          td Lynn Taylor
          td
            a amy@andyet.com

  h3 Table with error states
  p To add validation states to table rows use <code>table-cell-success</code>, <code>table-cell-alert</code> and <code>table-cell-error</code> respectively.

  .table-responsive
    table
      thead
        tr
          th #
          th Name
          th Surname
          th Email
      tbody
        tr.table-cell-success
          td 1
          td Adam
          td Brault
          td 
            a adam@andyet.com
        tr.table-cell-alert
          td 2
          td Lynn
          td Fisher
          td 
            a lynn@andyet.com
        tr.table-cell-error
          td 3
          td Adam
          td Baldwin
          td
            a baldwin@andyet.com
        tr
          td 4
          td Amy
          td Lynn Taylor
          td
            a amy@andyet.com