表

要約：

Table クラスは、クラスのグラフィカルな子を表形式で配置する Grid のサブクラスです。
Table クラスは柔軟性に富んでいます。このクラスは複雑なセル配置をサポートし、プログラムによる変更が可能です。
グラフィカルオブジェクトをセル単位、行単位または列単位で表に追加することができます。

Table は Grid のサブクラスです。グラフィカルな子を表形式で配置します。表に追加する各オブジェクトは、1 つ以上のテーブルセルに関連付けられます。

テーブルセルは行および列に配置され、オブジェクトを Table に追加すると自動的に作成されます。各テーブルセルは TableCell クラスで表されます。詳細については、「TableCell、TableColumn および TableRow の使用」を参照してください。

さまざまな順序で表にセルを追加することができます。1 つのセルを複数の行または列に広げることができます。

table のテキストプロシージャを使用すると、基本的な表を簡単に作成できます。プログラムを使用して表を変更する必要がない場合は、table row および cell を使用して行単位やセル単位で表をレイアウトすることができます。例については、「表のテキスト書式」のセクションを参照してください。

Curl® 言語では、基本的なページレイアウトに表を使用する必要はありません。各種レイアウトツールを使用して、アプレットのグラフィック要素を配置することができます。詳細については「グラフィカルコンテナ」および「エラスティックとページレイアウト」を参照してください。

Curl 言語では、表の作成方法が多数あります。表はプログラムによる変更が可能であることから、表の作成方法はほぼ無制限にあります。ただし、非常に簡単な表の作成方法もあります。

次の 3 つの例は、異なる方法で同じ表を作成しています。それらは次のとおりです。

table
このテキストプロシージャで行単位およびセル単位で表される表を作成します。これはスタティックなテーブルを作成する簡単な方法です。
row-prototype
このプロシージャで行単位で表を作成します。同様のプロシージャ column-prototype では、列単位で表を作成します。この方法で表を作成すると Table オブジェクトが作成され、プログラムはこのクラスのメソッドにアクセスできるようになります。
プログラムによる作成
次の 3 番目の例では、プロシージャが呼び出されると与えられたデータを配置して表を作成します。このプロシージャは、column-prototype を基にして Table.add メソッドを使用しています。

例: table テキストプロシージャで表を作成

{table

    ||The first row is created with 'header-row'
    ||and 'header-cell'. This makes the text bold.

    {header-row
        background = "gray",
        {skip}
        {header-cell Su}
        {header-cell Mo}
        {header-cell Tu}
        {header-cell We}
        {header-cell Th}
        {header-cell Fr}
        {header-cell Sa}
    }

    ||The next two rows are created with 'row' and 'cell'.

    {row
        {cell Sunrise}
        {cell 6:52}
        {cell 6:53}
        {cell 6:54}
        {cell 6:55}
        {cell 6:56}
        {cell 6:57}
        {cell 6:57}
    }
    {row
        {cell Sunset}
        {cell 4:15}
        {cell 4:15}
        {cell 4:15}
        {cell 4:15}
        {cell 4:15}
        {cell 4:15}
        {cell 4:14}
    }
}

例: row-prototype プロシージャで表を作成

{Table

    ||Each row is created with 'row-prototype'.  This procedure can set options
    ||for the row.  It takes graphical objects (such as these strings) as its arguments.

    {row-prototype
        font-weight = "bold",
        background = "gray",
        {skip}, "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"
    },
    {row-prototype
        "Sunrise", "6:52", "6:53", "6:54", "6:55", "6:56", "6:57", "6:57"
    },
    {row-prototype
        "Sunset", "4:15", "4:15", "4:15", "4:15", "4:15", "4:15", "4:14"
    }
}

例: プログラムにより表を作成

||Creates a Table object and assigns it to a variable

{let table:Table =
    {Table
        {column-prototype
            {skip}, "Sunrise", "Sunset"
        }
    }
}

||Defines a procedure 'column' that will take data, arrange it
||in a column, and add that column to the table.

