Visite: 10668

Valutazione attuale: 0 / 5

Sono definiti 7 tipologie di tabelle: Default, Compact, Complex, Irregular, Responsive, Swipe, Twoheaders. Le tabelle possono essere inserite tramite apposito codice. Ogni nuova tabella sarà creata con la formattazione di default se viene creata mediante l'editor TinyMCE. Tramite plugin javascript le tabelle prive di formattazione saranno formattate con il formato Default.


maiores eius et
Tab. 1 Tab. 2 Tab. 3 Tab. 4
Tab. 1 Tab. 2 Tab. 3 Tab. 4
Tab. 1 Tab. 2 Tab. 3 Tab. 4
Tab. 1 Tab. 2 Tab. 3 Tab. 4
Tab. 1 Tab. 2 Tab. 3 Tab. 4

<table class="Table Table--withBorder u-text-r-xs">
    <caption class="u-hiddenVisually">maiores eius et</caption>
    <thead>
        <tr class="u-border-bottom-xs">
            <th>Tab. 1</th>
            <th>Tab. 2</th>
            <th>Tab. 3</th>
            <th>Tab. 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tab. 1</td>
            <td>Tab. 2</td>
            <td>Tab. 3</td>
            <td>Tab. 4</td>
        </tr>
        <tr>
            <td>Tab. 1</td>
            <td>Tab. 2</td>
            <td>Tab. 3</td>
            <td>Tab. 4</td>
        </tr>
        <tr>
            <td>Tab. 1</td>
            <td>Tab. 2</td>
            <td>Tab. 3</td>
            <td>Tab. 4</td>
        </tr>
        <tr>
            <td>Tab. 1</td>
            <td>Tab. 2</td>
            <td>Tab. 3</td>
            <td>Tab. 4</td>
        </tr>
    </tbody>
</table>

Tab. 1 Tab. 2 Tab. 3 Tab. 4
Tab. 1 Tab. 2 Tab. 3 Tab. 4
Tab. 1 Tab. 2 Tab. 3 Tab. 4
Tab. 1 Tab. 2 Tab. 3 Tab. 4
Tab. 1 Tab. 2 Tab. 3 Tab. 4

<table class="Table Table--withBorder Table--compact u-text-r-xxs" 
       aria-describedby="description">
    <thead>
        <tr class="u-border-bottom-xs">
            <th>Tab. 1</th>
            <th>Tab. 2</th>
            <th>Tab. 3</th>
            <th>Tab. 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tab. 1</td>
            <td>Tab. 2</td>
            <td>Tab. 3</td>
            <td>Tab. 4</td>
        </tr>
        <tr>
            <td>Tab. 1</td>
            <td>Tab. 2</td>
            <td>Tab. 3</td>
            <td>Tab. 4</td>
        </tr>
        <tr>
            <td>Tab. 1</td>
            <td>Tab. 2</td>
            <td>Tab. 3</td>
            <td>Tab. 4</td>
        </tr>
        <tr>
            <td>Tab. 1</td>
            <td>Tab. 2</td>
            <td>Tab. 3</td>
            <td>Tab. 4</td>
        </tr>
    </tbody>
</table>

maiores eius et
Tab. txt Tab. txt Tab. num Tab. num
Tab. txt Tab. txt Tab. num Tab. num
Tab. txt Tab. txt Tab. num Tab. num
Tab. txt Tab. txt Tab. num Tab. num
Tab. txt Tab. txt Tab. num Tab. num

