Table Style Examples: Difference between revisions
From Xen
Jump to navigationJump to search
Lars.kurth (talk | contribs) No edit summary |
Lars.kurth (talk | contribs) (Fixing description) |
||
| 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 34: | Line 36: | ||
|} |
|} |
||
| ⚫ | |||
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: |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
You can use this attribute with other table styles. |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| Oranges || £0.85 |
|||
|- |
|||
| Pears || £1.15 |
|||
|} |
|||
{| class="shadedtable sortable" |
|||
|- |
|||
! Fruit !! Price |
|||
|- |
|||
| Apples || £0.95 |
|||
|- |
|||
| Oranges || £0.85 |
|||
|- |
|||
| Pears || £1.15 |
|||
|} |
|||
== class <em>wikitable</em> == |
== class <em>wikitable</em> == |
||
| Line 99: | Line 67: | ||
|Butter |
|Butter |
||
|Yogurt |
|Yogurt |
||
| ⚫ | |||
= 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" |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
Make a table sortable. |
|||
<pre> |
|||
| ⚫ | |||
... |
|||
</pre> |
|||
'''Example:''' |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
|} |
|} |
||
Revision as of 09:26, 24 June 2013
This page contains examples of our table styles
Base Styles
class prettytable
| Shopping List | |||||
|---|---|---|---|---|---|
| Bread & Butter | Pie | Buns | Danish | Croissant | |
| Cheese | Ice cream | Butter | Yogurt | ||
class shadedtable
| Shopping List | |||||
|---|---|---|---|---|---|
| Bread & Butter | Pie | Buns | Danish | Croissant | |
| Cheese | Ice cream | Butter | Yogurt | ||
class wikitable
| Shopping List | |||||
|---|---|---|---|---|---|
| Bread & Butter | Pie | Buns | Danish | Croissant | |
| Cheese | Ice cream | Butter | Yogurt | ||
class zebra
| Shopping List | |||||
|---|---|---|---|---|---|
| Bread & Butter | Pie | Buns | Danish | Croissant | |
| Cheese | Ice cream | Butter | Yogurt | ||
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.
{| class="zebra sortable"
...
Example:
| Fruit | Price |
|---|---|
| Apples | £0.95 |
| Oranges | £0.85 |
| Pears | £1.15 |