{define-proc {column day:any, sr:String, ss:String}:void
    {table.add
        {column-prototype
            {cell
                background = "gray",
                font-weight = "bold",
                {value day}
            },
            sr,
            ss
        }
    }
}

||Display the table

{value table}

||Multiple calls to the procedure, 'column'.  Add another.

{column "Su", "6:52", "4:15"}
{column "Mo", "6:53", "4:15"}
{column "Tu", "6:54", "4:15"}
{column "We", "6:55", "4:15"}
{column "Th", "6:56", "4:15"}
{column "Fr", "6:57", "4:15"}
{column "Sa", "6:57", "4:14"}

表にオブジェクトを追加

Table にグラフィカルオブジェクトを明示的に追加する方法には、セル単位、行単位または列単位があります。

グラフィカルオブジェクトの場合、Table オブジェクトがグラフィカルな親となるグラフィック階層にオブジェクトを明示的に追加するには Table.add メソッドを使用します。オブジェクトを追加するその他の方法としては、グラフィック階層をミラーリングする Curl 言語式の使用が挙げられます。

次の例で、オブジェクトを Table に追加するさまざまな方法を示します。これらの例で、Table のいくつかの機能の概要に触れます。詳細については、後続のセクションを参照してください。

最初の例は、オブジェクトを Table に直接追加します。Curl® Runtime は非グラフィカルオブジェクトをグラフィカルオブジェクトに自動的に変換し、TableCell オブジェクトをインスタンス化して TableCell オブジェクトを Table に追加される各グラフィカルオブジェクトに関連付けます。

例: 表にオブジェクトを追加

\|\|Adding objects to three table cells \|\|on a cell-by-cell basis {Table background="beige", "first", {RectangleGraphic fill-color="blue", width=0.5cm, height=0.5cm}, {text third} }

次の例は、Table にオブジェクトを行単位で追加します。

次の例は、Table にオブジェクトをセル単位で追加します。cell-prototype プロシージャが呼び出されると、コードがテーブルセルの位置を引数として与えます。テーブルセルの位置は 0 で始まる行および列番号で表されることに注意してください。テーブルセルの位置の詳細については、「オブジェクトを特定の位置のテーブルセルに追加」のセクションを参照してください。

セルの位置を空の状態にできることに特に留意してください。

次の例は Table.add を使用し、プログラムによりオブジェクトを Table に追加します。

例: 表に列を追加

|| Create Table
{value
    let t:Table={Table background="beige"}

    ||Add objects on a column-by-column and cell-by-cell basis,
    ||by calling Table.add and specifying the cell location
    {t.add {column-prototype "first",
               {RectangleGraphic fill-color="blue",
                   width=0.5cm,
                   height=0.5cm}}}
    {t.add {column-prototype {text third}}}
    {t.add {CommandButton label="fourth"}, row=1, column=2}
    t
}

挿入ポイントの記録

Table は、Grid なので、先に追加されたオブジェクトの上に後で追加されるオブジェクトをスタックして、オブジェクトの一部または全体を隠してしまうことができます。したがって、Table に追加したオブジェクトを記録して、オブジェクトが配置されたテーブルセルを認識できることが大切になります。

Table へのテーブルセルの追加は、テキストエディタでドキュメントにテキストを追加するのに似ています。テキストエディタでは、表示される挿入ポイントまたはカーソルがテキストの追加位置を示します。同様に Table には挿入ポイントがあり、これは見えませんが次のルールに従って移動します。

