## Tables

### Default Table

This is a table caption, made with caption
Table Header 1 | Table Header 2 | Table Header 3
--- | --- | ---
Table Footer 1 | Table Footer 2 | Table Footer 3
TD 1.1 | TD 1.2 | TD 1.3
TD 2.1 | TD 2.2 | TD 2.3
TD 3.1 | TD 3.2 | TD 3.3

HTML

    <table class="">
        <caption>This is a table caption, made with caption</caption>
        <colgroup></colgroup>
        <thead>
            <tr>
                <th>Table Header 1</th>
                <th>Table Header 2</th>
                <th>Table Header 3</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Table Footer 1</td>
                <td>Table Footer 2</td>
                <td>Table Footer 3</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>TD 1.1</td>
                <td>TD 1.2</td>
                <td>TD 1.3</td>
            </tr>
            <tr>
                <td>TD 2.1</td>
                <td>TD 2.2</td>
                <td>TD 2.3</td>
            </tr>
            <tr>
                <td>TD 3.1</td>
                <td>TD 3.2</td>
                <td>TD 3.3</td>
            </tr>
        </tbody>
        </table>

### Table Lined All

This is a table caption, made with caption
Table Header 1 | Table Header 2 | Table Header 3
--- | --- | ---
Table Footer 1 | Table Footer 2 | Table Footer 3
TD 1.1 | TD 1.2 | TD 1.3
TD 2.1 | TD 2.2 | TD 2.3
TD 3.1 | TD 3.2 | TD 3.3

HTML

    <table class="table--lined--all">
        <caption>This is a table caption, made with caption</caption>
        <colgroup></colgroup>
        <thead>
            <tr>
                <th>Table Header 1</th>
                <th>Table Header 2</th>
                <th>Table Header 3</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Table Footer 1</td>
                <td>Table Footer 2</td>
                <td>Table Footer 3</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>TD 1.1</td>
                <td>TD 1.2</td>
                <td>TD 1.3</td>
            </tr>
            <tr>
                <td>TD 2.1</td>
                <td>TD 2.2</td>
                <td>TD 2.3</td>
            </tr>
            <tr>
                <td>TD 3.1</td>
                <td>TD 3.2</td>
                <td>TD 3.3</td>
            </tr>
        </tbody>
        </table>

### Table Lined Horizontal

This is a table caption, made with caption
Table Header 1 | Table Header 2 | Table Header 3
--- | --- | ---
Table Footer 1 | Table Footer 2 | Table Footer 3
TD 1.1 | TD 1.2 | TD 1.3
TD 2.1 | TD 2.2 | TD 2.3
TD 3.1 | TD 3.2 | TD 3.3

HTML

    <table class="table--lined--horizontal">

        <caption>This is a table caption, made with caption</caption>
        <colgroup></colgroup>
        <thead>
            <tr>
                <th>Table Header 1</th>
                <th>Table Header 2</th>
                <th>Table Header 3</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Table Footer 1</td>
                <td>Table Footer 2</td>
                <td>Table Footer 3</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>TD 1.1</td>
                <td>TD 1.2</td>
                <td>TD 1.3</td>
            </tr>
            <tr>
                <td>TD 2.1</td>
                <td>TD 2.2</td>
                <td>TD 2.3</td>
            </tr>
            <tr>
                <td>TD 3.1</td>
                <td>TD 3.2</td>
                <td>TD 3.3</td>
            </tr>
        </tbody>

            </table>

### Table Lined Vertical

This is a table caption, made with caption
Table Header 1 | Table Header 2 | Table Header 3
--- | --- | ---
Table Footer 1 | Table Footer 2 | Table Footer 3
TD 1.1 | TD 1.2 | TD 1.3
TD 2.1 | TD 2.2 | TD 2.3
TD 3.1 | TD 3.2 | TD 3.3

HTML

    <table class="table--lined--vertical">

        <caption>This is a table caption, made with caption</caption>
        <colgroup></colgroup>
        <thead>
            <tr>
                <th>Table Header 1</th>
                <th>Table Header 2</th>
                <th>Table Header 3</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Table Footer 1</td>
                <td>Table Footer 2</td>
                <td>Table Footer 3</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>TD 1.1</td>
                <td>TD 1.2</td>
                <td>TD 1.3</td>
            </tr>
            <tr>
                <td>TD 2.1</td>
                <td>TD 2.2</td>
                <td>TD 2.3</td>
            </tr>
            <tr>
                <td>TD 3.1</td>
                <td>TD 3.2</td>
                <td>TD 3.3</td>
            </tr>
        </tbody>

            </table>

### Table Striped Horizontal

This is a table caption, made with caption
Table Header 1 | Table Header 2 | Table Header 3
--- | --- | ---
Table Footer 1 | Table Footer 2 | Table Footer 3
TD 1.1 | TD 1.2 | TD 1.3
TD 2.1 | TD 2.2 | TD 2.3
TD 3.1 | TD 3.2 | TD 3.3

HTML

    <table class="table--striped--horizontal">

        <caption>This is a table caption, made with caption</caption>
        <colgroup></colgroup>
        <thead>
            <tr>
                <th>Table Header 1</th>
                <th>Table Header 2</th>
                <th>Table Header 3</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Table Footer 1</td>
                <td>Table Footer 2</td>
                <td>Table Footer 3</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>TD 1.1</td>
                <td>TD 1.2</td>
                <td>TD 1.3</td>
            </tr>
            <tr>
                <td>TD 2.1</td>
                <td>TD 2.2</td>
                <td>TD 2.3</td>
            </tr>
            <tr>
                <td>TD 3.1</td>
                <td>TD 3.2</td>
                <td>TD 3.3</td>
            </tr>
        </tbody>

            </table>