<table class="Table Table--striped Table--hover Table--withBorder">
    <caption class="u-hiddenVisually">maiores eius et</caption>
    <thead>
        <tr class="u-border-bottom-xs">
            <th class="u-textLeft">Tab. txt</th>
            <th class="u-textLeft">Tab. txt</th>
            <th class="u-textRight">Tab. num</th>
            <th class="u-textRight">Tab. num</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="u-textLeft">Tab. txt</td>
            <td class="u-textLeft">Tab. txt</td>
            <td class="u-textRight">Tab. num</td>
            <td class="u-textRight">Tab. num</td>
        </tr>
        <tr>
            <td class="u-textLeft">Tab. txt</td>
            <td class="u-textLeft">Tab. txt</td>
            <td class="u-textRight">Tab. num</td>
            <td class="u-textRight">Tab. num</td>
        </tr>
        <tr>
            <td class="u-textLeft">Tab. txt</td>
            <td class="u-textLeft">Tab. txt</td>
            <td class="u-textRight">Tab. num</td>
            <td class="u-textRight">Tab. num</td>
        </tr>
        <tr>
            <td class="u-textLeft">Tab. txt</td>
            <td class="u-textLeft">Tab. txt</td>
            <td class="u-textRight">Tab. num</td>
            <td class="u-textRight">Tab. num</td>
        </tr>
    </tbody>
</table>

maiores eius et
Mars Venus
Produced Sold Produced Sold
Teddy Bears 50,000 30,000 100,000 80,000
Board Games 10,000 5,000 12,000 9,000

<table class="Table Table--withBorder">
    <caption class="u-hiddenVisually">maiores eius et</caption>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <tr>
        <td rowspan="2"></td>
        <th class="u-textCenter u-border-right-xxs u-border-left-xxs 
                   u-background-grey-10" colspan="2" 
            scope="colgroup">Mars</th>
        <th class="u-textCenter u-background-grey-10" colspan="2" 
            scope="colgroup">Venus</th>
    </tr>
    <tr class="u-background-grey-10">
        <th class="u-textCenter" scope="col">Produced</th>
        <th class="u-textCenter u-border-right-xxs" scope="col">Sold</th>
        <th class="u-textCenter" scope="col">Produced</th>
        <th class="u-textCenter" scope="col">Sold</th>
    </tr>
    <tr>
        <th scope="row" class="u-background-grey-10">Teddy Bears</th>
        <td class="u-textCenter u-border-left-xxs">50,000</td>
        <td class="u-textCenter u-border-right-xxs">30,000</td>
        <td class="u-textCenter">100,000</td>
        <td class="u-textCenter">80,000</td>
    </tr>
    <tr>
        <th scope="row" class="u-background-grey-10">Board Games</th>
        <td class="u-textCenter u-border-left-xxs">10,000</td>
        <td class="u-textCenter u-border-right-xxs">5,000</td>
        <td class="u-textCenter">12,000</td>
        <td class="u-textCenter">9,000</td>
    </tr>
</table>

maiores eius et
Tab. 1 Tab. 2 Tab. 3 Tab. 4
Dolor itaque ad asperiores et. Odit perspiciatis dignissimos velit architecto. Quam id non. Et commodi mollitia eius rerum dolorem et dolorum dolorem.
Odit perspiciatis dignissimos velit architecto. Quam id non. Et commodi mollitia eius rerum dolorem et dolorum dolorem. Quia ex deleniti.
Quam id non. Et commodi mollitia eius rerum dolorem et dolorum dolorem. Quia ex deleniti. Amet adipisci cumque odio voluptas.
Et commodi mollitia eius rerum dolorem et dolorum dolorem. Quia ex deleniti. Amet adipisci cumque odio voluptas. Quisquam reiciendis molestias fugiat minus laudantium soluta dolorum et vitae.

<table class="Table Table--withBorder js-TableResponsive tablesaw 
              tablesaw-stack" 
       data-tablesaw-mode="stack">
    <caption class="u-hiddenVisually">maiores eius et</caption>
    <thead>
        <tr>
            <th scope="col">Tab. 1</th>
            <th scope="col">Tab. 2</th>
            <th scope="col">Tab. 3</th>
            <th scope="col">Tab. 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dolor itaque ad asperiores et.</td>
            <td>Odit perspiciatis dignissimos velit architecto.</td>
            <td>Quam id non.</td>
            <td>Et commodi mollitia eius rerum dolorem et dolorum dolorem.</td>
        </tr>
        <tr>
            <td>Odit perspiciatis dignissimos velit architecto.</td>
            <td>Quam id non.</td>
            <td>Et commodi mollitia eius rerum dolorem et dolorum dolorem.</td>
            <td>Quia ex deleniti.</td>
        </tr>
        <tr>
            <td>Quam id non.</td>
            <td>Et commodi mollitia eius rerum dolorem et dolorum dolorem.</td>
            <td>Quia ex deleniti.</td>
            <td>Amet adipisci cumque odio voluptas.</td>
        </tr>
        <tr>
            <td>Et commodi mollitia eius rerum dolorem et dolorum dolorem.</td>
            <td>Quia ex deleniti.</td>
            <td>Amet adipisci cumque odio voluptas.</td>
            <td>Quisquam reiciendis molestias fugiat minus laudantium soluta dolorum et vitae.</td>
        </tr>
    </tbody>