テーブルセルの追加後
- 次に追加する要素でテーブルセルが一杯になる場合、内容が追加される前に挿入ポイントは次のテーブルセルの上部に移動します。
- 次に追加する要素で行が一杯になる場合は、内容が追加される前に挿入ポイントは次の行の最初のテーブルセルに移動します。
- 次に追加する内容で列が一杯になる場合は、追加される前に挿入ポイントは次の列の最初のテーブルセルに移動します。
行に追加後、
- 次に追加する内容でテーブルセルが一杯になる場合は、内容が追加される前に挿入ポイントは次の行の最初のテーブルセルに移動します。
- 次に追加する内容で行が一杯になる場合も、追加される前に挿入ポイントは次の行の最初のテーブルセルに移動します。
列を追加後、
- 次に追加する内容でテーブルセルが一杯になる場合は、追加される前に挿入ポイントは次の列の最初のテーブルセルに移動します。
- 次に追加する内容で列が一杯になる場合も、追加される前に挿入ポイントは次の列の最初のテーブルセルに移動します。

オブジェクトを特定の位置のテーブルセルに追加

セルの内容を Table に追加する際に、前のセクションで説明した既定の配置パターンを使用せずに、次のように Table 内の位置を指定することができます。

これらは Table 内の位置を指定するキーワード引数です。次に Table 内のセルの位置を (row, column) で示します。

たとえば、次のコードで示すようにテーブルセル (0,2) と (2,1) の位置にオブジェクトを追加するように指定できます。追加するオブジェクトでテーブルセルの既存の内容が隠れることに注意してください。

例: 特定のテーブルセルにデータを追加

{Table cell-border-color="black",
    cell-border-width=1pt,
    background="green",
    columns=4,
    {cell-prototype "a cell"},
    {cell-prototype "a cell"},
    {cell-prototype "a cell"},
    {cell-prototype "a cell"},
    {cell-prototype "a cell"},
    {cell-prototype "a cell"},
    {cell-prototype "a cell"},
    {cell-prototype "a cell"},
    {cell-prototype "a cell"},
    {cell-prototype "a cell"},
    {cell-prototype "a cell"},
    {cell-prototype "a cell"},
    {cell-prototype row=0,
        column=2,
        background="beige",
        "Row 0, Column 2"},
    {cell-prototype row=2,
        column=1,
        background="beige",
        "Row 2, Column 1"}
}

複数のテーブルセルに広がるオブジェクトの追加

特定のテーブルセルの指定に加え、追加するオブジェクトが一定数のテーブルセルに拡張して配置されるよう指定することもできます。この場合、水平方向の複数の列、または垂直方向に複数の行に拡張することができます。次のキーワードは cell-prototype プロシージャで指定できます。

テーブルセルの追加時に挿入ポイントが移動する順序に留意してください。この順序は後で追加される各オブジェクトの位置に影響します。

次の例では、obj 3 は垂直方向に 2 つのテーブルセルに広がっていますが、この効果を完全に見ることができません。それは、obj 7 が同じテーブルセルの 1 つに追加され、先に追加されたオブジェクトの上に表示されているからです。

ピクセルが隠蔽されないように、skip プロシージャを使用して既に内容が含まれているテーブルセルの位置をスキップすることができます。

例: skip プロシージャの使用

{Table columns=4,
    border-color="black",
    border-width=1pt,
    cell-border-color="black",
    cell-border-width=1pt,
    background="beige",
    {cell-prototype "obj 1"},
    {cell-prototype "obj 2"},
    {cell-prototype rowspan=2, color="orange",
        "obj 3 vertically spans two cells"},
    {cell-prototype "obj 4"},
    {cell-prototype "obj 5"},
    {cell-prototype "obj 6"},
    ||skipping the cell previously occupied by obj 7"
    {skip},
    {cell-prototype "obj 8"},
    {cell-prototype colspan=3, color="orange",
        "obj 9 horizontally spans three cells"},
    {cell-prototype rowspan=2, color="orange",
        "obj 10 vertically spans two cells"},
    {cell-prototype "obj 11"},
    {cell-prototype "obj 12"}
}

オブジェクトの行および列の追加

row-prototype プロシージャを使用すると、行単位でオブジェクトを Table に追加します。行を追加する際の既定のルールについては、「挿入ポイントの記録」で説明されています。ただし、特定の行を指定する場合、あるいは行を開始する特定のテーブルセルを指定する場合は、次のキーワード引数を使用します。

