最終更新:
staff_wiki 2017年06月12日(月) 21:23:29履歴
行頭から | で区切ると表組み(テーブル)になります。
セルは、ヘッダ、表示位置、背景色、文字色、文字サイズなどが指定できます。
|テキスト|テキスト|テキスト| |テキスト|テキスト|テキスト|
テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト |
セルは、ヘッダ、表示位置、背景色、文字色、文字サイズなどが指定できます。
記法名 | 記法 | 説明 |
---|---|---|
表組み(テーブル) | |〜〜|〜〜| | 表組み(テーブル)を作成します |
属性の設定 | {|〜〜|} | テーブルに属性を設定します |
右に結合(colspan) | |>|〜〜| | 右のセルと結合します(colspan) |
上に結合(rowspan) | |^|〜〜| | 上のセルと結合します(rowspan) |
セルの幅指定 | |w():| | セルの幅を指定します |
セルの高さ指定 | |h():| | セルの高さを指定します |
ヘッダ(行全体) | |~〜〜| | 行全体をヘッダ(th)にします |
ヘッダ(セル単位) | |!〜〜| | 指定のセルのみをヘッダ(th)にします |
文字の左寄せ | |left:〜〜| | 文字を左寄せにします ※デフォルトは左寄せになっています |
文字のセンタリング | |center:〜〜| | 文字をセンタリングします |
文字の右寄せ | |right:〜〜| | 文字を右寄せします |
文字の上揃え | |top:〜〜| | 文字を上揃えにします |
文字の中央揃え | |middle:〜〜| | 文字を中央揃えにします |
文字の上揃え | |bottom:〜〜| | 文字を下揃えにします |
文字の改行 | |〜〜~~〜〜| | セル内の文字を改行します |
文字色 | |color(色指定):〜〜| | セル内の文字の色を指定します |
文字サイズ | |size(サイズ指定):〜〜| | セル内の文字のサイズを指定します |
背景色 | |bgcolor(色指定):〜〜| | セル内の背景色を指定します |
背景色+文字色 | |bgcolor(色指定):〜〜| | セル内の背景色を指定します |
複数行書式設定 | |bgcolor(red)|c | 書式設定を複数行まとめて設定します |
テーブル内ソート | {|class="sort"〜〜|} | テーブルの内容をソートさせます |
テーブル行編集 | {|class="edit"〜〜|} | テーブルを行ごとに編集できるようになります |
フィルター機能 | {|class="filter"〜〜|} | テーブルを指定のキーワードで絞り込むことができます |
複数のclass指定 | {|class="sort edit filter"〜〜|} | テーブルに複数のclassを指定します |
|~ヘッダ1|ヘッダ2|ヘッダ3| |left:左寄せ|center:センタリング|right:右寄せ| |right:右寄せ|left:左寄せ|center:センタリング| |!部分ヘッダ|テキスト|テキスト| |bgcolor(#FF0000):背景色|color(#FF0000):文字色|size(18):文字サイズ改行~~改行|
テーブルに属性を設定し、幅の指定や独自のデザインを可能にします。
記法名 | 記法 | 説明 |
---|---|---|
テーブルの横幅を指定する | {|width=""〜〜|} | テーブルの横幅を固定にすることが出来ます |
テーブルの高さを指定する | {|height=""〜〜|} | テーブルの高さ固定にすることが出来ます |
テーブルにclassを指定する | {|class=""〜〜|} | テーブルにclassを指定し、CSSでカスタマイズできます |
テーブルにstyleを指定する | {|style=""〜〜|} | テーブルにstyleを指定し、CSSでカスタマイズできます |
{| width="500px" class="custom-css" style="color:#6e7955" |~タイトル1|タイトル2|タイトル3| |1|eee|1000| |2|ddd|500| |3|ccc|300| |}
「|^|」で上側のセルと結合します。
この記法は新世代テンプレートのみ対応しております。
この記法は新世代テンプレートのみ対応しております。
記法名 | 記法 | 説明 |
---|---|---|
上に結合(rowspan) | |^|〜〜| | 上のセルと結合します(rowspan) |
セル内の文字は、デフォルトでは左寄せで表示されます。
「|left:〜〜|」で、文字を左寄せに表示することもできます。
「|left:〜〜|」で、文字を左寄せに表示することもできます。
記法名 | 記法 | 説明 |
---|---|---|
文字の左寄せ | |left:〜〜| | 文字を左寄せにします ※デフォルトは左寄せになっています |
「|bgcolor(色指定):color(色指定):〜〜|」で、セル内の背景色と文字色を指定します。
記法名 | 記法 | 説明 |
---|---|---|
背景色 | |bgcolor(背景色指定):color(色指定):〜〜| | セル内の背景色を指定します |
|~テキストテキスト|テキストテキスト|テキストテキスト| |bgcolor(#FF0000):テキスト|bgcolor(#FF00FF):color(#FFFFFF):テキスト|テキスト|
書式設定を複数行まとめて設定することができます。
テーブルの行末に「c」があると書式設定行と認識され、次に「c」が記載された行まで同じ書式が適用されます。
「c」のある行の内容は表示されません。
「c」によるテーブルの書式設定と、セル個別の書式設定の両方ある場合は、セル個別の書式設定が優先されます。
テーブルの行末に「c」があると書式設定行と認識され、次に「c」が記載された行まで同じ書式が適用されます。
「c」のある行の内容は表示されません。
「c」によるテーブルの書式設定と、セル個別の書式設定の両方ある場合は、セル個別の書式設定が優先されます。
記法名 | 記法 | 説明 |
---|---|---|
まとめて書式設定 | c | 書式設定を複数行まとめて設定 |
{| width="500px" |~th|th|th|th| |color(red):right|color(blue):size(30)|bgcolor(red):center|bgcolor(blue)|c |td|td|td|td| |td|td|td|td| |td|td|td|td| |||||c |td|td|td|td| |td|td|td|td| |}
テーブルの内容をソートさせることができます。
テーブルの先頭に{| class="sort"を、テーブルの最後に|}を記述し、1行目のセルにヘッダを指定します。
なお、テーブル内に,(カンマ)が含まれている場合、正しくソートできないことがございます。
その場合には、クラスに「number」を加えると,(カンマ)が含まれている場合にも、ソートができるようになります。
※ただし「number」を追加した場合、ひらがななどの文字列が正しくソートできないことがございますので、その点ご理解の上、設定を行ってください。
テーブルの先頭に{| class="sort"を、テーブルの最後に|}を記述し、1行目のセルにヘッダを指定します。
なお、テーブル内に,(カンマ)が含まれている場合、正しくソートできないことがございます。
その場合には、クラスに「number」を加えると,(カンマ)が含まれている場合にも、ソートができるようになります。
※ただし「number」を追加した場合、ひらがななどの文字列が正しくソートできないことがございますので、その点ご理解の上、設定を行ってください。
記法名 | 記法 | 説明 |
---|---|---|
テーブル内ソート | {|class="sort"〜〜|} | テーブルの内容をソートさせます |
テーブル内ソート(カンマ)を含む場合 | {|class="sort number"〜〜|} | ,(カンマ)を含むテーブルの内容をソートさせます |
{| class="sort" |~タイトル1|タイトル2|タイトル3| |1|eee|1000| |2|ddd|500| |3|ccc|300| |4|bbb|18| |5|aaa|1| |}
テーブルを行ごとに編集できるようになります。
テーブルの先頭に{| class="edit"を、テーブルの最後に|}を記述し、1行目のセルにヘッダを指定します。
テーブルの先頭に{| class="edit"を、テーブルの最後に|}を記述し、1行目のセルにヘッダを指定します。
記法名 | 記法 | 説明 |
---|---|---|
テーブル行編集 | {|class="edit"〜〜|} | テーブルを行ごとに編集できるようになります |
{| class="edit" |~タイトル1|タイトル2|タイトル3| |1|eee|1000| |2|ddd|500| |3|ccc|300| |4|bbb|18| |5|aaa|1| |}
テーブルを指定のキーワードで絞り込むことができます。
テーブルの先頭に{| class="filter"を、テーブルの最後に|}を記述し、1行目のセルにヘッダを指定します。
テーブルの先頭に{| class="filter"を、テーブルの最後に|}を記述し、1行目のセルにヘッダを指定します。
記法名 | 記法 | 説明 |
---|---|---|
フィルター機能 | {|class="filter"〜〜|} | テーブルを指定のキーワードで絞り込むことができます |
{| class="filter" |~タイトル1|タイトル2|タイトル3| |1|eee|1000| |2|ddd|500| |3|ccc|300| |4|bbb|18| |5|aaa|1| |}
{| class="sort edit filter" |~タイトル1|タイトル2|タイトル3| |1|eee|1000| |2|ddd|500| |3|ccc|300| |4|bbb|18| |5|aaa|1| |}
タグ
このページへのコメント
短文の列と長文の列があった場合、短文の方が長文の児童改行に応じて縦に引き延ばされてしまうんですが、特定のセルだけ改行しないようにする事ってできますかね?
児童→自動です
{|style="white-space: nowrap;"
|w(幅指定すればなおよし):|c
中身
|}
すれば全体はできるかと思いますが、列単位セル単位となるとスタイルシートで何らかする必要があるかともいます。
手動改行で何とかしてみようと思います、ありがとうございました!
文字を詰まらせずにするにはどうすればいいでしょうか。
Wikipediaみたいにスライドすることで全部読めるようにしたいのですが
細々した調整となるとCSSを調べてもらうことにはなりますが
{|style="display:block; overflow-x:auto;"
で多分やりたいもののベースはできるかと思います。
上にのっけるだけでいいんですか?
なんかうまいことできなくて…
{| style="white-space:nowrap; overflow:scroll;"
これを乗っけて「|}」でテーブルを閉じればいけますよ!
セルの分割はどうしたらいいですかね
「結合」はできても「分割」はないので、一番小さい単位を基にそれ以外を結合するのが基本になります。
既に何らかで作成した表のセルを分割したい場合は表計算ソフトやテキストエディタで分割して区切り文字を|にするしかないと思います。
|abcdef|ghi|jkl|
↓(abcdefを3文字で分割)
|abc|def|ghi|jkl|
フィルター昨日で複数の言葉を指定することはできませんか?
テーブル自体をセンターに寄せる「{| style="margin-left:auto;margin-right:auto"」とソートなどを設定する「{| class="sort filter"」を両方とも適用させたいのですが、
{| style="margin-left:auto;margin-right:auto"
{| class="sort filter edit"
このような感じで書くとセンタリングは生きるのですが、ソートなどのclass属性の設定が全滅してしまいます。
両立出来る書き方がわかる方が居ましたらご教授ください。
{|style="margin-left:auto;margin-right:auto" class="sort filter edit"
と同じ行に書けば両立できます。
あくまで{|の行にしか属性設定はできないので改行したり他のタグが入ると機能しなくなりますね。
当然終了も
|}
が一行のみになります