1. 內置表格樣式

通過TableStyle 類，您能夠查看所有的內置表格樣式。

讓我們通過下面的例子：創建表格，并為它設置內置樣式。

代碼如下：

1: activeSheet.addTable("Table1", 0, 0, 3, 3, GcSpread.Sheets.TableStyles.dark1()); 
  2: activeSheet.getCell(0,0).text("Name");  
  3: activeSheet.getCell(0,1).text("Value");  
  4: activeSheet.getCell(0,2).text("T/F");  
  5: activeSheet.getCell(1,0).text("AW");  
  6: activeSheet.getCell(1,1).text("5");  
  7: activeSheet.getCell(1,2).text("T"); 

2. 樣式函數開啟的秘密

為什么有的樣式函數設置之后不起作用呢？那是因為有的樣式函數所呈現的區域不可見或者缺乏默認的樣式設置。例如，只有在ShowFooter值為True時，lastFooterCellStyle才有機會顯示。

下表就列出了樣式函數起作用的前提條件。第一列中的SheetTable必須為true，第二列中樣式函數才能在表格對應的區域進行樣式呈現。

3. 表腳樣式示例

下面這個例子中我們設置了表腳樣式：

代碼如下：

1: $(function () { 
  2:             var spread = new GcSpread.Sheets.Spread($("#ss")[0]);  
  3:             var sheet = spread.getActiveSheet();  
  4:   
  5: //Add data  
  6: for (var col = 1; col < 6; col++) {  
  7:     for (var row = 2; row < 11; row++) {  
  8:        sheet.setValue(row, col, row + col);  
  9:     }  
 10: }  
 11: var tableStyle = new GcSpread.Sheets.TableStyle();  
 12: var thinBorder = new GcSpread.Sheets.LineBorder("black", GcSpread.Sheets.LineStyle.dotted);  
 13: tableStyle.wholeTableStyle(new GcSpread.Sheets.TableStyleInfo("aliceblue", "green", "bold 10pt arial",  
 14: thinBorder, thinBorder, thinBorder, thinBorder, thinBorder, thinBorder));  
 15:    
 16: var tStyleInfo = new GcSpread.Sheets.TableStyleInfo();  
 17: tStyleInfo.backColor = "green";  
 18: tStyleInfo.foreColor = "red";  
 19: tStyleInfo.borderBottom = new GcSpread.Sheets.LineBorder("green", GcSpread.Sheets.LineStyle.thin);  
 20: tStyleInfo.borderLeft = new GcSpread.Sheets.LineBorder("yellow", GcSpread.Sheets.LineStyle.medium);   
 21: tStyleInfo.borderTop = new GcSpread.Sheets.LineBorder("green", GcSpread.Sheets.LineStyle.thin);  
 22: tStyleInfo.borderRight = new GcSpread.Sheets.LineBorder("green", GcSpread.Sheets.LineStyle.thin);  
 23: tStyleInfo.font = "bold 11pt arial";  
 24: tableStyle.footerRowStyle(tStyleInfo);  
 25: var sTable = sheet.addTable("Custom", 1, 1, 10, 5, tableStyle);  
 26: sTable.showFooter(true);  
 27: //set footer value  
 28: sTable.setColumnValue(0, "Total");  
 29: //set footer formula  
 30: sTable.setColumnFormula(4, "SUM(F3:F11)");  
 31:         })  
 32: ...  
 33: <div id="ss" style="width:500px;height:500px"></div>