Difference between revisions of "Table Style Examples"

From Xen
(Created page with "This page contains examples of our table styles == class <em>prettytable</em> == {| class="prettytable" !colspan="6"|Shopping List |- |rowspan="2"|Bread & Butter |Pie |Buns |Da…")
 
(class sortable)
 
(18 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.}}
 
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 15: Line 18:
 
|Butter
 
|Butter
 
|Yogurt
 
|Yogurt
  +
|}
  +
<br>
  +
{| class="prettytable"
  +
|-
  +
! Fruit
  +
! Price
  +
|-
  +
! Pears
  +
| £1.15
  +
|-
  +
! Apples
  +
| £0.95
  +
|-
  +
! Oranges
  +
| £0.85
 
|}
 
|}
   
  +
<br>
   
== class <em>sortable</em> ==
+
== class <em>shadedtable</em> ==
{| class="sortable"
+
{| class="shadedtable"
 
!colspan="6"|Shopping List
 
!colspan="6"|Shopping List
 
|-
 
|-
Line 33: Line 52:
 
|Yogurt
 
|Yogurt
 
|}
 
|}
  +
  +
<br>
  +
{| class="shadedtable"
  +
|-
  +
! Fruit
  +
! Price
  +
|-
  +
! Pears
  +
| £1.15
  +
|-
  +
! Apples
  +
| £0.95
  +
|-
  +
! Oranges
  +
| £0.85
  +
|}
  +
  +
<br>
  +
  +
== class <em>shadedtable2</em> ==
  +
{| class="shadedtable2"
  +
!colspan="6"|Shopping List
  +
|-
  +
|rowspan="2"|Bread & Butter
  +
|Pie
  +
|Buns
  +
|Danish
  +
|colspan="2"|Croissant
  +
|-
  +
|Cheese
  +
|colspan="2"|Ice cream
  +
|Butter
  +
|Yogurt
  +
|}
  +
  +
<br>
  +
{| class="shadedtable2"
  +
|-
  +
! Fruit
  +
! Price
  +
|-
  +
! Pears
  +
| £1.15
  +
|-
  +
! Apples
  +
| £0.95
  +
|-
  +
! Oranges
  +
| £0.85
  +
|}
  +
  +
<br>
   
 
== class <em>wikitable</em> ==
 
== class <em>wikitable</em> ==
Line 50: 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 64: 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

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


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 Sortable.gif icon to be shown, you need to add

{| class="prettytable sortable"
|-
! Fruit  {{Sortable}}   !! Price  {{Sortable}} 

Example:

Fruit Sortable.gif Price Sortable.gif
Pears £1.15
Apples £0.95
Oranges £0.85