Table Style Examples

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	} 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. {| class="prettytable sortable" ... Example: Fruit Price Pears £1.15 Apples £0.95 Oranges £0.85