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