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="ss-c-table">
    <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>

Bordered, Striped & Hover

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="ss-c-table ss-c-table--bordered ss-c-table--striped ss-c-table--hover">
    <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="ss-c-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="ss-c-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="ss-c-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="ss-c-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="ss-c-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="ss-c-table--striped--vertical ss-c-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

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="ss-c-collapsible_table">
            <div class="ss-c-collapsible_table--header">
                <span class="ss-c-collapsible_table--title">
                    Expandable Table Title
                </span>
                <button
                    class="active ss-c-flipper--down"
                    type="button"
                    aria-label="Toggle table"
                ></button>
            </div>

            <div class="ss-c-collapsible_table--content ss-c-collapse">
                <table class="ss-c-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

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="ss-c-data_table">
            <div class="ss-c-data_table--header">
                <span class="ss-c-data_table--title">Data Table Title</span>
                <form role="search" class="ss-c-data_table--form" aria-label="Table search">
                    <button
                        class="ss-c-data_table--button"
                        type="submit"
                        aria-label="Search"
                    >
                        <svg aria-hidden="true" focusable="false" width="16" height="16" style="flex: none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14"/></svg>
                    </button>
                    <input
                        type="text"
                        class="ss-c-data_table--input"
                        placeholder="Search..."
                        aria-label="Search table"
                    />
                </form>
            </div>

            <table class="ss-c-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="ss-c-data_table--pagination">
                <ul class="ss-c-pagination ss-c-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>

Sortable header

Repositories (select a column header to sort)
			Owner
sturnia-plot	18.4 MB	7 Oct	Starling
sturnus-area	5.2 MB	30 Sep	Starling
stylescape	41.0 MB	8 Oct	Scape Press

HTML

<table class="ss-c-table ss-c-table--hover" data-ss="table-sort">
            <caption>Repositories (select a column header to sort)</caption>
            <thead>
                <tr>
                    <th scope="col" aria-sort="ascending"><button class="ss-c-table__sort" type="button">Name</button></th>
                    <th scope="col" class="ss-c-table__cell--numeric" data-ss-sort-type="number"><button class="ss-c-table__sort" type="button">Size</button></th>
                    <th scope="col"><button class="ss-c-table__sort" type="button">Updated</button></th>
                    <th scope="col">Owner</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>sturnia-plot</td><td class="ss-c-table__cell--numeric" data-sort-value="18400">18.4 MB</td><td data-sort-value="2026-10-07">7 Oct</td><td>Starling</td></tr>
                <tr><td>sturnus-area</td><td class="ss-c-table__cell--numeric" data-sort-value="5200">5.2 MB</td><td data-sort-value="2026-09-30">30 Sep</td><td>Starling</td></tr>
                <tr><td>stylescape</td><td class="ss-c-table__cell--numeric" data-sort-value="41000">41.0 MB</td><td data-sort-value="2026-10-08">8 Oct</td><td>Scape Press</td></tr>
            </tbody>
        </table>

Overview

Color

Font

Character

Paragraph

List

Layout Primitives

Object Properties

Line & Rules

Buttons

Inputs & Forms

Status & Feedback

Navigation

Cards & Content

Media

Data Display

Misc

Interactive Features

Architecture Reference

Test Pages

Tables

Default Table

Bordered, Striped & Hover

Table Lined All

Table Lined Horizontal

Table Lined Vertical

Table Striped Horizontal

Table Striped Vertical

Table Size SM

Table Collapsible

Data Table

Sortable header