Difference between revisions of "Table Style Examples"
From Xen
Lars.kurth (talk | contribs) |
Lars.kurth (talk | contribs) (→class sortable) |
||
(11 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
{{TODO|Make the look of these styles more aligned with the overall website look and feel. Aka colors, design elements, rounded corners, font sizes, etc. Also, separate '''additional''' attributes such as <em>sortable</em> properly out: e.g. some tables are full-width - the right way would be to add a <em>widetable</em> attribute, etc.}} |
{{TODO|Make the look of these styles more aligned with the overall website look and feel. Aka colors, design elements, rounded corners, font sizes, etc. Also, separate '''additional''' attributes such as <em>sortable</em> properly out: e.g. some tables are full-width - the right way would be to add a <em>widetable</em> attribute, etc.}} |
||
This page contains examples of our table styles |
This page contains examples of our table styles |
||
+ | |||
+ | = Base Styles = |
||
== class <em>prettytable</em> == |
== class <em>prettytable</em> == |
||
Line 17: | Line 19: | ||
|Yogurt |
|Yogurt |
||
|} |
|} |
||
+ | <br> |
||
+ | {| class="prettytable" |
||
+ | |- |
||
+ | ! Fruit |
||
+ | ! Price |
||
+ | |- |
||
+ | ! Pears |
||
+ | | £1.15 |
||
+ | |- |
||
+ | ! Apples |
||
+ | | £0.95 |
||
+ | |- |
||
+ | ! Oranges |
||
+ | | £0.85 |
||
+ | |} |
||
+ | |||
+ | <br> |
||
== class <em>shadedtable</em> == |
== class <em>shadedtable</em> == |
||
Line 34: | Line 53: | ||
|} |
|} |
||
+ | <br> |
||
− | == class <em>sortable</em> == |
||
+ | {| class="shadedtable" |
||
− | When a list of entries is included in a table on a page, you can use JavaScript to make the table 'sortable'. To do this, just add the "sortable" class to the table declaration: |
||
− | {| class="sortable" |
||
|- |
|- |
||
− | ! Fruit |
+ | ! Fruit |
+ | ! Price |
||
|- |
|- |
||
− | + | ! Pears |
|
+ | | £1.15 |
||
|- |
|- |
||
+ | ! Apples |
||
− | | Oranges || £0.85 |
||
+ | | £0.95 |
||
|- |
|- |
||
+ | ! Oranges |
||
− | | Pears || £1.15 |
||
+ | | £0.85 |
||
|} |
|} |
||
+ | |||
− | You can use this attribute with other table styles. |
||
+ | <br> |
||
− | {| class="zebra sortable" |
||
+ | |||
+ | == class <em>shadedtable2</em> == |
||
+ | {| class="shadedtable2" |
||
+ | !colspan="6"|Shopping List |
||
|- |
|- |
||
+ | |rowspan="2"|Bread & Butter |
||
− | ! Fruit !! Price |
||
+ | |Pie |
||
+ | |Buns |
||
+ | |Danish |
||
+ | |colspan="2"|Croissant |
||
|- |
|- |
||
+ | |Cheese |
||
− | | Apples || £0.95 |
||
+ | |colspan="2"|Ice cream |
||
− | |- |
||
+ | |Butter |
||
− | | Oranges || £0.85 |
||
+ | |Yogurt |
||
− | |- |
||
− | | Pears || £1.15 |
||
|} |
|} |
||
+ | <br> |
||
− | {| class="shadedtable sortable" |
||
+ | {| class="shadedtable2" |
||
|- |
|- |
||
− | ! Fruit |
+ | ! Fruit |
+ | ! Price |
||
|- |
|- |
||
− | + | ! Pears |
|
+ | | £1.15 |
||
|- |
|- |
||
+ | ! Apples |
||
− | | Oranges || £0.85 |
||
+ | | £0.95 |
||
|- |
|- |
||
+ | ! Oranges |
||
− | | Pears || £1.15 |
||
+ | | £0.85 |
||
|} |
|} |
||
+ | |||
+ | <br> |
||
== class <em>wikitable</em> == |
== class <em>wikitable</em> == |
||
Line 85: | Line 121: | ||
|} |
|} |
||
+ | <br> |
||
+ | {| class="wikitable" |
||
+ | |- |
||
+ | ! Fruit |
||
+ | ! Price |
||
+ | |- |
||
+ | ! Pears |
||
+ | | £1.15 |
||
+ | |- |
||
+ | ! Apples |
||
+ | | £0.95 |
||
+ | |- |
||
+ | ! Oranges |
||
+ | | £0.85 |
||
+ | |} |
||
+ | |||
+ | <br> |
||
== class <em>zebra</em> == |
== class <em>zebra</em> == |
||
{| class="zebra" |
{| class="zebra" |
||
Line 99: | Line 152: | ||
|Butter |
|Butter |
||
|Yogurt |
|Yogurt |
||
+ | |} |
||
+ | <br> |
||
+ | {| class="zebra" |
||
+ | |- |
||
+ | ! Fruit |
||
+ | ! Price |
||
+ | |- |
||
+ | ! Pears |
||
+ | | £1.15 |
||
+ | |- |
||
+ | ! Apples |
||
+ | | £0.95 |
||
+ | |- |
||
+ | ! Oranges |
||
+ | | £0.85 |
||
+ | |} |
||
+ | |||
+ | = Modifiers = |
||
+ | |||
+ | These are table classes that modify an existing table classes behavior. |
||
+ | |||
+ | == class <em>fullwidth</em> == |
||
+ | Make a table the size of the page. |
||
+ | <pre> |
||
+ | {| class="zebra fullwidth" |
||
+ | ... |
||
+ | </pre> |
||
+ | '''Example:''' |
||
+ | {| class="zebra fullwidth" |
||
+ | |- |
||
+ | ! Fruit !! Price |
||
+ | |- |
||
+ | | Apples || £0.95 |
||
+ | |} |
||
+ | |||
+ | <br> |
||
+ | == class <em>sortable</em> == |
||
+ | Make a table sortable by '''clicking on the header'''. |
||
+ | <pre> |
||
+ | {| class="prettytable sortable" |
||
+ | ... |
||
+ | </pre> |
||
+ | |||
+ | Note that in order for the {{Sortable}} icon to be shown, you need to add |
||
+ | |||
+ | <pre> |
||
+ | {| class="prettytable sortable" |
||
+ | |- |
||
+ | ! Fruit {{Sortable}} !! Price {{Sortable}} |
||
+ | </pre> |
||
+ | |||
+ | '''Example:''' |
||
+ | |||
+ | {| class="prettytable sortable" |
||
+ | |- |
||
+ | ! Fruit {{Sortable}} !! Price {{Sortable}} |
||
+ | |- |
||
+ | | Pears || £1.15 |
||
+ | |- |
||
+ | | Apples || £0.95 |
||
+ | |- |
||
+ | | Oranges || £0.85 |
||
|} |
|} |
||
Latest revision as of 13:17, 8 August 2016
This page contains examples of our table styles
Contents
Base Styles
class prettytable
Shopping List | |||||
---|---|---|---|---|---|
Bread & Butter | Pie | Buns | Danish | Croissant | |
Cheese | Ice cream | Butter | Yogurt |
Fruit | Price |
---|---|
Pears | £1.15 |
Apples | £0.95 |
Oranges | £0.85 |
class shadedtable
Shopping List | |||||
---|---|---|---|---|---|
Bread & Butter | Pie | Buns | Danish | Croissant | |
Cheese | Ice cream | Butter | Yogurt |
Fruit | Price |
---|---|
Pears | £1.15 |
Apples | £0.95 |
Oranges | £0.85 |
class shadedtable2
Shopping List | |||||
---|---|---|---|---|---|
Bread & Butter | Pie | Buns | Danish | Croissant | |
Cheese | Ice cream | Butter | Yogurt |
Fruit | Price |
---|---|
Pears | £1.15 |
Apples | £0.95 |
Oranges | £0.85 |
class wikitable
Shopping List | |||||
---|---|---|---|---|---|
Bread & Butter | Pie | Buns | Danish | Croissant | |
Cheese | Ice cream | Butter | Yogurt |
Fruit | Price |
---|---|
Pears | £1.15 |
Apples | £0.95 |
Oranges | £0.85 |
class zebra
Shopping List | |||||
---|---|---|---|---|---|
Bread & Butter | Pie | Buns | Danish | Croissant | |
Cheese | Ice cream | Butter | Yogurt |
Fruit | Price |
---|---|
Pears | £1.15 |
Apples | £0.95 |
Oranges | £0.85 |
Modifiers
These are table classes that modify an existing table classes behavior.
class fullwidth
Make a table the size of the page.
{| class="zebra fullwidth" ...
Example:
Fruit | Price |
---|---|
Apples | £0.95 |
class sortable
Make a table sortable by clicking on the header.
{| class="prettytable sortable" ...
Note that in order for the icon to be shown, you need to add
{| class="prettytable sortable" |- ! Fruit {{Sortable}} !! Price {{Sortable}}
Example:
Fruit | Price |
---|---|
Pears | £1.15 |
Apples | £0.95 |
Oranges | £0.85 |