Tables

Page Last modified 09 Nov 2020

1 min read

Documentation and examples of table element along with it's styles and variants.

Menu

Contents

Tables - sortable and not sortable

      
          Product - not sortable
          Price - sortable
        
          Ice cream
          50
        
          Pony
          75
        
          Car
          9999999

Product - not sortable	Price - sortable
Ice cream	50
Pony	75
Car	9999999

Table with form elements

	Title	Stuff
	Title	with class noborder
	Title	with class noborder

Invisible table

Add invisible class to the table tag in order to make the table discreet without any visible borders.

      
          Even table header
          Odd table header
        
          Even table item
          Odd table item
        
          Odd table item
          Even table item

Muted table

Add invisible class to the table tag in order to make the table discreet without any visible borders.

Add even class to each tr in order to add back a muted border color

Even table header	Odd table header
Even table item	Odd table item
Odd table item	Even table item

Next table without thead tags

Even table item	Odd table item
Odd table item	Even table item

Plain table

Add plain class to the table tag in order to make the table look like a spreadsheet table.

      
          Even table header
          Odd table header
        
          Even table item
          Odd table item
        
          Odd table item
          Even table item

Vertical listing table

Add vertical listing classes to the table tag in order to make the table vertical.

Table heading	Odd table item
Another heading	Even table item

Striped table

Add odd and even classes to each tr tag in order to add a stripe effect to table rows or add listing class to the table and these classes will be added by javascript.

      
          Table heading
          Another heading (sortable, click to sort)
          Fixed column (not sortable)
        
          Odd table item
          Item 1
          Another item
        
          Even table item
          Item 2
          Yet another item
        
          Odd table item
          Item 3
          And one more item

Table heading	Another heading (sortable, click to sort)	Fixed column (not sortable)
Odd table item	Item 1	Another item
Even table item	Item 2	Yet another item
Odd table item	Item 3	And one more item

Datatable styled table

This legacy table style is not currently used anywhere however for completion sake we also document this style as well.

      
        Static Content listing
        
           Title 
           Size 
           Modified 
           State 
           Other 
        


        
          Title 1
          10 kB
          2006-01-10 10:20
          Published
          Other info
        

          Title 2
          20 kB
          2006-03-13 10:20
          Unpublished
          Other info
        

          Title 3
          50 kB
          2006-02-10 10:20
          Unpublished
          Other info
        

          Title 4
          20 kB
          2006-03-13 10:20
          Unpublished
          Other info
        

      
    

Static Content listing
Title	Size	Modified	State	Other
Title 1	10 kB	2006-01-10 10:20	Published	Other info
Title 2	20 kB	2006-03-13 10:20	Unpublished	Other info
Title 3	50 kB	2006-02-10 10:20	Unpublished	Other info
Title 4	20 kB	2006-03-13 10:20	Unpublished	Other info