### Table Striped Vertical

This is a table caption, made with caption
Table Header 1 | Table Header 2 | Table Header 3
--- | --- | ---
Table Footer 1 | Table Footer 2 | Table Footer 3
TD 1.1 | TD 1.2 | TD 1.3
TD 2.1 | TD 2.2 | TD 2.3
TD 3.1 | TD 3.2 | TD 3.3

HTML

    <table class="table--striped--vertical">

        <caption>This is a table caption, made with caption</caption>
        <colgroup></colgroup>
        <thead>
            <tr>
                <th>Table Header 1</th>
                <th>Table Header 2</th>
                <th>Table Header 3</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Table Footer 1</td>
                <td>Table Footer 2</td>
                <td>Table Footer 3</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>TD 1.1</td>
                <td>TD 1.2</td>
                <td>TD 1.3</td>
            </tr>
            <tr>
                <td>TD 2.1</td>
                <td>TD 2.2</td>
                <td>TD 2.3</td>
            </tr>
            <tr>
                <td>TD 3.1</td>
                <td>TD 3.2</td>
                <td>TD 3.3</td>
            </tr>
        </tbody>

            </table>

### Table Size SM

This is a table caption, made with caption
Table Header 1 | Table Header 2 | Table Header 3
--- | --- | ---
Table Footer 1 | Table Footer 2 | Table Footer 3
TD 1.1 | TD 1.2 | TD 1.3
TD 2.1 | TD 2.2 | TD 2.3
TD 3.1 | TD 3.2 | TD 3.3

HTML

    <table class="table--striped--vertical table--size--sm">

        <caption>This is a table caption, made with caption</caption>
        <colgroup></colgroup>
        <thead>
            <tr>
                <th>Table Header 1</th>
                <th>Table Header 2</th>
                <th>Table Header 3</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Table Footer 1</td>
                <td>Table Footer 2</td>
                <td>Table Footer 3</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>TD 1.1</td>
                <td>TD 1.2</td>
                <td>TD 1.3</td>
            </tr>
            <tr>
                <td>TD 2.1</td>
                <td>TD 2.2</td>
                <td>TD 2.3</td>
            </tr>
            <tr>
                <td>TD 3.1</td>
                <td>TD 3.2</td>
                <td>TD 3.3</td>
            </tr>
        </tbody>

            </table>

### Table Collapsible

Expandable Table Title

This is a table caption, made with caption
Table Header 1 | Table Header 2 | Table Header 3
--- | --- | ---
Table Footer 1 | Table Footer 2 | Table Footer 3
TD 1.1 | TD 1.2 | TD 1.3
TD 2.1 | TD 2.2 | TD 2.3
TD 3.1 | TD 3.2 | TD 3.3

HTML

    <div class="collapsible_table">
                <div class="collapsible_table--header">
                    <span class="collapsible_table--title">
                        Expandable Table Title
                    </span>
                    <button class="active flipper--down" type="button"></button>
                </div>

                <div class="collapsible_table--content collapse">
                    <table class="table--lined--horizontal">

        <caption>This is a table caption, made with caption</caption>
        <colgroup></colgroup>
        <thead>
            <tr>
                <th>Table Header 1</th>
                <th>Table Header 2</th>
                <th>Table Header 3</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Table Footer 1</td>
                <td>Table Footer 2</td>
                <td>Table Footer 3</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>TD 1.1</td>
                <td>TD 1.2</td>
                <td>TD 1.3</td>
            </tr>
            <tr>
                <td>TD 2.1</td>
                <td>TD 2.2</td>
                <td>TD 2.3</td>
            </tr>
            <tr>
                <td>TD 3.1</td>
                <td>TD 3.2</td>
                <td>TD 3.3</td>
            </tr>
        </tbody>

                    </table>
                </div>
            </div>

### Data Table

Data Table Title

This is a table caption, made with caption
Table Header 1 | Table Header 2 | Table Header 3
--- | --- | ---
Table Footer 1 | Table Footer 2 | Table Footer 3
TD 1.1 | TD 1.2 | TD 1.3
TD 2.1 | TD 2.2 | TD 2.3
TD 3.1 | TD 3.2 | TD 3.3

- Prev
- 1
- 2
- 3
- Next

HTML

    <div class="data_table">
                <div class="data_table--header">
                    <span class="data_table--title">Data Table Title</span>
                    <form role="search" class="data_table--form">
                        <button class="data_table--button" type="submit">
                            <i class="i i_ui_search"></i>
                        </button>
                        <input
                            type="text"
                            class="data_table--input"
                            placeholder="Search..."
                        />
                    </form>
                </div>

                <table class="table--lined--horizontal">

        <caption>This is a table caption, made with caption</caption>
        <colgroup></colgroup>
        <thead>
            <tr>
                <th>Table Header 1</th>
                <th>Table Header 2</th>
                <th>Table Header 3</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Table Footer 1</td>
                <td>Table Footer 2</td>
                <td>Table Footer 3</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>TD 1.1</td>
                <td>TD 1.2</td>
                <td>TD 1.3</td>
            </tr>
            <tr>
                <td>TD 2.1</td>
                <td>TD 2.2</td>
                <td>TD 2.3</td>
            </tr>
            <tr>
                <td>TD 3.1</td>
                <td>TD 3.2</td>
                <td>TD 3.3</td>
            </tr>
        </tbody>

                </table>

                <div class="data_table--pagination">
                    <ul class="pagination pagination--left">
                        <li><a href="#">Prev</a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">Next</a></li>
                    </ul>
                </div>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!