テーブル作成ガイド

テーブルを作成するときのあれこれを書いているページです
親ページが長く見辛くなりそうだったので別ページ化しました。
ソースは編集画面を出して表示や取得をしてください。(長いのでソースを別表示させていません)

コメント欄：雑談/アドバイス/連絡/依頼/苦情など

知識
テーブルの定義サンプルへのリンクをここに張る?
テーブル定義の「｜」はネストすることができないため、テーブル内にテーブルを定義することができない
同様にテーブル内にリストも定義することができない
テーブル内でどのプラグインが使えるかの判断は検証して確立していってください
　⇒＆系は処理順からおそらく使える、＃系はモノによる(多分ダメ)としか言えない
このwikiだと「～(チルダ)」で項目定義する表現が多く統一感を出すのに一役買っている
　⇒「h：ヘッダ」は自動的にグレー色の項目になり、見栄えも悪くあまり見かけない印象(禁止ではない)

作成手順と考え方やコツ

• 細分化されたでかくて単純な定義から肉をそいでいくスタイル⇒彫刻で作品作るイメージ
• 表計算ソフトとエディタを駆使する
  • 表計算ソフトの多くは左右のマスの間が「tab文字」もしくは「,カンマ」によって区切られる
  • 表計算ソフトのマス目を利用して全体イメージを描く
  • 後から行列を追加するのはとても面倒なので、イメージする際は追加を想定して大目に項目を入れる
    • 「連結すりゃ一つになる」←→「分割すると全体修正」　さて、どちらが好みですか
  • 表計算ソフトの全体イメージをエディタにペーストする
  • エディタで区切り文字を｜に置換して、いざwikiのテストページへ
  • 地道に体裁を整えていく　[ポイント]コメントを入れられないのでBGを代用すると良い

※逆にwikiにあるテーブルソースから表計算ソフトへ読み込ませるのも有効：>を区切り文字に置換など
※excelとかのプラグインでwiki用があるらしいから試すのも手、筆者はブラックボックス嫌いなので未検証

Index

• テーブルの横並び
• テーブルの縦並び(「無理に縦に連結させなくても複数設置すれば・・・」とは言わない)
• ３×３のマス目(隙間ありver)
• 集合表現 ←面倒なだけなのでやっぱりやめ　ベン図3点でもかなり特殊な行列になってしまう 4点も無理
• 比較用テーブル

完成形

• テーブルの横並び(単純)

• テーブルの横並び(汎用)

※あっけなくメンテナンスできて当時何が難しかったのか思い出せない、慣れとは・・・

• テーブルの横並び(複雑)

• テーブルの縦並び(「無理に縦に連結させなくても複数設置すれば・・・」とは言わない)

• ３×３のマス目(隙間ありver)

• 集合表現

colspanとrowspanの練習

HTMLとかでもローズとか渦巻きとか作ってみるのを見かけます
wikiで作成して、その逆回転までの修正ができればもう怖いモノはないんじゃないかな
ちなみにこれを書いている筆者も初挑戦です

[５×５のこの状態から]

||||||
||||||
||||||
||||||
||||||

　↓

[こんな形を作ってみる：結果]

　↓

[作成したテーブル模様のまま逆渦巻きに修正してみる]
課題は作成に慣れている向けで全く初心者向けではありません
難しい方と感じる方は無理に修正しようとは思わず、まず新規に作成してみてください
両者のイメージを正しく持つことが修正技術の初歩です
また、引き続き作成したテーブルに色塗るテストも行えます。色の継承を理解するのに役立ちます。

ちなみに筆者は失敗しました、どのように失敗したかをさらしておきます
一番右下がマスになってしまっています。検証や補助情報は大事だってことです

テーブルの横並び(疑似)

ＡｘＢｘＣのような、組み合わせが表現できるかチャレンジ
テーブルを横並び　｜｛｜｜｜｝｜　のようなネストは標準プラグインでは実現できないことを検索済み

素直に巨大テーブルから切り出す

「~」⇒rowspan(上の文字と連結する) 「>」⇒colspan(右の文字と連結する)

中身を入れてみる ＋ 行が足りないので追加

追加行に情報を入れる、余分な行を落として様子を見る

続いて重複しているセルを結合していく、分かりやすく空となるはずの上や右のセルに「(空白)」と入れた

