Karma

Minimal table

Bootstraped table with minimal look.

#	Contact	Company	Actions
4300	James Winters	CreativeMilk	Edit \| Delete
4301	Jim Jonnes	Envato	Edit \| Delete
4302	Xander Jacksons	WPTitans	Edit \| Delete
4303	Wim Monster	Microsoft	Edit \| Delete
4304	Jamie Peppler	Apple	Edit \| Delete

Top

Table with borders

Bootstraped table with borders and zebra stripes.

#	Contact	Company	Actions
4300	James Winters	Envato	Edit \| Delete
4300	Jim Jonnes	Envato	Edit \| Delete
4302	Xander Jacksons	WPTitans	Edit \| Delete
4303	Wim Monster	Microsoft	Edit \| Delete
4304	Jamie Peppler	Apple	Edit \| Delete

Top

Condensed table

Make tables more compact by cutting cell padding in half.

#	Contact	Company	Actions
4300	James Winters	Envato	Edit \| Delete
4302	Xander Jacksons	WPTitans	Edit \| Delete
4303	Wim Monster	Microsoft	Edit \| Delete
4304	Jamie Peppler	Apple	Edit \| Delete

Top

Optional row classes

Use contextual classes to color table rows.

#	Contact	Company	Actions
4300	James Winters	CreativeMilk	Edit \| Delete
4301	Jim Jonnes	Envato	Edit \| Delete
4302	Xander Jacksons	WPTitans	Edit \| Delete
4303	Wim Monster	Microsoft	Edit \| Delete

Responsive table

This custom build plugin can be used to switch between a basic table layout to a responsive compact table layout. You can choose the option to sort columns as is showen in the example below. This plugin uses a breaking point to switch betweend the 2 layout type's which can be set per table. Breakpoint is set at 600.

Responsive table

ID	Project	Status	Year	Progress
LP-402	Landings page	Acitve	2012	100%
PR-179	Project X	Waiting	2013	21%
PR-181	Project Y	Aproven	2012	96%
BL-008	Blog Update	Canceled	2013	100%
WB-008	New Website	Pending	2013	99%

Top

Table sorting

Table sorting plugin with bootstrapped theme.

Rendering engine	Browser	Platform(s)	Engine version	CSS grade
Trident	Internet Explorer 4.0	Win 95+	4	X
Trident	Internet Explorer 5.0	Win 95+	5	C
Trident	Internet Explorer 5.5	Win 95+	5.5	A
Trident	Internet Explorer 6	Win 98+	6	A
Trident	Internet Explorer 7	Win XP SP2+	7	A
Trident	AOL browser (AOL desktop)	Win XP	6	A
Gecko	firefox 1.0	Win 98+ / OSX.2+	1.7	A
Gecko	firefox 1.5	Win 98+ / OSX.2+	1.8	A
Gecko	firefox 2.0	Win 98+ / OSX.2+	1.8	A
Gecko	firefox 3.0	Win 2k+ / OSX.3+	1.9	A
Gecko	Camino 1.0	OSX.2+	1.8	A
Gecko	Camino 1.5	OSX.3+	1.8	A
Gecko	Netscape 7.2	Win 95+ / Mac OS 8.6-9.2	1.7	A
Gecko	Netscape Browser 8	Win 98SE+	1.7	A
Gecko	Netscape Navigator 9	Win 98+ / OSX.2+	1.8	A
Gecko	Mozilla 1.0	Win 95+ / OSX.1+	1	A
Gecko	Mozilla 1.1	Win 95+ / OSX.1+	1.1	A
Gecko	Mozilla 1.2	Win 95+ / OSX.1+	1.2	A
Gecko	Mozilla 1.3	Win 95+ / OSX.1+	1.3	A
Gecko	Mozilla 1.4	Win 95+ / OSX.1+	1.4	A
Gecko	Mozilla 1.5	Win 95+ / OSX.1+	1.5	A
Gecko	Mozilla 1.6	Win 95+ / OSX.1+	1.6	A
Gecko	Mozilla 1.7	Win 98+ / OSX.1+	1.7	A
Gecko	Mozilla 1.8	Win 98+ / OSX.1+	1.8	A
Gecko	Seamonkey 1.1	Win 98+ / OSX.2+	1.8	A
Gecko	Epiphany 2.20	Gnome	1.8	A
Webkit	Safari 1.2	OSX.3	125.5	A
Webkit	Safari 1.3	OSX.3	312.8	A
Webkit	Safari 2.0	OSX.4+	419.3	A
Webkit	Safari 3.0	OSX.4+	522.1	A
Webkit	OmniWeb 5.5	OSX.4+	420	A
Webkit	iPod Touch / iPhone	iPod	420.1	A
Webkit	S60	S60	413	A
Presto	Opera 7.0	Win 95+ / OSX.1+	-	A
Presto	Opera 7.5	Win 95+ / OSX.2+	-	A
Presto	Opera 8.0	Win 95+ / OSX.2+	-	A
Presto	Opera 8.5	Win 95+ / OSX.2+	-	A
Presto	Opera 9.0	Win 95+ / OSX.3+	-	A
Presto	Opera 9.2	Win 88+ / OSX.3+	-	A
Presto	Opera 9.5	Win 88+ / OSX.3+	-	A
Presto	Opera for Wii	Wii	-	A
Presto	Nokia N800	N800	-	A
Presto	Nintendo DS browser	Nintendo DS	8.5	C/A¹
KHTML	Konqureror 3.1	KDE 3.1	3.1	C
KHTML	Konqureror 3.3	KDE 3.3	3.3	A
KHTML	Konqureror 3.5	KDE 3.5	3.5	A
Tasman	Internet Explorer 4.5	Mac OS 8-9	-	X
Tasman	Internet Explorer 5.1	Mac OS 7.6-9	1	C
Tasman	Internet Explorer 5.2	Mac OS 8-X	1	C
Misc	Netfront 3.1	Embedded devices	-	C
Misc	Netfront 3.4	Embedded devices	-	A
Misc	Dillo 0.8	Embedded devices	-	X
Misc	Links	Text only	-	X
Misc	Lynx	Text only	-	X
Misc	IE Mobile	Windows Mobile 6	-	C
Misc	PSP browser	PSP	-	C
Other browsers	All others	-	-	U

