UI Generator

Select theme appearance

Tables

Tables should be used for tabular data. They can easily hold a lot of data and group it together clearly and semantically correct.

Link to section titled: Component

Component

Standard Table
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

Tables

- html 
<!-- COMPONENT-START: nc-table -->
<div class="nc-table" role="group" aria-labelledby="table-standard" tabindex="0">
    <table>
        <caption id="table-standard">
            Standard Table
        </caption>
        <thead>
            <tr>
                <th>Table Heading 1</th>
                <th>Table Heading 2</th>
                <th>Table Heading 3</th>
                <th>Table Heading 4</th>
                <th>Table Heading 5</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Table Footer 1</th>
                <th>Table Footer 2</th>
                <th>Table Footer 3</th>
                <th>Table Footer 4</th>
                <th>Table Footer 5</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
        </tbody>
    </table>
</div>
<!-- COMPONENT-END: nc-table -->
Link to section titled: Usage notes

Usage notes

  • Make sure all data is visible in all responsive setups. Either change the layout or allow scrolling..
Link to section titled: Examples

Examples

Horizontal Table

Sometimes tables make more sense to be horizontal. This is how you do it.

Horizontal Table
Row 1 Header Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Row 2 Header Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Row 3 Header Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Row 4 Header Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

Horizontal Table

- html 
<!-- COMPONENT-START: nc-table: horizontal -->
<div class="nc-table" role="group" aria-labelledby="table-horizontal" tabindex="0">
    <table>
        <caption id="table-horizontal">
            Horizontal Table
        </caption>
        <tbody>
            <tr>
                <th>Row 1 Header</th>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <th>Row 2 Header</th>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <th>Row 3 Header</th>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <th>Row 4 Header</th>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
        </tbody>
    </table>
</div>
<!-- COMPONENT-END: nc-table -->