row=int は、オブジェクトが追加される行のインデックスを指定します。
column=int は、オブジェクトが追加される列のインデックスを指定します。

挿入ポイントの現在位置を確認し、skip を呼び出して 1 つ以上のテーブルセルをスキップし、挿入ポイントを移動することができます。skip の引数では、挿入ポイントがスキップするテーブルセルの数を指定します。既定数は 1 です。「挿入ポイントの記録」のセクションで説明されているように、挿入ポイントは前述の方向に移動します。

次の例で、row-prototype および column-prototype プロシージャで row= および column= を使用する方法を示しています。color="green" が行全体に適用されることに注意してください。同様に、color="purple" は列全体に適用されます。

例: 表の特定の行にデータを追加

{Table columns=4,
    border-color="black",
    border-width=1pt,
    cell-border-color="black",
    cell-border-width=1pt,
    background="beige",
    "row",
    "row",
    "row",
    "your",
    "boat",
    "gently",
    "down",
    "the",
    "stream",
    {row-prototype row=1,
        color="green",
        "merrily",
        "merrily",
        "merrily",
        "merrily"},
    || skip stream
    {skip},
    "life",
    "is",
    "but",
    "a",
    "dream"
}

例: 特定の列にデータを追加

{Table columns=4,
    border-color="black",
    border-width=1pt,
    cell-border-color="black",
    cell-border-width=1pt,
    background="beige",
    "row",
    "row",
    "row",
    "your",
    "boat",
    "gently",
    "down",
    "the",
    "stream",
    {column-prototype column=1,
        color="purple",
        "merrily",
        "merrily",
        "merrily",
        "merrily"},
    || reposition insertion point
    || after third merrily
    {cell-prototype row=2, column=2,
        "life"},
    "is",
    "but",
    || skip the last merrily
    {skip},
    "a",
    "dream"
}

テーブルセルのオブジェクトの配置

row-prototype または column-prototype プロシージャの halign および valign キーワードを使用して、単一の行または列内にテーブルセルの内容を整列させることができます。これらのキーワードが Table インスタンスのレベルで使用された場合、Table 内のすべてのセルの内容に適用されます。

valign : 次のいずれかの方法を使用してテーブルセルの内容を水平方向に揃えます。
- "top"上端に揃えます。
- "center" 中心に揃えます。
- "bottom" 下端に揃えます。
- "origin" 外側起点の垂直コンポーネントに揃えます (既定)。
- [0, 1] の範囲内の値で、上端から下端までの距離に比例する位置で揃えます。
halign : 次のいずれかの方法を使用してテーブルセルの内容を垂直方向に揃えます。
- "left"左端に揃えます。
- "center" 中心に揃えます。
- "right" 右端に揃えます。
- "origin" 外側起点の水平コンポーネントに揃えます (既定)。
- [0, 1] の範囲内の値で、左端から右端までの距離に比例する位置で揃えます。

次の例では、行 0 は次の式で作成されています。 {row-prototype halign="center", ...}

次の例では、行 0 は次の式で作成されています。 {row-prototype valign="bottom", ...}

次の例では、Table は次の式で作成されています。 {Table valign="bottom", halign="center", ...}

テーブルセルのスキップと結合

セルのスキップ

skip プロシージャを使用して、表の 1 つ以上のセルを空の状態にします。次の例では skip の使用法を示しています。skip の使用によるボーダーの外観の変化に注意してください。

例: skip プロシージャの使用

{table
    border-width = 1pt,
    border-color = "black",
    cell-border-width = 1pt,
    cell-border-color = "black",
    {row
        {cell Leviathan} {cell Behemoth} {cell Ziz}
    }

    || The {skip} in the following row takes the place of one cell.

    {row
        {cell potato salad} {skip} {cell watermelon}
    }
}

