Table

The HTML table model allows authors to arrange data - text, preformatted text, images, links, forms, form fields, other tables, etc. into rows and columns of cells. Table is an ubiquitous feature of most user interfaces, regardless of a site's content or function. It's design and use is therefore an important factor in the overall user experience.

Bootstrap Table

Bootstrap provides table with its own custom table styles. This simple table can be also converted to table with striped rows, bordered table, table with hover rows, condensed table, table with contextual classes and responsive table.

Name	Code	State/City	End Date of Work	Status	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet

Propeller Table

The Propeller Table is an enhanced version of the Bootstrap standard HTML <table>. Include .pmd-table followed by .table to use Propeller table.

Name	Code	State/City	End Date of Work	Status	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni		Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet

Card Table

Card Table reformats each row into a card for narrow screens. This way user can view complete information without horizontal scroll. Add .pmd-table-card to convert simple table into Card Table.

Name	Code	State/City	End Date of Work	Status	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet

Nested Table

Nested Table is a table inside a table. It can have several rows for each row of its parent table. Add .child-table to the tr where you want to nest your table. Then add colspan to the td followed by above tr with the value equal to the number of columns in sub-table. Add .table-sm followed by .table in nested table tag to make it look like sub-table.

Name

Code

State/City

End Date of Work

Status

Timesheet

Giacomo Guilizzoni

JONEA140

Melbourne

1 June 2014

Active

Timesheet

Giacomo Guilizzoni

JONEA140

Melbourne

1 June 2014

Active

Timesheet

Giacomo Guilizzoni

JONEA140

Melbourne

1 June 2014

Active

Timesheet

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Giacomo Guilizzoni

Melbourne

1 June 2014

Active

Timesheet

Giacomo Guilizzoni

JONEA140

Melbourne

1 June 2014

Active

Timesheet

Giacomo Guilizzoni

JONEA140

Melbourne

1 June 2014

Active

Timesheet

Striped Rows Table

Create Striped Rows Table by adding .table-striped in your code.

Name	Code	State/City	End Date of Work	Status	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet

Bordered Table

Create Bordered Table by adding .table-bordered in your code.

Name	Code	State/City	End Date of Work	Status	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet

Hoverable Rows Table

Create Hoverable Rows Table by adding .table-hover in your code.

Name	Code	State/City	End Date of Work	Status	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet

Small Table

Create Small Table by adding .table-sm in your code.

Name	Code	State/City	End Date of Work	Status	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet

Contextual Table

To create Contextual Table add the class on row namely .table-active for active, .table-success for success, .table-info for info, .table-warning for warning, and .table-danger for danger.

#	Column heading	Column heading	Column heading
1	Column content	Column content	Column content
2	Column content	Column content	Column content
3	Column content	Column content	Column content
4	Column content	Column content	Column content
5	Column content	Column content	Column content
6	Column content	Column content	Column content
7	Column content	Column content	Column content
8	Column content	Column content	Column content
9	Column content	Column content	Column content

Inverse Table

Create Inverse Table by adding .table-inverse in your code.

Name	Code	State/City	End Date of Work	Status	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	1 June 2014	Active	Timesheet

Reflow Table

Create Reflow Table by adding .table-reflow in your code.

Name	Code	State/City	Incharge Name	Mobile	Type of Work	End Date of Work	Status	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	Giacomo Guilizzoni	9625145236	9625145236	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	Giacomo Guilizzoni	9625145236	9625145236	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	Giacomo Guilizzoni	9625145236	9625145236	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	Giacomo Guilizzoni	9625145236	9625145236	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	Giacomo Guilizzoni	9625145236	9625145236	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	Giacomo Guilizzoni	9625145236	9625145236	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	Giacomo Guilizzoni	9625145236	9625145236	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	Giacomo Guilizzoni	9625145236	9625145236	1 June 2014	Active	Timesheet
Giacomo Guilizzoni	JONEA140	Melbourne	Giacomo Guilizzoni	9625145236	9625145236	1 June 2014	Active	Timesheet

ESF Table

Create ESF Table by adding esf-table in your code.

Gruppe 1
Nr.	Navn	1	2	3	4	5	P	Pla.
1	Ove Pedersen	6 0	2 0	3 0	4 0	5 1	1	5
2	Torsten Lindestrøm	5 1	1 1	6 1	3 1	4 1	5	1
3	Jesper Lahn Rasmussen	4 1	5 ½	1 1	2 0	6 1	3½	2
4	Sven Michelsen	3 0	6 1	5 1	1 1	2 0	3	3
5	Svend Madsen	2 0	3 ½	4 0	6 1	1 0	1½	4
6	Ejvind Boddum	1 1	4 0	2 0	5 0	3 0	1	6

