Table Style Examples: Difference between revisions

From Xen
Jump to navigationJump to search
(Fixing description)
No edit summary
Line 97: Line 97:
'''Example:'''
'''Example:'''


{| class="zebra sortable"
{| class="prettytable sortable"
|-
|-
! Fruit !! Price
! Fruit !! Price

Revision as of 22:05, 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