{table
    border-width = 1pt,
    border-color = "black",
    cell-border-width = 1pt,
    cell-border-color = "black",

    || The {skip} in the following row takes the place of two cells.

    {row
        {skip 2} {cell Ziz}
    }
    {row
        {cell potato salad} {cell fruit punch} {cell watermelon}
    }
}

{table
    border-width = 1pt,
    border-color = "black",
    cell-border-width = 1pt,
    cell-border-color = "black",
    {row
        {cell Leviathan} {cell Behemoth} {cell Ziz}
    }

    || The middle cell in the following row contains one non-breaking
    || space.  The space is not collapsed because it is escaped
    || by the \ character.  Notice how this affects the border.

    {row
        {cell potato salad} {cell \ } {cell watermelon}
    }
}

skip を rowspan または colspan のいずれかと共に使用して、1 つのテーブルセルが 2 つ以上のスペースを確保するようにします。このようにして 2 つのテーブルセルを結合できます。次の例では、skip、rowspan および colspan の使用法を示します。

例: rowspan および colspan を使用してテーブルセルを結合

{table
    border-width = 1pt,
    border-color = "black",
    cell-border-width = 1pt,
    cell-border-color = "black",

    || The first cell in the following row takes up the width of
    || two cells.  Notice that the second cell is replaced by a {skip}.

    || The third cell in the following row takes up the height of
    || two cells.  Notice that the third cell in the lower row
    || is replaced by a {skip}.

    {row
        {cell colspan = 2, Leviathan} {skip} {cell rowspan = 2, Ziz}
    }
    {row
    {cell potato salad} {cell fruit punch} {skip}
    }
}

テーブルセルのオプション

Table クラスには、Table セルに適用されるオプションがいくつかあります。Table インスタンスを作成したとき、Table にグラフィックオブジェクトを追加したとき、または、cell-prototype、row-prototype または column-prototype プロシージャを呼び出したときにこれらのオプションをキーワード引数として設定することができます。

次のリストでは、いくつかのテーブルセルオプションを説明しています。

cell-border-width ボーダーのサイズ、つまりテーブルセルの端からセルのグラフィカルオブジェクトの端までの距離を指定します。既定値は 0pt です。
cell-border-color ボーダーの色を指定します。色を指定せず、cell-border-width がゼロより大きい場合、ボーダーはセルの背景色を使用して描画されます。既定のセルの背景色は透明なので、セルの概観は変化しません。セルの背景色を指定した場合、陰影付けを含む cell-border-style で描画した場合にのみボーダーが表示されます。
cell-border-style ボーダーを描画するために使用する BorderStyle を指定します。
cell-margin テーブルセルボーダーとセルのグラフィカルオブジェクトボーダー間のセルマージンを指定します。
cell-border-spec BorderSpec を指定します。ボーダーを指定することにより、セルの 4 辺に異なる幅のボーダーとマージンを提供できます。

次の例では、表の対角線 (左上から右下) に沿ったセルにさまざまなボーダーおよびマージンのオプションが追加されています。左上のセルはテーブルからボーダーの幅および色を継承し、1mm の既定のマージンおよび "none" のボーダースタイルが適用されています。マージンの値およびボーダースタイルを変更してみてください。

次の例では、テーブルの cell-border-spec プロパティの設定に BorderSpec を使用しています。結果のテーブルセルのボーダーとマージンに注意してください。

例: テーブルセルで BorderSpec を使用する

{let bspec:BorderSpec = 
    {BorderSpec
        top-border-width = 0.5cm,
        right-border-width = 0.5cm,
        left-margin = 0.5cm,
        bottom-margin = 0.5cm
    }
}
{let t:Table = 
    {Table
        border-width = .1cm,
        border-color = "#cccccc",
        cell-border-width = .1cm,
        cell-border-color = "red",
        cell-border-style = "raised",
        cell-border-spec = bspec
    }
}
{for r:int = 0 below 3 do
    {for c:int = 0 below 3 do
        let g:Graphic = 
            {t.add {format "Row %2d, Col %2d", r, c}, row = r, column = c}
    }
}
{value t}

