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
|
To Do:
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 sortable properly out: e.g. some tables are full-width - the right way would be to add a widetable attribute, etc. |
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 |
