extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'tables'
  - var parent = 'elements'
  - var title = 'Tables - Elements - Spectre.css CSS Framework'
  - var description = 'Tables include default styles for tables and data sets. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('tables', 'Tables')
    include ../_layout/_ad-g.pug

    p Tables include default styles for tables and data sets.

    .docs-demo.columns
      .column.col-12
        table.table
          thead
            tr
              th Name
              th Genre
              th Release date
          tbody
            tr
              td The Shawshank Redemption
              td Crime, Drama
              td 14 October 1994
            tr
              td The Godfather
              td Crime, Drama
              td 24 March 1972
            tr
              td Schindler's List
              td Biography, Drama, History
              td 4 February 1994
            tr
              td Se7en
              td Crime, Drama, Mystery
              td 22 September 1995

    p
      | Add the #[code table] class to any #{'<table>'} element. 
      | The class will add padding, border and emphasized table header.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <table class="table">
            <thead>
              <tr>
                <th>name</th>
                <th>genre</th>
                <th>release date</th>
              </tr>
            </thead>
            <tbody>
              <tr class="active">
                <td>The Shawshank Redemption</td>
                <td>Crime, Drama</td>
                <td>14 October 1994</td>
              </tr>
            </tbody>
          </table>
    
    +docs-subheading('tables-striped', 'Striped tables')

    .docs-demo.columns
      .column.col-12
        table.table.table-striped.table-hover
          thead
            tr
              th Name
              th Genre
              th Release date
          tbody
            tr
              td The Shawshank Redemption
              td Crime, Drama
              td 14 October 1994
            tr
              td The Godfather
              td Crime, Drama
              td 24 March 1972
            tr
              td Schindler's List
              td Biography, Drama, History
              td 4 February 1994
            tr
              td Se7en
              td Crime, Drama, Mystery
              td 22 September 1995

    p
      | Use the #[code table-striped] class to #{'<table>'} to add zebra striped style.
      | For hoverable table rows, you can add the #[code table-hover] class to enable hover style.
    p
      | Use the #[code active] class to make #{'<tr>'} element highlighted.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <table class="table table-striped table-hover">
            <thead>
              <tr>
                <th>name</th>
                <th>genre</th>
                <th>release date</th>
              </tr>
            </thead>
            <tbody>
              <tr class="active">
                <td>The Shawshank Redemption</td>
                <td>Crime, Drama</td>
                <td>14 October 1994</td>
              </tr>
            </tbody>
          </table>

    +docs-subheading('tables-scroll', 'Scrollable tables')

    .docs-demo.columns
      .column.col-12
        table.table.table-scroll
          thead
            tr
              th Name
              th Rating
              th Duration
              th Genre
              th Release date
              th Director
          tbody
            tr
              td The Shawshank Redemption
              td R
              td 2h 22min
              td Crime, Drama
              td 14 October 1994
              td Frank Darabont
            tr
              td The Godfather
              td R
              td 2h 55min
              td Crime, Drama
              td 24 March 1972
              td Francis Ford Coppola
            tr
              td Schindler's List
              td R
              td 3h 15min
              td Biography, Drama, History
              td 4 February 1994
              td Steven Spielberg
            tr
              td Se7en
              td R
              td 2h 7min
              td Crime, Drama, Mystery
              td 22 September 1995
              td David Fincher

    p
      | Add the #[code table-scroll] class to #{'<table>'} to have a horizontally scrollable table.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <table class="table table-scroll">
            ...
          </table>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug