テーブル拡張プラグインテストの変更点
[通常ページへ戻る] [通常差分表示] [Wikiスタイルで差分表示] [Wikiスタイルで差分表示(削除の表示無し)]表記
= 変更なし
+ 追加
- 削除
同一行で追加削除があれば変更。
変更点
1:+ 元の説明だと分かりづらいので、分かりやすいように修正中(まだ未完成です・当方で改造したボーダー設定に関する説明もまだ書いていません)
2:+
3:+ 「BugTrack-plugin/270」テーブルにカラム属性指定を追加する拡張プラグインを改造(独自拡張)を施した上で導入していて、その細かい説明、サンプルを当ページで紹介しています。
4:+
5:+ テーブルについては[[HELP Wiki書式]]をご覧下さい。「カラム」とはテーブルにおける「項目」「セル」の事です。
6:+
7:+
8:+ {{br}}
9:+ ・フォントサイズ指定を可能にする「FSIZE」を追加しました (2006年06月08日)
10:+
11:+
12:+
13:+
14:+ {{br 3}}
15:+
16:+
17:+ !!!通常のテーブル
18:+
19:+ ,名称,産地,単位,金額
20:+ ,りんご,青森産,100g,80円
21:+ ,みかん,福岡産,100g,30円
22:+ ,ぶどう,熊本産,100g,75円
23:+
24:+ ,名称,産地,単位,金額
25:+ ,りんご,青森産,100g,80円
26:+ ,みかん,福岡産,100g,30円
27:+ ,ぶどう,熊本産,100g,75円
28:+
29:+
30:+ !!! テーブル・カラム属性
31:+ カンマ（","）で始まるテーブル定義に対して、以下のような幾つかの方法、書式でカラム属性を設定できます。
32:+
33:+ !! 各カラムに個別に指定
34:+
35:+ 各カラムに対し、個別にカラム属性を指定していく記述方法です。{{br}}
36:+ テーブル内容と一緒に書くので、可読性は低下し、多くのカラムに指定するのは大変ですが、カラム属性を指定したい部分に直接記述する事で指定しやすいともいえ、各カラム毎に細かく別々に指定が出来ます。{{br}}
37:+ 「行指定」も同時に行っている場合は、同一属性値は個別指定によって上書きされます。
38:+
39:+ ,カラム１{<属性>[:<属性値>]|<属性>[:<属性値>]...},カラム２{<属性>[:<属性値>]|<属性>[:<属性値>]...},...
40:+
41:+
42:+ ! 個別指定のサンプル
43:+
44:+ ,名称{SIZE:100},産地{SIZE:100},単位{SIZE:50|RIGHT},金額{SIZE:50|RIGHT}
45:+ ,りんご{BOLD|BGCOLOR:ffff99},青森産{CENTER},100g{RIGHT},80円{RIGHT}
46:+ ,みかん{BOLD|BGCOLOR:ffff99},福岡産{CENTER},100g{RIGHT},30円{BGCOLOR:ffcccc|RIGHT}
47:+ ,ぶどう{BOLD|BGCOLOR:ffff99},熊本産{CENTER},100g{RIGHT},75円{RIGHT}
48:+
49:+ ,名称{SIZE:100},産地{SIZE:100},単位{SIZE:50|RIGHT},金額{SIZE:50|RIGHT}
50:+ ,りんご{BOLD|BGCOLOR:ffff99},青森産{CENTER},100g{RIGHT},80円{RIGHT}
51:+ ,みかん{BOLD|BGCOLOR:ffff99},福岡産{CENTER},100g{RIGHT},30円{BGCOLOR:ffcccc|RIGHT}
52:+ ,ぶどう{BOLD|BGCOLOR:ffff99},熊本産{CENTER},100g{RIGHT},75円{RIGHT}
53:+
54:+
55:+ !! 列毎の一括指定
56:+
57:+ 列毎にカラム属性を設定する記述方法です。{{br}}
58:+ テーブルの最初のカラムに"{c}"を指定した場合は「列一括指定行」となり、この行以降の行に適用されます。{{br}}
59:+ 「個別指定」を併用すれば、設定したカラムの特定のカラム属性を上書きすることができます。
60:+
61:+ ,{c},{<属性>[:<属性値>]|<属性>[:<属性値>]...},{<属性>[:<属性値>]|<属性>[:<属性値>]...},...
62:+ ,カラム１,カラム２,...
63:+ ,カラム１,カラム２,...
64:+ ,カラム１{<属性>[:<属性値>]|<属性>[:<属性値>]...},カラム２,...
65:+
66:+ ! 列一括指定のサンプル
67:+ 先頭を''',{c}'''で始め、次列より列数だけの属性指定を行う。
68:+ 設定値は、以降の行に適用されます。
69:+
70:+ ,{c},{BOLD|SIZE:100},{SIZE:100|CENTER},{SIZE:50|RIGHT},{SIZE:50|RIGHT}
71:+ ,名称,産地,単位,金額
72:+ ,{c},{BOLD|BGCOLOR:ffff99},{CENTER|BGCOLOR:ccccff},{RIGHT|BGCOLOR:ccffff}
73:+ ,りんご,青森産,100g,80円
74:+ ,みかん,福岡産,100g,30円{BGCOLOR:ffcccc}
75:+ ,ぶどう,熊本産,100g,75円
76:+
77:+ ,{c},{BOLD|SIZE:100},{SIZE:100|CENTER},{SIZE:50|RIGHT},{SIZE:50|RIGHT}
78:+ ,名称,産地,単位,金額
79:+ ,{c},{BOLD|BGCOLOR:ffff99},{CENTER|BGCOLOR:ccccff},{RIGHT|BGCOLOR:ccffff}
80:+ ,りんご,青森産,100g,80円
81:+ ,みかん,福岡産,100g,30円{BGCOLOR:ffcccc}
82:+ ,ぶどう,熊本産,100g,75円
83:+
84:+ ※テーブルの最初の行は THタグで構成されています。基本スタイルはCSSで定義しておきます。
85:+
86:+
87:+ !! 行属性指定（TRタグに対する属性設定です）
88:+
89:+ 行にカラム属性を設定する記述方法です。
90:+ テーブルの最初のカラムに"{r 属性}"を指定した場合は「行属性指定」となり、この行のTRタグに対して指定した属性が適用されます。
91:+
92:+ ,{r <属性>[:<属性値>]|<属性>[:<属性値>]...},カラム１,カラム２,...
93:+ ,{r <属性>[:<属性値>]|<属性>[:<属性値>]...},カラム１,カラム２,...
94:+ ,{r <属性>[:<属性値>]|<属性>[:<属性値>]...},カラム１,カラム２,...
95:+
96:+ !! 奇数行／偶数行属性指定（TRタグに対する属性設定です）
97:+ テーブルの最初のカラムに"{r1}"／"{r2}"を指定することによって、それぞれ奇数行／偶数行に対応した行属性を設定できます。
98:+ この設定を利用する場合は、はテーブルの最初に設定する必要があります。
99:+
100:+ ,{r1},{<属性>[:<属性値>]|<属性>[:<属性値>]...}
101:+ ,{r2},{<属性>[:<属性値>]|<属性>[:<属性値>]...}
102:+
103:+ !! カラム属性のグループ設定
104:+
105:+ 複数のカラム属性を一つのグループとして登録し、その登録名を利用してカラム属性を設定できるようにする記述方法です。
106:+ テーブルの最初のカラムに"{c <グループ名>}"を指定して登録します。
107:+ 「個別指定」、「列毎の一括指定」でカラム属性を上書きすることもできます。
108:+
109:+ ,{c C1},{<属性>[:<属性値>]|<属性>[:<属性値>]...}|...
110:+ ,{c C2},{<属性>[:<属性値>]|<属性>[:<属性値>]...}|...
111:+
112:+ ,カラム１{C1},カラム２,...
113:+ ,カラム１{C2},カラム２,...
114:+
115:+ ※ここで登録したグループ名は行属性指定"{r 属性値}"においても利用できます。
116:+
117:+ ※属性グループは別のWikiページに設定し、その設定ページを include プラグインで挿入して利用すれば
118:+ ページ内のソースがすっきり見えます。また、同様の属性グループを他のページに再利用でき有効に利用できます。
119:+
120:+ !! テーブル属性指定
121:+
122:+ テーブルの最初のカラムに"{t}"を指定することによって、テーブル自体に対していくつかの属性を設定できます。
123:+ この設定を利用する場合は、はテーブルの最初に設定する必要があります。
124:+
125:+ ,{t},{<属性>[:<属性値>]|<属性>[:<属性値>]...}
126:+ ,カラム１,カラム２,...
127:+ ,カラム１,カラム２,...
128:+
129:+ !!! 属性の設定項目一覧
130:+
131:+ 各属性は カラム内に {} を使用して指定します。
132:+ "|" で区切ることにより、複数のカラム属性を組み合わせて使用できます。
133:+
134:+ !! カラムに利用できる属性
135:+
136:+ LEFT - カラム内の文字を左寄せに表示します。
137:+ CENTER - カラム内の文字を中央に表示します。
138:+ RIGHT - カラム内の文字を右寄せに表示します。
139:+ BOLD - カラム内の文字を太字で表示します。
140:+ ITALIC - カラム内の文字を斜体で表示します。
141:+ COLOR - カラム内の文字を指定色で表示します。(Ex: {COLOR:eeeeee})
142:+ BGCOLOR - カラム内の背景を指定色で表示します。(Ex: {BGCOLOR:eeeeee})
143:+ SIZE - カラムの幅を指定サイズ(px)にします。(Ex: {SIZE:150})
144:+ COLS - カラムの（右）横方向連結を行います。(Ex: {COLS:2})
145:+ ROWS - カラムの（下）縦方向連結を行います。(Ex: {ROWS:2})
146:+
147:+ 管理者追加のオリジナル
148:+ FSIZE - カラム内の文字を指定したサイズで表示します。
149:+ BORDER - カラムのボーダーラインを無くします(先頭行の場合はタグを「TH」から「TD」に変更)。
150:+
151:+ !! 行に利用できる属性
152:+
153:+ LEFT - 行内の文字を左寄せに表示します。
154:+ CENTER - 行内の文字を中央に表示します。
155:+ RIGHT - 行内の文字を右寄せに表示します。
156:+ BOLD - 行内の文字を太字で表示します。
157:+ ITALIC - 行内の文字を斜体で表示します。
158:+ COLOR - 行内の文字を指定色で表示します。(Ex: {COLOR:eeeeee})
159:+ BGCOLOR - 行内の背景を指定色で表示します。(Ex: {BGCOLOR:eeeeee})
160:+
161:+ 管理者追加のオリジナル
162:+ FSIZE - 行内の文字を指定したサイズで表示します。
163:+ BORDER - ボーダーラインを無くします(先頭行の場合はタグを「TH」から「TD」に変更)。
164:+ 「BORDER」は列毎の一括指定には利用可能ですが、行毎の指定には利用出来ません。
165:+
166:+ !! テーブルに利用できる属性
167:+
168:+ LEFT - テーブルを左寄せに表示します。値設定で "margin-left" が設定できます。(Ex: {LEFT:50})
169:+ CENTER - テーブルを中央に表示します。
170:+ RIGHT - テーブルを右寄せに表示します。値設定で "margin-right" が設定できます。(Ex: {RIGHT:50})
171:+ SIZE - テーブルの幅を指定サイズ(px)にします。(Ex: {SIZE:150})
172:+ CAPTION - テーブル・キャプション・タグを設定できます。
173:+ SUMMARY - テーブルのsummary属性を設定できます。
174:+
175:+ 管理者追加のオリジナル
176:+ BORDERS - テーブル・ボーダーのスタイル・太さ・色(border-style)を設定できます。
177:+ BORDERL - テーブル・左ボーダーのスタイル・太さ・色(border-left)を設定できます。
178:+ BORDERR - テーブル・右ボーダーのスタイル・太さ・色(border-right)を設定できます。
179:+ BORDERT - テーブル・上ボーダーのスタイル・太さ・色(border-top)を設定できます。
180:+ BORDERB - テーブル・下ボーダーのスタイル・太さ・色(border-bottom)を設定できます。
181:+
182:+ テーブル・ボーダーやフォントの設定値等については、[HTMLクイックリファレンス|http://www.htmq.com/style/border.shtml@@]等を参考にして下さい。
183:+
184:+
185:+
186:+ !!! サンプル
187:+
188:+ 以下に、いくつかのサンプルを示します。
189:+
190:+
191:+
192:+
193:+
194:+
195:+
196:+ !! 行一括指定のサンプル
197:+ 先頭を''',{r 属性値}'''で始め、次列より通常のテーブル指定を行う
198:+
199:+ ,{c},{BOLD|SIZE:100},{SIZE:100|CENTER},{SIZE:50|RIGHT},{SIZE:50|RIGHT}
200:+ ,名称,産地,単位,金額
201:+ ,りんご,青森産,100g,80円
202:+ ,{r BGCOLOR:ffcccc},みかん,福岡産,100g,30円{BGCOLOR:ff9999}
203:+ ,ぶどう,熊本産,100g,75円
204:+
205:+ ,{c},{BOLD|SIZE:100},{SIZE:100|CENTER},{SIZE:50|RIGHT},{SIZE:50|RIGHT}
206:+ ,名称,産地,単位,金額
207:+ ,りんご,青森産,100g,80円
208:+ ,{r BGCOLOR:ffcccc},みかん,福岡産,100g,30円{BGCOLOR:ff9999}
209:+ ,ぶどう,熊本産,100g,75円
210:+
211:+ !! 奇数行／偶数行指定のサンプル
212:+
213:+ ,{r1},{BGCOLOR:ffffdd}
214:+ ,{r2},{BGCOLOR:ddddff}
215:+ ,{c},{BOLD|SIZE:100},{SIZE:100|CENTER},{SIZE:50|RIGHT},{SIZE:50|RIGHT}
216:+ ,名称,産地,単位,金額
217:+ ,りんご,青森産,100g,80円
218:+ ,みかん,福岡産,100g,30円{BGCOLOR:ffcccc}
219:+ ,ぶどう,熊本産,100g,75円
220:+ ,さくらんぼ,山形産,100g,300円
221:+
222:+ ,{r1},{BGCOLOR:ffffdd}
223:+ ,{r2},{BGCOLOR:ddddff}
224:+ ,{c},{BOLD|SIZE:100},{SIZE:100|CENTER},{SIZE:50|RIGHT},{SIZE:50|RIGHT}
225:+ ,名称,産地,単位,金額
226:+ ,りんご,青森産,100g,80円
227:+ ,みかん,福岡産,100g,30円{BGCOLOR:ffcccc}
228:+ ,ぶどう,熊本産,100g,75円
229:+ ,さくらんぼ,山形産,100g,300円
230:+
231:+ !! 属性グループを利用したサンプル
232:+
233:+ ,{c 名称},{BOLD|SIZE:100|BGCOLOR:ffff99}
234:+ ,{c 産地},{SIZE:100|CENTER|BGCOLOR:ccccff}
235:+ ,{c 単位},{SIZE:50|RIGHT|BGCOLOR:ccffff}
236:+ ,{c 金額},{SIZE:50|RIGHT}
237:+ ,{c 特売},{BGCOLOR:ffcccc}
238:+
239:+ ,名称,産地,単位,金額
240:+ ,りんご{名称},青森産{産地},100g{単位},80円{金額}
241:+ ,みかん{名称},福岡産{産地},100g{単位},30円{金額|特売}
242:+ ,ぶどう{名称},熊本産{産地},100g{単位},75円{金額}
243:+
244:+ ,{c 名称},{BOLD|SIZE:100|BGCOLOR:ffff99}
245:+ ,{c 産地},{SIZE:100|CENTER|BGCOLOR:ccccff}
246:+ ,{c 単位},{SIZE:50|RIGHT|BGCOLOR:ccffff}
247:+ ,{c 金額},{SIZE:50|RIGHT}
248:+ ,{c 特売},{BGCOLOR:ffcccc}
249:+
250:+ ,名称,産地,単位,金額
251:+ ,りんご{名称},青森産{産地},100g{単位},80円{金額}
252:+ ,みかん{名称},福岡産{産地},100g{単位},30円{金額|特売}
253:+ ,ぶどう{名称},熊本産{産地},100g{単位},75円{金額}
254:+
255:+
256:+ !! テーブル属性の指定
257:+
258:+ ,{t},{LEFT:50|SIZE:300|CAPTION:左寄せ}
259:+ ,{t},{LEFT:50|SIZE:300|CAPTION:左寄せ}
260:+ ,名称,産地,単位,金額
261:+ ,りんご,青森産,100g,80円
262:+ ,みかん,福岡産,100g,30円
263:+ ,ぶどう,熊本産,100g,75円
264:+
265:+ ,{t},{CENTER|SIZE:300|CAPTION:中央}
266:+ ,{t},{CENTER|SIZE:300|CAPTION:中央}
267:+ ,名称,産地,単位,金額
268:+ ,りんご,青森産,100g,80円
269:+ ,みかん,福岡産,100g,30円
270:+ ,ぶどう,熊本産,100g,75円
271:+
272:+ ,{t},{RIGHT:50|SIZE:300|CAPTION:右寄せ}
273:+ ,{t},{RIGHT:50|SIZE:300|CAPTION:右寄せ}
274:+ ,名称,産地,単位,金額
275:+ ,りんご,青森産,100g,80円
276:+ ,みかん,福岡産,100g,30円
277:+ ,ぶどう,熊本産,100g,75円
278:+
279:+ !! 複合利用サンプル
280:+
281:+ ,{c 名称},{BOLD|SIZE:100|BGCOLOR:ffff99}
282:+ ,{c 産地},{CENTER|BGCOLOR:ccccff}
283:+ ,{c 単位},{RIGHT|BGCOLOR:ccffff}
284:+ ,{c 金額},{RIGHT}
285:+ ,{c 特売},{BGCOLOR:ffcccc}
286:+
287:+ ,{t},{LEFT:100}
288:+ ,{c},{BOLD|SIZE:100},{SIZE:100|CENTER},{SIZE:50|RIGHT},{SIZE:50|RIGHT}
289:+ ,名称,産地,単位,金額
290:+ ,{c},{名称},{産地},{単位},{金額}
291:+ ,りんご,青森産,100g,80円
292:+ ,みかん,福岡産,100g,30円{特売}
293:+ ,ぶどう,熊本産,100g,75円
294:+
295:+ ,{c 名称},{BOLD|SIZE:100|BGCOLOR:ffff99}
296:+ ,{c 産地},{CENTER|BGCOLOR:ccccff}
297:+ ,{c 単位},{RIGHT|BGCOLOR:ccffff}
298:+ ,{c 金額},{RIGHT}
299:+ ,{c 特売},{BGCOLOR:ffcccc}
300:+
301:+ ,{t},{LEFT:100}
302:+ ,{c},{BOLD|SIZE:100},{SIZE:100|CENTER},{SIZE:50|RIGHT},{SIZE:50|RIGHT}
303:+ ,名称,産地,単位,金額
304:+ ,{c},{名称},{産地},{単位},{金額}
305:+ ,りんご,青森産,100g,80円
306:+ ,みかん,福岡産,100g,30円{特売}
307:+ ,ぶどう,熊本産,100g,75円
308:+
309:+ !!COLS,ROWSを利用したサンプル
310:+
311:+ 以下の設定では「名称／産地」が colspan="2", 「りんご」が rowspan="2"になります。
312:+
313:+ ,名称／産地{COLS:2},単位,金額
314:+ ,りんご{ROWS:2},青森産,100g,80円
315:+ ,長野産,100g,70円
316:+ ,みかん,熊本産,100g,30円
317:+ ,ぶどう,福岡産,100g,75円
318:+
319:+ ,名称／産地{COLS:2},,単位,金額
320:+ ,{c},{BGCOLOR:999999},{BGCOLOR:FF9999},{BGCOLOR:99FF99},{BGCOLOR:9999FF}
321:+ ,りんご{ROWS:2},青森産,100g,80円
322:+ , ,長野産,100g,70円
323:+ ,みかん,熊本産,100g,30円
324:+ ,ぶどう,福岡産,100g,75円
325:+
326:+
327:+
328:+ !!!ANA-NOTE管理者のCGI改造により実現可能となったもの
329:+
330:+
331:+ !!テーブル枠「dotted」
332:+
333:+ ,{t},{BORDERS:dotted}
334:+ ,名称,産地,単位,金額
335:+ ,りんご,青森産,100g,80円
336:+ ,みかん,福岡産,100g,30円
337:+ ,ぶどう,熊本産,100g,75円
338:+
339:+ ,{t},{BORDERS:dotted}
340:+ ,名称,産地,単位,金額
341:+ ,りんご,青森産,100g,80円
342:+ ,みかん,福岡産,100g,30円
343:+ ,ぶどう,熊本産,100g,75円
344:+
345:+
346:+ !!テーブル枠「none」
347:+
348:+ ,{t},{BORDERS:none}
349:+ ,名称,産地,単位,金額
350:+ ,りんご,青森産,100g,80円
351:+ ,みかん,福岡産,100g,30円
352:+ ,ぶどう,熊本産,100g,75円
353:+
354:+ ,{t},{BORDERS:none}
355:+ ,名称,産地,単位,金額
356:+ ,りんご,青森産,100g,80円
357:+ ,みかん,福岡産,100g,30円
358:+ ,ぶどう,熊本産,100g,75円
359:+
360:+
361:+ !!テーブル枠「none」、セルの枠も無しに
362:+
363:+ ,{t},{BORDERS:none}
364:+ ,{c},{BORDER},{BORDER},{BORDER},{BORDER}
365:+ ,名称,産地,単位,金額
366:+ ,りんご,青森産,100g,80円
367:+ ,みかん,福岡産,100g,30円
368:+ ,ぶどう,熊本産,100g,75円
369:+
370:+ ,{t},{BORDERS:none}
371:+ ,{c},{BORDER},{BORDER},{BORDER},{BORDER}
372:+ ,名称,産地,単位,金額
373:+ ,りんご,青森産,100g,80円
374:+ ,みかん,福岡産,100g,30円
375:+ ,ぶどう,熊本産,100g,75円
376:+
377:+
378:+ !!全枠無しにして、左テーブルボーダーを青の二重線で表示
379:+
380:+ ,{t},{BORDERS:none|BORDERL:double 20px #0000ff}
381:+ ,{c},{BORDER},{BORDER},{BORDER},{BORDER}
382:+ ,名称,産地,単位,金額
383:+ ,りんご,青森産,100g,80円
384:+ ,みかん,福岡産,100g,30円
385:+ ,ぶどう,熊本産,100g,75円
386:+
387:+ ,{t},{BORDERS:none|BORDERL:double 20px #0000ff}
388:+ ,{c},{BORDER},{BORDER},{BORDER},{BORDER}
389:+ ,名称,産地,単位,金額
390:+ ,りんご,青森産,100g,80円
391:+ ,みかん,福岡産,100g,30円
392:+ ,ぶどう,熊本産,100g,75円
393:+
394:+
395:+ !!フォントサイズ「FSIZE」
396:+
397:+ ,{c},{FSIZE:x-small},{FSIZE:x-small},{FSIZE:x-small},{FSIZE:medium}
398:+ ,名称,産地,単位,金額
399:+ ,りんご,青森産,100g,80円
400:+ ,みかん{FSIZE:x-large},福岡産,100g,30円
401:+ ,ぶどう,熊本産,100g,75円
402:+
403:+ ,{c},{FSIZE:x-small},{FSIZE:x-small},{FSIZE:x-small},{FSIZE:medium}
404:+ ,名称,産地,単位,金額
405:+ ,りんご,青森産,100g,80円
406:+ ,みかん{FSIZE:x-large},福岡産,100g,30円
407:+ ,ぶどう,熊本産,100g,75円
408:+
409:+ {{br 2}}
410:+
411:+ ,{r FSIZE:xx-large},名称,産地,単位,金額
412:+ ,{r FSIZE:x-large},りんご,青森産,100g,80円
413:+ ,{r FSIZE:medium},みかん,福岡産,100g,30円
414:+ ,{r FSIZE:x-small},ぶどう,熊本産,100g,75円
415:+
416:+ ,{r FSIZE:xx-large},名称,産地,単位,金額
417:+ ,{r FSIZE:x-large},りんご,青森産,100g,80円
418:+ ,{r FSIZE:medium},みかん,福岡産,100g,30円
419:+ ,{r FSIZE:x-small},ぶどう,熊本産,100g,75円
トップページ
新規
一覧(更新)
検索
ヘルプ
RSS
