Difference between revisions of "Table Style Examples"

From Xen
(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:
 
|}
 
|}
   
== class <em>sortable</em> ==
 
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 !! Price
 
|-
 
| Apples || £0.95
 
|-
 
| Oranges || £0.85
 
|-
 
| Pears || £1.15
 
|}
 
You can use this attribute with other table styles.
 
{| class="zebra sortable"
 
|-
 
! Fruit !! Price
 
|-
 
| Apples || £0.95
 
|-
 
| 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"
  +
|-
  +
! Fruit !! Price
  +
|-
  +
| Apples || £0.95
  +
|}
  +
  +
== class <em>sortable</em> ==
  +
Make a table sortable.
  +
<pre>
  +
{| class="zebra sortable"
  +
...
  +
</pre>
  +
  +
  +
'''Example:'''
  +
  +
{| class="zebra sortable"
  +
|-
  +
! Fruit !! Price
  +
|-
  +
| Apples || £0.95
  +
|-
  +
| Oranges || £0.85
  +
|-
  +
| Pears || £1.15
 
|}
 
|}
   

Revision as of 09:26, 24 June 2013

Icon todo.png 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