ＡＢＣを完全に分けたいので、間に相当する箇所の連結。そして掛け算マークをデカデカと
背景色を(空白)の部分に入れておけば、colspanやlowspanで連結された部分にも適用される
※こういうときテーブル内でコメント付けられたら編集が楽なのに・・・
※現状ではＢＧＣＯＬＯＲ(＃好きなカラーコード)：で意味付けしておくのが妥当なラインか・・・

あとは体裁を整える。まずは「項目」に該当する部分の先頭に～を入れていく
thなどが行レベル項目指定なのに対し、先頭～はセル単位で「項目」指定することができる。
また(たぶん当wiki限定だと思うが)～で指定された項目は「太字、中央配置、背景色：オレンジ」になる。
※NULLセルに～を入れた場合のみ下のセルと連結するので、勝手に連結してしまうという心配はありません。
※定義だけのセル(表示文字情報がないセル)に～を入れた場合のみ下のセルと連結する仕様である。
※だからこそコメント文字が入れられないのだ・・・・トレードオフ

ほぼ完成したがもっとＡＢＣの要素が際立つようにしたい！それぞれの要素に色を割り当て区分を明確にする
項目に該当する行の直下に、最終文字にcを付いたフォーマット指定行を追加した⇒1行目
※特定の行以下のすべての行に表示形式を適用させる方法⇒「行に対するフォーマット指定：c行」

オレンジ色の項目まで色が・・・　間に入れることを試みる⇒失敗⇒結合途中で差し込むとダメなのか・・・
※この現象は「普通の表」では発生せず想像の通りに機能します。失敗理由は「×」の箇所の結合

結合途中の部分にチルダ入れてみるテスト　結果：おしい！定義として機能せず普通の行扱いになったようだ

まずは一旦全体を定義した後に戻す

美しくないが、項目に該当する部分をオレンジに個別指定することで対応する・・・面倒
ポイントは「ＢＧ定義＋～」にすることです。

完成品

完成！こうしてソースの可読性は下がっていくのであった
[注意]この例の場合は「×」の連結がネックになってややこしくなっているだけです。
「×」連結の部分を取り除けばもっとエレガントなソースで表現できます(言い訳)

仕上げ：区分が目立つようにする、項目内容を読みやすく色を落とす

仕上げ２：検証中の不具合を利用して項目とデータ間に上下間隔の小さい空の行を突っ込む

※ソースはカオスだが見た目やイメージ通りに仕上がった。満足
※行の途中にコメントが打てれば可読性は上げられそうなもんだが・・・

くやしいのでシンプルに表現するテスト：wikiの可能性

一旦この状態へロールバック

×に該当する列を削る、確認

一気に仕上げる、項目指定、上下結合、書式指定行の追加(まだ書式内容は実装しない)

くやしいのでシンプルに表現するテスト：完成品

最後に書式内容は実装を実装して完了！　ね、簡単でしょ(汗)

おっと、空白の部分をグレー指定する

※表現したいイメージから離れた気がする、今回のケースでは不適当。まだ別の表にしたほうがマシ。
※複雑化した正しい表現か、別表にして文章を工夫するかのトレードオフ

テーブルの縦並び(疑似)

「え？縦なら2つ書けばいいじゃん」とは言わない
一応利点を補足すると

• 情報構成として意味付けを置くことができる
• 複数に分けると上下で列の幅が異なり見栄えがよろしくない→列幅決めれば？→予測や目途が立てば、な？
• 美しいテンプレートとは視認性だけでなくメンテナンスも容易である←これを目指す

テーブルの縦並び(疑似)：シンプル

テーブルの縦並び(疑似)：シンプル

いつものように項目Maxで全部並べてみる

テーブルの縦並び(疑似)：シンプル

上下の連結、項目化をする

テーブルの縦並び(疑似)：シンプル完成

Typeごとに行定義cを埋め込む ※これでテンプレとしては完成

テーブルの縦並び(疑似)：複雑

折角だからここから拡張してみる、想定とする骨格は次の通り。

• 項目が2段になる　←ポイント：内容が長くなる項目同士を左右に置かず上下に分割させると横長化を防止
• Typeが「Ａxあ」と場合分けされる
  まずは想定どおり項目を2段になるよう追加してみる

テーブルの縦並び(疑似)：複雑

次にTypeが「Ａxあ」と場合分けされるされるよう列の追加
※骨格がさらに変更になりそうな場合は、この段階をテンプレートにしておくのも手
※この先は骨格変更がない、という想定でシェープする作業

テーブルの縦並び(疑似)：複雑

情報単位にセルを連結させていく ※ある意味完成

テーブルの縦並び(疑似)：複雑

