kintoneプラグイン > 機能拡張スタンダードAll-In > PDF出力レイアウト・タグリファレンス > table
table
テーブル(表)構造を作るためのブロックです。
アプリのサブテーブルに保存されている可変長のデータを出力したいときはこの要素を使います。
テーブル構造を作るためにはルールに則り、子要素を配置する必要があります。
tableタグ直下にthead、tbody、tfootを配置。
それぞれの子にtrを配置し、これが行になります。
trの子にtdを配置し、これがセルになります。
tdのなかに出力用の記述することで表が構築できます。
子要素
要素名 | 親要素 | 機能 |
---|---|---|
thead | table | 表のヘッダ行の親です。 表の途中で改ページが発生した場合、ヘッダ行が表の先頭に出力されます。 |
tbody | table | 表の本文となる行の親です。 アプリのサブテーブルを出力に利用する場合、自動的にこの要素に行が追加されます。 |
tfoot | table | 表のフッタとなる行の親です。 tbodyのあとに出力したい行がある場合、この要素を使用します。 |
tr | thead tbody tfoot |
行を作ります。 |
td | tr | セルを作ります。 |
属性
属性名 | フォーマット | 機能 |
---|---|---|
field | 文字列 | アプリのサブテーブルを出力する際に、フィールド名を指定します。 |
colwidth | 特殊 | テーブルの各セルの幅を指定します。 半角スペースを区切り文字として、幅は、数値(mm単位)か “*” で、行のセルの数だけ指定します。 省略した場合、テーブル自体の幅が出力するコンテンツの幅に合わせられます。”*” を指定した場合、親要素(ページ)の幅に伸長します。”*” を複数指定した場合、均等に分割されます。 また、数値指定と組み合わせた場合は、親要素の幅から数値指定のセル幅を除いたぶんに伸長します。 |
cellpadding | box指定値 | セルとセルの間のサイズです。 初期値は 0(mm) となっています。 |
cellspacing | box指定値 | セルとセル内に配置された出力要素の隙間のサイズです。 初期値は 2(mm) となっています。 |
boxborder | box指定値 | テーブル外側の枠線の幅です。 |
boxbordercolor | box指定値 | テーブル外側の枠線の色です。 |
boxbordercolor | box指定値 | テーブル外側の枠線の色です。 |
rowborder | 数値 | テーブル内側の横線の幅です。 |
rowbordercolor | 色指定 | テーブル内側の横線の色です。 |
colborder | 数値 | テーブル内側の縦線の幅です。 |
colbordercolor | 色指定 | テーブル内側の縦線の色です。 |
bgcolor | 色指定 | テーブル全体の背景色です。 |
rowbreak | 真偽値 | テーブル行出力方法。 true:行途中でページが切り替わる場合、次のページに出力 false:行途中でページが切り替わる場合、分割して出力 |
※色指定は#ではじまる6桁のRGB指定か、色見本の文字列で指定します。
色見本については<color>データ型のリファレンスをご確認ください。
※box指定値とは、最大4つの値の列挙で、矩形の四方の値を指定する際に用いるフォーマットです。
“10 20 30 40” と入力した場合、上10、右20、下30、左40、という指定となります。
“10 20 30” と入力した場合、上10、左右20、下30、という指定となります。
“10 20” と入力した場合、上下10、左右20、という指定となります。
“10” と入力した場合、四方すべて10、という指定となります。
数値だけでなく色の指定などにも用いられます。
使用例
1. 基本的な使い方
1 2 3 4 5 6 7 8 9 10 |
<contents> <table colwidth="100 160 *"> <tbody> <tr> <td><p>セル1</p></td> <td><p>セル2</p></td> <td><p>セル3</p></td> </tr> </table> </contents> |
2. アプリのサブテーブルを出力する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<contents> //field属性を指定するだけでアプリのサブテーブルが出力されます //カラムの順番は保証されません <table field="(サブテーブルのフィールド名)"> </table> //theadでフィールドの列挙順を構築することができます <table field="(サブテーブルのフィールド名)"> <thead> <tr> <td field="(サブテーブル内のフィールド1)"></td> <td field="(サブテーブル内のフィールド2)"></td> <td field="(サブテーブル内のフィールド3)"></td> </tr> </thead> </table> </contents> |
3. 奇数行と偶数行で背景色を変える他
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<contents> <table field="(サブテーブルのフィールド名)"> //thead全体に背景色と文字色を指定しています <thead bgcolor="#1a6fc3" color="white"> <tr> <td field="(サブテーブル内のフィールド1)"></td> <td field="(サブテーブル内のフィールド2)"></td> <td field="(サブテーブル内のフィールド3)"></td> </tr> </thead> // サブテーブルに保存されているデータが全て出力される際に、構築されているtrが順番に使用されます。 // trを2行設定しておくと交互に使用されるので、奇数行と偶数行の背景色を変更することができます。 // tbodyの属性 minrows は最小出力行数の指定です。 // この設定ではサブテーブルにデータ数が不足していても空データが20行まで出力されます。 <tbody minrows="20"> // 奇数行は bgcolor に white を指定 <tr bgcolor="white"> <td field="(サブテーブル内のフィールド1)"></td> <td field="(サブテーブル内のフィールド2)"></td> // delimit は数値を3桁ごとに指定された区切り文字を挿入する機能です <td><p><span field="(サブテーブル内のフィールド3)" delimit=","></span></p></td> </tr> // 偶数行は bgcolor に #e0e0ff を指定 <tr bgcolor="#e0e0ff"> <td field="(サブテーブル内のフィールド1)"></td> <td field="(サブテーブル内のフィールド2)"></td> <td><p><span field="(サブテーブル内のフィールド3)" delimit=","></span></p></td> </tr> </tbody> </table> </contents> |