テーブル全体に対して組み込みスタイルを使用することも、テーブルの特定領域（行、列など）に個別のスタイルを設定することもできます。
組み込みスタイルのリストについては、 TableThemesクラスを参照してください。特定領域に設定可能なスタイルについては、TableThemeクラスを参照してください。
デフォルトでは表示されない部分や、デフォルトではスタイルが設定されていない部分に適用されるスタイルプロパティもあります。たとえば、 showFooterをtrueに設定しないかぎり、 lastFooterCellStyleは表示されません。次の表に示す Tableメソッドは、関連するテーブルスタイルがテーブルに表示されるために、事前にtrueに設定しておく必要があります。
| Table |
TableTheme |
| bandColumns |
firstColumnStripSize, firstColumnStripStyle, secondColumnStripSize, secondColumnStripStyle |
| bandRows |
firstRowStripSize, firstRowStripStyle, secondRowStripSize, secondRowStripStyle |
| highlightFirstColumn |
highlightFirstColumnStyle |
| highlightLastColumn |
highlightLastColumnStyle |
| showHeader |
firstHeaderCellStyle, lastHeaderCellStyle, headerRowStyle |
| showFooter |
footerRowStyle, firstFooterCellStyle, lastFooterCellStyle |
コードの使用
次のサンプルコードは、テーブルを作成し、組み込みスタイルを使用してテーブルスタイルを設定します。
| JavaScript |
コードのコピー
|
activeSheet.tables.add("Table1", 0, 0, 3, 3, GC.Spread.Sheets.Tables.TableThemes.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"); |
コードの使用
次のサンプルコードは、テーブルフッタのスタイルを表示します。
| JavaScript |
コードのコピー
|
|
window.onload = function(){
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
var activeSheet = spread.getActiveSheet();
//データを追加します。
for (var col = 1; col < 6; col++) {
for (var row = 2; row < 11; row++) {
activeSheet.setValue(row, col, row + col);
}
}
var tableStyle = new GC.Spread.Sheets.Tables.TableTheme();
var thinBorder = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.dotted);
tableStyle.wholeTableStyle(new GC.Spread.Sheets.Tables.TableStyle("aliceblue", "green", "bold 10pt arial", thinBorder, thinBorder, thinBorder, thinBorder, thinBorder, thinBorder, GC.Spread.Sheets.TextDecorationType.none));
var tStyleInfo = new GC.Spread.Sheets.Tables.TableStyle();
tStyleInfo.backColor = "green";
tStyleInfo.foreColor = "red";
tStyleInfo.borderBottom = new GC.Spread.Sheets.LineBorder("green", GC.Spread.Sheets.LineStyle.thin);
tStyleInfo.borderLeft = new GC.Spread.Sheets.LineBorder("yellow", GC.Spread.Sheets.LineStyle.medium);
tStyleInfo.borderTop = new GC.Spread.Sheets.LineBorder("green", GC.Spread.Sheets.LineStyle.thin);
tStyleInfo.borderRight = new GC.Spread.Sheets.LineBorder("green", GC.Spread.Sheets.LineStyle.thin);
tStyleInfo.font = "bold 11pt arial";
tableStyle.footerRowStyle(tStyleInfo);
var sTable = activeSheet.tables.add("Custom", 1, 1, 10, 5, tableStyle);
sTable.showFooter(true);
//フッタの値を設定します。
sTable.setColumnValue(0, "Total");
//フッタの数式を設定します。
sTable.setColumnFormula(4, "SUM(F3:F11)");
}
...
<div id="ss" style="height: 500px; width: 800px"></div>
|
関連トピック