.png)
Produced by C-take
テーブルのセルを結合する
SCP財団のテーブルと言えばこういう表記ですよね？
| header | header |
|---|---|
| cell-content | cell-content |
構文:
||~ header ||~ header ||
|| cell-content || cell-content ||
ただ、こんな事は思った事がありませんか。「セルを結合したい」と。
上記の構文で生成されるTable要素はclass名がwiki-content-tableのTable要素です。
よって、
[[table class="wiki-content-table"]]
[[row]]
[[hcell]]
header
[[/hcell]]
[[hcell]]
header
[[/hcell]]
[[/row]]
[[row]]
[[cell]]
cell-content
[[/cell]]
[[cell]]
cell-content
[[/cell]]
[[/row]]
[[/table]]
と書くとhtml構文と同じ形で（SCP財団標準の）テーブル要素を書く事ができます。
ちなみに[[row]]が<tr>(行)を、[[hcell]]が通常のhtmlで言う<th>(ヘッダー)を示し、[[cell]]が<td>通常のマス(セル)を表しマス。
後は……htmlの知識がある事が前提ですが、例えば
| 横3列結合 | ||
|---|---|---|
| 縦2列結合 | 横2列結合 | |
| 通常セル | 縦2列結合 | |
| 横2列結合 | ||
[[table class="wiki-content-table"]]
[[row]]
[[hcell colspan="3"]]
横3列結合
[[/hcell]]
[[/row]]
[[row]]
[[cell rowspan="2"]]
縦2列結合
[[/cell]]
[[cell colspan="2"]]
横2列結合
[[/cell]]
[[/row]]
[[row]]
[[cell]]
通常セル
[[/cell]]
[[cell rowspan="2"]]
縦2列結合
[[/cell]]
[[/row]]
[[row]]
[[cell colspan="2"]]
横2列結合
[[/cell]]
[[/row]]
[[/table]]
の様に"rowspan"や"colspan"を使う事で複雑なテーブルを作る事ができます。
セルの文字を潰さない
表ウィザードのテーブルを使うと、例えば下の様に
| 潰れた文章 | 長い文章（ここからはサンプルの為の文字数稼ぎです）あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん |
右のセルに長い文章を書いたせいで左のセルが潰れてしまう事があります。
こういう場合は潰したくないセルに
[[table class="wiki-content-table"]]
[[row]]
[[cell style="width:9em;"]]
潰したくない文章
[[/cell]]
[[cell]]
長い文章
[[/cell]]
[[/row]]
[[/table]]
のようにwidthの設定をすると潰れなくなります。
| 潰したくない文章 | 長い文章(ここから下はサンプルの為の文字数稼ぎです） あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん |
後地味にセル内で改行できるのもメリットです。
デメリットは見てわかる通り構文が恐ろしく面倒臭い事です。セルの結合を行いたい時やどうしても潰したくないセルがある時にご使用ください。
[[/collapsible]]
テーブルの位置を変更する
後、これは単なるhtml講座ですが例えばこのテーブルに対して
[[table class="wiki-content-table" style="display:block;float:right;"]]
[[row]]
[[hcell]]
header
[[/hcell]]
[[hcell]]
header
[[/hcell]]
[[/row]]
[[row]]
[[cell]]
cell-content
[[/cell]]
[[cell]]
cell-content
[[/cell]]
[[/row]]
[[/table]]
| header | header |
|---|---|
| cell-content | cell-content |
の様にTableにstyle="display:block;float:right;"という記述を追記するとテーブルを右端に寄せる事ができます。もしあなたの作るオブジェクトが生物系で、その種等を表記したい時は活用できるかも知れません。
もし、あなたが作る記事ではテーブルを1回しか使わず、尚且つセルの結合を行わない場合で右端寄せをしたいのであれば、下記のCSSモジュールを追記してください。これで表ウィザードによるテーブルも右端によるようになります。
[[module css]]
.wiki-content-table{
display:block;
float:right;
}
[[/module]]
皆様の表現の幅が広まれば幸いです。
後、一応この構文を使ってテーブルを右寄せしたら、どっかのタイミングで（このテーブルより下の位置で）下記構文を書いといてください。なんか問題なさそうな感じはするのですが、念の為（これを書かないとどういう事になるのかは話せば長くなるので割愛します）。
[[div style="clear:both;"]]
[[/div]]
文字の折り返しについて
表ウィザードのテーブルを使い、そのセル内にスペースを入れずに長い半角文字を打ち込んだ際、テーブルがやけに横長になる事はありませんか？
例えば下のような感じに
| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz |
こういう時は下記のCSSモジュールを追記すれば、きちんと自動で改行される様になります。
[[module css]]
.wiki-content-table{
word-break:break-all;
}
[[/module]]
下記は上記のCSSモジュールを適用した場合のシミュレーションですが、上記のCSSモジュールによって以下の様に表示されます。
| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz |
この"word-break:break-all;"の表現は結構重要で、例えばページ全体において自動で折り返しをして欲しい場合は下記のCSSモジュールを追記してください。
[[module css]]
#page-content{
word-break:break-all;
}
[[/module]]
報告書がバグったような記事を書きたい場合は有用でしょう。
全ては表ウィザードで生成される構文でstyle設定ができないのが悪い。