折角なので項目単位で情報分割されていることを分かりやすくするために空行を入れる ※FFFFFFでc定義
また、Typeや種類を強調するために空列を入れる ※FFFFFaで列追加
※列追加は左(右)からいくつと念じながら目を酷使してください。まだ未入力の状態なので序の口です

テーブルの縦並び(疑似)：複雑：メンテナンステスト(難易度3)

最後の仕上げです、見た目用の空セルを処理していきます。方針はどちらでも構いません
① 縦に走る区分けを重視する ←トラブルになります。茶番については下記項目を参照
② 横に走る区分けを重視する ←無用なトラブルを避けるにはこの「レコード単位を優先」とお考え下さい
今回は①を採用します、理由はなんとなくですが情報が追加(例えばB-あ-2とか)されると想定したときに使いやすそう
もっと言うならA←→B間は区分だけの意味だが種類←→ID間の隙間は概要or詳細で意味を持つから(こじつけ)

と、のたまっていた筆者は左から3つ目のセルを上の2番目から順にチルダに置き換えていきましたが
なんと表が壊れてしまいました。この状態からトラブル要因を探し出し正しく表示されるよう修正を試みてください。
制限時間∞

テーブルの縦並び(疑似)：複雑：メンテナンステスト(解答例)

行定義の左から3つめの項目の定義情報と縦連結とでトラブルになっていたから
行定義の左から3つめの項目を無理やりチルダに置き換えたところ次のような状態になった
※このトラブルは筆者2回目、なにか根本的に考え方が間違っているか仕様の不備(都合)なのか・・・ガックシ
これは使えないので別の手段を模索する

テーブルの縦並び(疑似)：複雑：完成

悪い例を分かりやすく提示できたので次に良い例を提示します。
まずは空行となっている箇所を連結で整理した後に、残りの列の連結を行います。
折角なので列連結は情報単位ごとの2行づつになるように合わせます。

※＞で定義されている行は空行なのでとても判別しやすくて良いですね(強がり)
※追加情報単位であることが空白からも読み取れるので良いですね(なるほど)
メモ：wikiはあくまで表示であって項目とデータの因果関係は存在していない。
　　　したがって列単位を優先せず行単位を優先する考え方をベースにした方がいろいろと都合が良い。
　　　レコード単位が定義である←→定義によってレコードが作られる　との着眼の違い。

テーブルの縦並び(疑似)：拡張検証

ちょっとテーブルに枠を付けてみる拡張テスト。
やる前からくどいのは想像できるが折角の空情報＝#FFFFFaを生かしてみる
枠に相当する行列を追加する。まずは行を追加、続いて列を追加。

テーブルの縦並び(疑似)：拡張検証

上記構成のまま、#FFFFFaを#000001へエディタにて置換する。
※まったく関係ない話だが業務指導で置換を説明してセクハラだとよ。それって逆セクハラじゃね？やれやれ

※新規に追加した枠の部分へ定義が届いていない、次で修正する

テーブルの縦並び(疑似)：拡張検証

カラーの直接指定が最小限になるように修正してみる。一発でできていればうれしいかも
相変わらず修正手順は行→列でおこなっていく(手順の遵守は自分のために行う儀式)

そりゃ
これはひどいｗｗｗ

テーブルの縦並び(疑似)：拡張検証

上記はひどすぎて修正するきにもならない、段階的に修正を試みる。
まずは行の単位のみの修正する。

ここで気が付いた、上記の失敗理由は2行目先頭項目で横着して1行目の定義を引っ張ろうとしたからだ
一見成功しそうだがトラブルになるのも定義連鎖しちゃってるし無理もない

テーブルの縦並び(疑似)：拡張検証

次は列の修正、行定義で固まっている箇所は手出し無用、その上で未定義部分を追加修正していく。
まずは項目部分を定義→連結、次のTypeＡを定義→連結・・・　慌てずに

実はこの状態だと無駄な定義？(削除可能な定義)が残っている。次で修正して完成。

テーブルの縦並び(疑似)：拡張検証

定義を見直して完成、湧く色が黒なのが悪いのもあるけど白背景には合わない
技術検証したおかげで慣れてきた実感を確かめることができた、満足。

情報入力列の#000001が不要だったので削除した、確かにこれが一番定義数は少ない
だがソース改変時の可読性としては下がったと言える。
次は可読性の向上を図るための工夫を取り入れてみる。
奇抜なコードよりメンテナンスの容易さが大切にされるケースを想定

