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>