テーブルセルのオプションバインディングの優先順位

テーブルセルのオプションバインディングは、セル、行、列および表レベルで設定することができます。セルレベルのバインディングは、行または列レベルのバインディングよりも優先されます。行および列の両方にオプションが設定される場合、最後に設定されたバインディングが優先されます。表レベルのバインディングは優先順位が一番低くなります。

次の例では、さまざまなレベルで複数回設定されたオプションバインディングの優先順位を示します。次の点に着目してください。

テキスト "cell" が表示されたテーブルセル (0, 2) は、セルレベルのバインディングが表レベルのバインディング設定 "red" より優先されるため、ボーダー色が黄色になっています。
テキスト "column" が表示されたテーブルセル (1, 1) は、列レベルのバインディイングが行レベルのバインディング設定 "blue" の後に実行されたため、ボーダー色が緑色になっています。
テキスト "row" が表示されたテーブルセル (1, 0)、(1, 2) および (1, 3) は、行レベルのバインディングが表レベルのバインディング設定 "red" より優先されるため、ボーダー色は青色になっています。
テキスト "column" が表示されたテーブルセル (2, 1) は、行レベルのバインディングがなく、列レベルのバインディング設定 "green" が表レベルのバインディング設定 "red" より優先されるため、ボーダー色は緑色になっています。

例: 表の行および列にオプションを設定

{Table || setting options by table
    cell-border-width=4pt,
    cell-border-color="red",
    cell-border-style="raised",
    || row 0
    {row-prototype "table", "table", "table", "table"},
    || row 1
    {row-prototype "table", "table", "table", "table"},
    || row 2
    {row-prototype "table", "table", "table", "table"},
    || cell 0, 2: setting options by cell, within a table
    {cell-prototype row = 0, column = 2,
        cell-border-color="yellow",
        "cell"},
    || row 1: setting options by row, within a table
    {row-prototype row = 1,
        cell-border-color="blue",
        "row", "row","row","row"},
    || col 1: setting options by column, within a table
    {column-prototype column=1,
        cell-border-color="green",
        "column", "column", "column"}
}

TableCell、TableColumn および TableRow の使用

他のグラフィカルオブジェクトと同様に、オブジェクトを Table に追加するときだけオプションを設定できるという制限はありません。次の構文を使用してセルのオプションを設定することができます。

テーブルセルのオプションを設定する場合、上記の構文は表にあるテーブルセルすべてのオプションバインディングを実行します。ところが、このようなバインディングを適用したくない場合があります。オブジェクトを追加する際のオプションバインディング設定と同様に、オブジェクトを追加した後のオプションバインディングも次の方法で設定することができます。

セル単位
行単位
列単位

各テーブルセルは TableCell オブジェクトとして表され、グラフィカルオブジェクトを Table 内の特定の位置に追加する際に自動的に作成されます。行および列は TableRow および TableColumn オブジェクトとしてそれぞれ表されます。

したがって、特定のセルにオプションバインディングを設定するには、次の構文を使用します。

テーブルセルを含む行にオプションバインディングを設定するには、次の構文を使用します。

テーブルセルを含む列にオプションバインディングを設定するには、次の構文を使用します。

set TableColumn-obj.option = value

次のメソッドにより必要なオブジェクトを取得することができます。

Table.get-element-cell は、引数として指定したグラフィカルオブジェクトに関連付けられている TableCell を返します。
Table.get-row は、指定された行インデックス番号の TableRow を返します。
Table.get-element-row は、引数として指定したグラフィカルオブジェクトに関連付けられている TableRow を返します。
Table.get-column は指定された列インデックス番号の TableColumn を返します。
Table.get-element-column は、引数として指定したグラフィカルオブジェクトに関連付けられている TableColumn を返します。

次の例では、Table の一部に関連付けられた TableCell、TableRow および TableColumn オブジェクトを取得する方法と、オブジェクトを使用してテーブルセルのオプションバインディングを設定する方法を示しています。

例: 表の初期化後にオプションを変更

