You can set styles for many areas of a table with the current version of SpreadJS. You can use a built-in style for the entire table or you can set styles for specific areas. The TableStyles class has a complete list of the built-in table styles. The following example creates a table and sets the table style using a built-in style. 
JavaScript
activeSheet.addTable("Table1", 0, 0, 3, 3, GcSpread.Sheets.TableStyles.dark1()); activeSheet.getCell(0,0).text("Name"); activeSheet.getCell(0,1).text("Value"); activeSheet.getCell(0,2).text("T/F"); activeSheet.getCell(1,0).text("AW"); activeSheet.getCell(1,1).text("5"); activeSheet.getCell(1,2).text("T");
Some style methods apply to areas that are not visible or do not have a style setting by default. For example, the lastFooterCellStyle is not displayed unless showFooter is true. The following table lists the SheetTable method that must be true so that the associated table style is displayed in the table.
SheetTable method
TableStyle method
bandColumns
firstColumnStripStyle, firstColumnStripSize, secondColumnStripSize, secondColumnStripStyle
bandRows
firstRowStripSize, firstRowStripStyle, secondRowStripSize, secondRowStripStyle
highlightFirstColumn
highlightFirstColumnStyle
highlightLastColumn
highlightLastColumnStyle
showFooter
lastFooterCellStyle, firstFooterCellStyle, footerRowStyle
showHeader
firstHeaderCellStyle, lastHeaderCellStyle, headerRowStyle
The following example displays a style for the table footer. 
JavaScript
$(function () { var spread = new GcSpread.Sheets.Spread($("#ss")[0]); var sheet = spread.getActiveSheet();//Add data for (var col = 1; col < 6; col++) { for (var row = 2; row < 11; row++) { sheet.setValue(row, col, row + col); } }var tableStyle = new GcSpread.Sheets.TableStyle(); var thinBorder = new GcSpread.Sheets.LineBorder("black", GcSpread.Sheets.LineStyle.dotted); tableStyle.wholeTableStyle(new GcSpread.Sheets.TableStyleInfo("aliceblue", "green", "bold 10pt arial", thinBorder, thinBorder, thinBorder, thinBorder, thinBorder, thinBorder)); var tStyleInfo = new GcSpread.Sheets.TableStyleInfo(); tStyleInfo.backColor = "green"; tStyleInfo.foreColor = "red"; tStyleInfo.borderBottom = new GcSpread.Sheets.LineBorder("green", GcSpread.Sheets.LineStyle.thin); tStyleInfo.borderLeft = new GcSpread.Sheets.LineBorder("yellow", GcSpread.Sheets.LineStyle.medium); tStyleInfo.borderTop = new GcSpread.Sheets.LineBorder("green", GcSpread.Sheets.LineStyle.thin); tStyleInfo.borderRight = new GcSpread.Sheets.LineBorder("green", GcSpread.Sheets.LineStyle.thin); tStyleInfo.font = "bold 11pt arial"; tableStyle.footerRowStyle(tStyleInfo); var sTable = sheet.addTable("Custom", 1, 1, 10, 5, tableStyle); sTable.showFooter(true); //set footer value sTable.setColumnValue(0, "Total"); //set footer formula sTable.setColumnFormula(4, "SUM(F3:F11)"); }) ...
Note: SpreadJS requires a browser that supports HTML5.
MESCIUS inc.