</table>

maiores eius et
Tab. 1 Tab. 2 Tab. 3 Tab. 4
Dolor itaque ad asperiores et. Odit perspiciatis dignissimos velit architecto. Quam id non. Et commodi mollitia eius rerum dolorem et dolorum dolorem.
Odit perspiciatis dignissimos velit architecto. Quam id non. Et commodi mollitia eius rerum dolorem et dolorum dolorem. Quia ex deleniti.
Quam id non. Et commodi mollitia eius rerum dolorem et dolorum dolorem. Quia ex deleniti. Amet adipisci cumque odio voluptas.
Et commodi mollitia eius rerum dolorem et dolorum dolorem. Quia ex deleniti. Amet adipisci cumque odio voluptas. Quisquam reiciendis molestias fugiat minus laudantium soluta dolorum et vitae.

<table class="Table Table--withBorder js-TableResponsive tablesaw 
              tablesaw-swipe" 
       data-tablesaw-mode="swipe">
    <caption class="u-hiddenVisually">maiores eius et</caption>
    <thead>
        <tr>
            <th scope="col" data-tablesaw-priority="persist">Tab. 1</th>
            <th scope="col">Tab. 2</th>
            <th scope="col">Tab. 3</th>
            <th scope="col">Tab. 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="u-textWeight-600">Dolor itaque ad asperiores et.</td>
            <td>Odit perspiciatis dignissimos velit architecto.</td>
            <td>Quam id non.</td>
            <td>Et commodi mollitia eius rerum dolorem et dolorum dolorem.</td>
        </tr>
        <tr>
            <td class="u-textWeight-600">Odit perspiciatis dignissimos velit architecto.</td>
            <td>Quam id non.</td>
            <td>Et commodi mollitia eius rerum dolorem et dolorum dolorem.</td>
            <td>Quia ex deleniti.</td>
        </tr>
        <tr>
            <td class="u-textWeight-600">Quam id non.</td>
            <td>Et commodi mollitia eius rerum dolorem et dolorum dolorem.</td>
            <td>Quia ex deleniti.</td>
            <td>Amet adipisci cumque odio voluptas.</td>
        </tr>
        <tr>
            <td class="u-textWeight-600">Et commodi mollitia eius rerum dolorem et dolorum dolorem.</td>
            <td>Quia ex deleniti.</td>
            <td>Amet adipisci cumque odio voluptas.</td>
            <td>Quisquam reiciendis molestias fugiat minus laudantium soluta dolorum et vitae.</td>
        </tr>
    </tbody>
</table>

Delivery slots:
Monday Tuesday Wednesday Thursday Friday
09:00 - 11:00 Closed Open Open Closed Closed
11:00 - 13:00 Open Open Closed Closed Closed

<table class="Table Table--withBorder">
    <caption class="u-padding-r-bottom u-textLeft">Delivery slots:</caption>
    <tr>
        <td></td>
        <th scope="col">Monday</th>
        <th scope="col">Tuesday</th>
        <th scope="col">Wednesday</th>
        <th scope="col">Thursday</th>
        <th scope="col">Friday</th>
    </tr>
    <tr>
        <th scope="row">09:00 - 11:00</th>
        <td>Closed</td>
        <td>Open</td>
        <td>Open</td>
        <td>Closed</td>
        <td>Closed</td>
    </tr>
    <tr>
        <th scope="row">11:00 - 13:00</th>
        <td>Open</td>
        <td>Open</td>
        <td>Closed</td>
        <td>Closed</td>
        <td>Closed</td>
    </tr>
</table>