{value
    let g:Graphic="text"
    let g1:Graphic="more text"
    let t:Table =
        {Table columns=3,
            border-width=1pt,
            cell-border-color="black",
            cell-border-width=1px
        }

    {for i:int=0 to 2 do
        {for j:int=0 to 2 do
            {t.add {text Row {value i}, Col {value j}}}
        }
    }
    {t.add row=1, column=2, g}
    {t.add row=2, column=2, g1}
    set {t.get-element-row g1}.background = "silver"
    set {t.get-row 1}.background = "lightgreen"
    set {t.get-column 1}.background = "lightblue"
    set {t.get-row 0}.background = {t.get-element-row g1}.background
    set {t.get-row 1}.font-size = 14pt
    set {t.get-element-cell g1}.font-size = {t.get-element-cell g}.font-size
    t
}

表のオプションの検索

Table と他の Box の違いは、Table には行、列、セルの豊富な内部構造が存在する点です。各オプションがこの構造を利用できるように、Table では特別なオプションの検索ルールを実装しています。

オプション (ローカルまたは非ローカル) を Table 全体に設定した場合、Table の行、列、セルの同じオプションを異なる設定でシャドウしない限り、Table 内のすべてのセルに反映されます。オプションを TableColumn または TableRow に設定した場合、セルの左上隅が該当する列または行に含まれればこのようなセルすべてに適用されます (シャドウされる場合を除く)。オプションを TableCell に設定した場合、そのセルにのみ適用されます。

Table に含まれている Graphic にオプションを設定しても、その Graphic のテーブルセルの外観には反映されません。

TableRow に 1 つのオプション値を設定し、TableColumn に別の値を設定した場合、この行と列の交点にあるテーブルセルではどちらの値が適用されるのかという問題が発生します。この場合に適用されるルールによると、この 2 つのオプション値で最後に設定された方が有効になります。

TableRow、TableColumn および TableCell を含む Table 全体は、ローカルオプションの適用範囲を決定する目的のため、1 つのグラフィカルオブジェクトと見なされます。したがって、これらのオブジェクトで指定される非ローカルおよびローカルオブションはすべて有効になります。たとえば、Table に Table.halign オプションを設定すると Table のすべての列が指定された通りに配置されますが、halign オプションを個々の TableColumn に設定すると、その列のみが指定された通りに配置されます。さらに、halign を個々の TableCell に設定すると、セル内のオブジェクトのみが、同じ列にある他のオブジェクトとは異なる設定で配置されることになります。

表のオプション

テーブルセルオプションセクションに、テーブルセルの外観を制御するオプションについて説明されています。Table クラスにはテーブルの外観を制御する多くの追加のオプションを提供します。

内部ボーダーの使用

セルボーダーはすべてのセルに対するボーダー、またはセル単位でのボーダーを指定します。内部ボーダーにより、行、列、またはその両方のボーダーを指定できます。内部ボーダーはテーブルの行または列をグループ化し、グループ間のボーダーを描画する必要がある場合に特に有用です。

プロパティ internal-borders は Table のローカルオプションです。このプロパティはテーブルが内部ボーダーを描画する場所を決定します。使用可能な値は TableInternalBorders により定義されます。

プロパティ border-width および border-color は、内部プロパティの幅と色を制御します。internal-borders の none 以外の値を指定することにより、1px の既定の幅と既定の薄い灰色を使用してボーダーを描画します。プロパティ border-spec および cell-border-spec は内部ボーダーに影響しません。

次の例はテーブル行間の内部ボーダーを示します。

この例はテーブル列間の内部ボーダーを示します。この場合、border-width に対して設定された値によりテーブル全体の周りにボーダーが追加されます。

TableGroup を使用して、internal-borders が内部ボーダー線を引く場所を決定するために使用するグループを作成します。TableGroup は、TableGroup.header、TableGroup.body、および TableGroup.footer の 3 つの事前定義されたグループを提供します。次の例は、内部ボーダーとテーブルグループを使用して、前述の例で使用されたテーブルをフォーマットします。例では、最初の列の group プロパティを header に、最初の行のプロパティを footer に設定します。TableFile.group の既定値は body です。結果の 3 つのグループは内部ボーダー線により描画されます。