テーブルの縦並び(疑似)：拡張検証

ソースの可読性を上げてみるテスト。
空のセルであることが分かると重宝される部分に色を埋め込んでいく(特に種類とIDの間)
ただし、手順の通り空行の箇所は手出し無用。そこだけ注意する。必要あるのか・・・
ちょっと疑問に思うが、マイルールの直感を信じて触らないこととする

予想できたはず、なぜ気が付かない・・・
ちゃんと次でFixする

テーブルの縦並び(疑似)：拡張検証：完成

最後の最後にオチがつく相変わらずのへっぽこぶり
情報単位の連結を行い完成、案外時間がかかった印象
ただテンプレート(中身がない)のソース眺めてみても#000001の存在感はとても貴重だと感じた。
ひたすら｜が並ぶと空目しがちなので目安があると助かる。
クエストの解説セルにも色が付いていたからすぐ入力できたのであって、あの目印がなければ
手間やミスも多かったのかもしれない。
結論：定義の重複と考えずにヒントとしてカラーを利用することはwikiのソースの可読性を高めるのに有効である。

※全然関係ないが、黒の交差しているところをじっと見てると錯覚がおきる。目が疲れた・・・

テーブルの３×３マス(テンキータイプ)

もはや今までの検証で不要だとも思ったが画像アルバム見たいな要素でも使えるかと
いらぬ心配をしたのでこの際作成してみる

テーブルの３×３マス：シンプル

テーブルの３×３マス：シンプル

まずはいつもの通りに３×３だけ用意してみる

次に項目を付けて、項目化を行う

次に項目の間となる行列に隙間を入れる

テーブルの３×３マス：シンプル

行定義にしたのは拡張性を見据えてのこと
※簡単な表なら直接カラー指定の方が可読性としても好ましい、むしろ行定義の方が手間

テーブルの３×３マス：シンプル

色の向きがなんとなくしっくりこないので横にグラデーションさせる
同時に空行や項目へのカラー定義が引き継がれないように設定する
[重要] 常に行の単位を優先して設定をおこなうこと ※3度目の正直(理由や詳細は上記で解説済み)

※この検証で確認できたが、2段目の項目定義(オレンジ色)が上位の定義で上書きされている
※colspanで連結していることと定義情報が途切れることは関係がないことが確認できた。なるほど

テーブルの３×３マス：シンプル

この場合は項目定義色(オレンジ)を明示的に#FFF5E7指定する必要がある。
可読性は下がるがこれも一応行定義にして追加する。

※「先頭定義は不要だ」との意見には同意できる。しかし項目色を変えたい場合に対応できない。
※筆者が一括置換が大好きだからだ！(←意識しだしたらなんかすっごく卑猥な響きだ)

テーブルの３×３マス：シンプル：完成

最後の仕上げに余白の連結を行い、最終行も不要なのでカットする

※空セルのNameと数字の間の線は気にしてはならない。修正しようと行定義cに手を入れると崩れる

テーブルの３×３マス：枠セルを追加

これにも枠を入れてみよう
繰り返しになるが修正する際に大事なことは「行単位を優先して意識すること」
1. 上下の枠を整備する
2. 列を追加する
※まずは色や連結にはこだわらない

テーブルの３×３マス：枠セルを追加

次に色#FFFFFaを付ける、この際ソースの可読性を意識して該当するセルにも埋め込んでおく

※一体何が起こったのだろうか、やはりやり過ぎなのか、それとも例がシンプルすぎて目印が不要なのか
　結局余計分かりにくくなってしまった・・・

テーブルの３×３マス：枠セルを追加

色#FFFFFaを一括置換して別の色：#0000FFにする
さて一発で成功するだろうか

※うん、わかってた

テーブルの３×３マス：枠セルを追加

あ～先頭の定義みごとに空っぽだ、しゃ～ない
ただ右端の定義が微妙に異なって間違っている点に関しては作業手順を軽視した結果であるため反省すること

テーブルの３×３マス：枠セルを追加：完成

もう一度一括置換して再確認する。
結論：シンプルな表ではカラー指定による可読性の向上は見込めない、バランスを見極めてポイント化することが大切である

比較用テーブル

左右に情報を載せることで比較を容易にする様式、スペック表みたいなヤツ

比較用テーブル

比較用テーブル：シンプル

まずはいつもの通りに項目を用意する

比較用テーブル：シンプル：完成

項目化と行定義による色分けを追加して完成
これ以上手を入れるべき余白も特になかった