Skip to main content Skip to secondary navigation

Customizing tables

Main content start

There are now utility classes available to customize the look and feel or your tables. You can add borders, background stripes to row or columns, and align cell content to the top, bottom or middle of the cell. 

See examples

Note: By default, the table layout is responsive to the user's screen-size and will fold into a two column layout with headers on the left for viewport that is 640px or less. This may cause some utility classes to be idle in mobile view. *Resize your viewport to across the 40em (640px) breakpoint to see the responsive table style live. 

Steps for adding classes:

  1. Create your table as outlined in the Tables page. Make sure to add your headers for accessible tables.
  2. Click the Source button. 
  3. Add the class name to your table and/or cell tag. 
admin UI for adding table classes

Borders

  1. class="vertical-border"
  2. class="horizontal-border" 

Example: Horizontal border

admin UI for adding table classes

 

Olympic Medals, country by the year
Year USA CHN RUS
2012 104 88 82
2008 110 100 72
2004 103 62 92

Striped Rows and Columns:

  1. table class="su-table-striped-rows-odd" 
  2. table class="su-table-striped-cols-odd" 
  3. table class="su-table-striped-rows-even" 
  4. table class="su-table-striped-cols-even" 

Example: Striped Odd Rows

admin UI for adding table classes

 

Olympic Medals, country by the year
Year USA CHN RUS
2012 104 88 82
2008 110 100 72
2004 103 62 92

Align Content

  1. td class="vertical-align-top"
  2. td class="vertical-align-bottom"

Example: Cell content align top

Note: alignment classes must be applied to each cell.

admin UI for adding table classes

Olympic Medals, country by the year
Year USA CHN RUS

2012

104

U.S. athletes left London with a total of 46 gold, 28 silver and 30 bronze. 

88

82

2008 110 100 72
2004 103 62 92

Add a "swipe" experience

table class="tablesaw-swipe"

Adding a "swipe" experience allows for direct manipulation of the table on your user's screen. The content of the table isn't compromised when a user adjusts their browser window. 

*Resize your viewport to across the 40em (640px) breakpoint to see the live change.

Movie Title Rank Year Rating Gross
Avatar 1 2009 83% $2.7B
Titanic 2 1997 88% $2.1B
The Avengers 3 2012 92% $1.5B
Harry Potter and the Deathly Hallows—Part 2 4 2011 96% $1.3B
Frozen 5 2013 89% $1.2B
Iron Man 3 6 2013 78% $1.2B
Transformers: Dark of the Moon 7 2011 36% $1.1B
The Lord of the Rings: The Return of the King 8 2003 95% $1.1B
Skyfall 9 2012 92% $1.1B
Transformers: Age of Extinction 10 2014 18% $1.0B

 

Examples

Striped Odd Rows

table class="su-table-striped-rows-odd"

 

Olympic Medals, country by the year
Year USA CHN RUS
2012 104 88 82
2008 110 100 72
2004 103 62 92

 

Striped Odd Columns

table class="su-table-striped-cols-odd"

 

Olympic Medals, country by the year
Year USA CHN RUS
2012 104 88 82
2008 110 100 72
2004 103 62 92

 

Vertical border

table class="vertical-border"

 

Olympic Medals, country by the year
Year USA CHN RUS
2012 104 88 82
2008 110 100 72
2004 103 62 92

 

Striped Even Rows with cell content top aligned

table class="su-table-striped-rows-even"
td class="vertical-align-top"
admin UI for adding table classes

Olympic Medals, country by the year
Year USA CHN RUS

2012

104

U.S. athletes left London with a total of 46 gold, 28 silver and 30 bronze. 

88

China's athletes left London with a total of 38 Gold,  31 Silver and 22 Bronze.

82

Russia originally won 18 medals and eight golds in track and field.

2008

110

U.S. athletes left with Beijing, China with 112 medals

100

Chinese athletes left with Beijing, China with 110 medals.

72

Russia athletes left with Beijing with 72 medals

2004

103

62

92


 

Striped Even Columns

table class="su-table-striped-cols-even"

 

Olympic Medals, country by the year
Year USA CHN RUS
2012 104 88 82
2008 110 100 72
2004 103 62 92

 

Horizontal border

table class="horizontal-border"

 

Olympic Medals, country by the year
Year USA CHN RUS
2012 104 88 82
2008 110 100 72
2004 103 62 92