Table with collapsable content

Hide/show extra content, use images, lists, text or what you want. The hidden content can be triggerd with the delails button. You can set the collapsed content open at default. You can use small tooltip buttons inside the table, both in a th or td cell.

	ID	Project	Actions
	LP-402	Landings page	Details Delete
Details Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed enim elit, ultrices ultrices facilisis in, ultrices ut lorem. Nam bibendum iaculis tellus, at mattis lectus blandit sed. In enim lectus, scelerisque quis rutrum ut, adipiscing vel leo. Pellentesque commodo, libero in sollicitudin adipiscing, massa massa molestie metus, egestas tincidunt urna arcu quis urna. Sed gravida convallis commodo. Nunc vehicula ligula at velit accumsan consectetur. Aenean augue tortor, auctor cursus tempus vitae, molestie accumsan lectus. Vivamus egestas, enim id interdum euismod, sem libero tempor lorem, vitae dignissim magna odio non magna. Etiam auctor congue ante, et consectetur nulla adipiscing quis. Sed sit amet nibh tellus. Maecenas varius sodales nunc nec sollicitudin. Suspendisse condimentum ultricies consectetur. Etiam adipiscing tempus quam a suscipit. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc a placerat urna.
	PR-179	Project X	Details Delete

	PR-181	Project Y	Details Delete
Sales the last 5 months December 2012 4099 November 2012 5719 October 2012 3801 September 2012 4546 August 2012 997 Sales the last week Monday 12/12 293 Tuesday 12/11 1209 Wednesday 12/10 445 Thursday 12/09 2094 friday 12/09 1455
	BL-008	Blog Update	Details Delete
Details Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed enim elit, ultrices ultrices facilisis in, ultrices ut lorem. Nam bibendum iaculis tellus, at mattis lectus blandit sed. In enim lectus, scelerisque quis rutrum ut, adipiscing vel leo. Pellentesque commodo, libero in sollicitudin adipiscing, massa massa molestie metus, egestas tincidunt urna arcu quis urna. Sed gravida convallis commodo. Nunc vehicula ligula at velit accumsan consectetur. Aenean augue tortor, auctor cursus tempus vitae, molestie accumsan lectus. Vivamus egestas, enim id interdum euismod, sem libero tempor lorem, vitae dignissim magna odio non magna. Etiam auctor congue ante, et consectetur nulla adipiscing quis. Sed sit amet nibh tellus. Maecenas varius sodales nunc nec sollicitudin. Suspendisse condimentum ultricies consectetur. Etiam adipiscing tempus quam a suscipit. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc a placerat urna.
	WB-008	New Website	Details Delete
Details Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed enim elit, ultrices ultrices facilisis in, ultrices ut lorem. Nam bibendum iaculis tellus, at mattis lectus blandit sed. In enim lectus, scelerisque quis rutrum ut, adipiscing vel leo. Pellentesque commodo, libero in sollicitudin adipiscing, massa massa molestie metus, egestas tincidunt urna arcu quis urna. Sed gravida convallis commodo. Nunc vehicula ligula at velit accumsan consectetur. Aenean augue tortor, auctor cursus tempus vitae, molestie accumsan lectus. Vivamus egestas, enim id interdum euismod, sem libero tempor lorem, vitae dignissim magna odio non magna. Etiam auctor congue ante, et consectetur nulla adipiscing quis. Sed sit amet nibh tellus. Maecenas varius sodales nunc nec sollicitudin. Suspendisse condimentum ultricies consectetur. Etiam adipiscing tempus quam a suscipit. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc a placerat urna.

Top

Table with a progressbar

Use bootstrap progressbars inside a table. We have highlighted the first cell of each row.

ID	Project	Status
LP-402	Landings page	44% Complete 44%
PR-179	Project X	79% Complete 79%
PR-181	Project Y	18% Complete 18%
BL-008	Blog Update	61% Complete 61%
WB-008	New Website	100% Complete 100%

Top

Table with icons

Action icons instead of button or text links.

ID	Person	Company
4300	James Winters	CreativeMilk
4301	Jim Jonnes	Envato
4302	Xander Jacksons	WPTitans
4303	Wim Monster	Microsoft
4304	Jamie Peppler	Apple

Top

Inside a widget

ID	Person	Action
4300	James Winters	Delete
4301	Jim Jonnes	Delete
4302	Xander Jacksons	Delete
4303	Wim Monster	Delete
4304	Jamie Peppler	Delete

With padding

ID	Person	Action
4300	James Winters	Delete
4301	Jim Jonnes	Delete
4302	Xander Jacksons	Delete
4303	Wim Monster	Delete

Top

Form elements and footer

Use form elements inside a table, from basic elements to plugins(select). Use a footer to include an pagination and buttons.

	Project	Live	Tags	Action
		Yes No
		Yes No
		Yes No
		Yes No
		Yes No
	1 2 3

/webapp

Tables

Minimal table

Table with borders

Condensed table

Optional row classes

Responsive table

Responsive table

Table sorting

Table with collapsable content

Details

Sales the last 5 months

Sales the last week

Details

Details

Table with a progressbar

Table with icons

Inside a widget

With padding

Form elements and footer

January 2012
Mon	Tue	Wed	Thu	fri	Sat	Sun
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5