ESF Compressed Table

Create ESF compressed table by adding table-compressed in your code.

Gruppe 1
Nr.	Navn	1	2	3	4	5	P	Pla.
1	Ove Pedersen	6 0	2 0	3 0	4 0	5 1	1	5
2	Torsten Lindestrøm	5 1	1 1	6 1	3 1	4 1	5	1
3	Jesper Lahn Rasmussen	4 1	5 ½	1 1	2 0	6 1	3½	2
4	Sven Michelsen	3 0	6 1	5 1	1 1	2 0	3	3
5	Svend Madsen	2 0	3 ½	4 0	6 1	1 0	1½	4
6	Ejvind Boddum	1 1	4 0	2 0	5 0	3 0	1	6

ESF Tiny Table

Create ESF tiny table by adding table-tiny in your code.

Resultater
Nr.	Navn	1	2	3	4	5	6	7	Ialt
1	Jens Kr. Pedersen		1	½		0	0		1½
2	Sven Michelsen	0				½			½
3	Hans Viborg	½			1		1	1	3½
4	Claus Rasmussen			0		0			0
5	Jesper Lahn Rasmussen	1	½				1	1	3½
6	Poul Fl. Fries Nielsen	1		0	1	0		0	2
7	Lars Husum		0			0	1		1

ESF Condensed Table

Create ESF condensed table by adding table-condensed in your code.

Holdskak – spillerstatistik
Nr	Navn	1	2	3	4	5	6	7	P	Ap	Pct	Fv	Av	Ro	Rn	Rd	Eo	En	Ed	Pst
1	Iver Poulsen	½	½	0	½	½	0		2.0	6	33.3%	1.80	0.20	2148	2152	4	2151	2154	3	2174
2	FM Ove Weiss Hartvig	½	1		0	½	1		3.0	5	60.0%	2.25	0.75	2136	2151	15	2156	2172	16	2172
3	Torsten Lindestrøm	½	½	½	0	½	0	½	2.5	7	35.7%	2.85	-0.35	2107	2100	-7	2210	2189	-21	2066
5	Ole Bønnelykke	0	½	0	0	0	½	½	1.5	7	21.4%	2.30	-0.80	2016	2000	-16	2032	2017	-15	1915
6	Henrik Tranberg Jensen	0	0	0	0	½	½		1.0	6	16.7%	1.95	-0.95	1959	1931	-28	2030	2005	-25	1809
7	Ingolf Nikolajsen	1	½	0	½	1	½	0	3.5	7	50.0%	2.25	1.25	1936	1974	38	1989	2004	15	2073
8	Steven Jessen	½	0	0		0		0	0.5	5	10.0%	1.60	-1.10	1920	1887	-33	1890	1874	-16	1696
10	Jesper L. Rasmussen	0	½	0	½	0	½	0	1.5	7	21.4%	2.20	-0.70	1896	1875	-21	1962	1943	-19	1819
		3.0	3.5	0.5	2.0	3.0	3.0	1.0	40.0	136	29.4%	38.70	1.30			94			-167

ESF Inverse Table

Create ESF inverse table by adding table-inverse in your code.

Grp.	Hvid		Sort	Res.
M	Lars Husum	-	Jesper Lahn Rasmussen	0–1
B1	Sven Michelsen	-	Heino Carstensen	½–½
B1	Bjørn Hebsgaard Nielsen	-	Andreas Kinch	½–½
B2	Steen Nielsen	-	Karl Carlsen	0–1
B2	Joel Nødskov Christensen	-	Vagn Konradsen	½–½

Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the Table. The table lists the available classes and their effects.

Propeller Classes	Effect	Remark
`.pmd-table`	Wrapper class for card layout.	Required
`.pmd-z-depth`	Used to provide shadow depth to card. Shadow depth inceases with the counting (pmd-z-depth, pmd-z-depth-1...pmd-z-depth-5)	Optional
`.pmd-card-title`	Defines header section of the card	Optional
`.pmd-card-body`	Defines content section of the card.	Optional
`.pmd-card-actions`	Defines section for the action buttons/links for the card.	Optional
`.table-responsive`	Add this class to create a responsive table	Optional
`.child-table`	Add this class to create a child table	Required
`.table-sm`	Add this class to format a child table	Optional
`.esf-table`	Add this class to create an ESF chess result table	Optional
`.table-compressed`	Add this class to create a compressed ESF chess result table	Optional
`.table-tiny`	Add this class to create a smaller table	Optional
`.table-condensed`	Add this class to create a table witd a condensed font	Optional