次の例は internal-borders を使用して、3 つのテーブル行の各グループの下に内部ボーダーを描画します。それは 2 つのグループ、tg1 と tg2 を定義し、3 つのグループの代わりにどちらかにテーブル行を割り当てます。

この例は internal-border が、実際に、各行の端またはボーダーの隣の列に描画された 2 つの線により構成されていることも示しています。この例では、ボーダー上の行の下部の線は、border-color (灰色) とテーブルの border-width (4px) セットを使用して描画します。ボーダーより下の行の上部の線は、border-color と新しいグループの最初の行の border-width セットを使用して描画します。

例: TableGroup の定義

{value
    let t:Table = 
        {Table
            border-width = 4px,
            border-color = "gray",
            internal-borders = "groups"
        }
    let tg1:TableGroup = {TableGroup}
    let tg2:TableGroup = {TableGroup}
    let current-tg:TableGroup = tg1
    let switch:int = 0
    let group-size:int = 3
    {for r:int = 0 below 10 do
        {for c:int = 0 below 3 do
            let g:Graphic = 
                {t.add 
                    {format "Row %2d, Col %2d", r, c}, row = r, column = c
                }
            {if r == switch then
                {if current-tg == tg1 then
                    set current-tg = tg2
                    set {t.get-row r}.border-width = 2px
                    set {t.get-row r}.border-color = "red"
                 else
                    set current-tg = tg1
                    set {t.get-row r}.border-width = 2px
                    set {t.get-row r}.border-color = "blue"
                }
                set switch = switch + group-size
            }
            {t.group-rows current-tg, r}
        }
    }
    t
}

水平線および垂直線の使用

追加の Table プロパティにより、テーブルの行と列の間に線を描画することができます。これらには以下のプロパティが含まれます。

既定の線の幅は 0pt です。線は描画されません。既定の線の色は FillPattern.black です。

次の例はテーブルの水平および垂直線を示します。これらは単一の線なので、行と列の間に 1 ピクセルの線を簡単に描画するために使用できます。

次の例は内部ボーダーおよびセルボーダーで使用される水平線および垂直線を示します。線は内部ボーダーを構成する最後と最初の線の間に描画されることに注意してください。セルボーダーは内部ボーダーの内側に描画されます。

例: 線とボーダーを共に使用

{value
    let t:Table = 
        {Table       
            border-width = 3px, 
            border-color = "black",
            internal-borders = "all",
            vertical-line-color = "blue",
            vertical-line-width = 4px,
            horizontal-line-color = "red",
            horizontal-line-width = 4px
        }
    {for r:int = 0 below 3 do
        {for c:int = 0 below 3 do
            let g:Graphic = 
                {t.add 
                    {format "Row %2d, Col %2d", r, c}, row = r, column = c
                }
            {if r == 1 and c == 1 then 
                let ele:Graphic = {t.get-element r, c}
                let cell:TableCell = {t.get-element-cell ele}
                set cell.cell-border-width = 5px
                set {t.get-element-cell {t.get-element r, c}}.cell-border-color = "green"
            }
        }
    }
    t
}

Copyright © 1998-2019 SCSK Corporation. All rights reserved.
Curl, the Curl logo, Surge, and the Surge logo are trademarks of SCSK Corporation. that are registered in the United States. Surge Lab, the Surge Lab logo, and the Surge Lab Visual Layout Editor (VLE) logo are trademarks of SCSK Corporation.

例: 行を定義する internal-borders の使用

{let t:Table = {Table internal-borders = "rows" } } {for r:int = 0 below 3 do {for c:int = 0 below 3 do let g:Graphic = {t.add {format "Row %2d, Col %2d", r, c}, row = r, column = c } } } {value t }