Seesaa Wiki 簡単記法リファレンス

テーブル(表組み)記法

行頭から | で区切ると表組み(テーブル)になります。

|テキスト|テキスト|テキスト|
|テキスト|テキスト|テキスト|
テキスト テキスト テキスト
テキスト テキスト テキスト

セルは、ヘッダ、表示位置、背景色、文字色、文字サイズなどが指定できます。
記法名 記法 説明
表組み(テーブル) |〜〜|〜〜| 表組み(テーブル)を作成します
属性の設定 {|〜〜|} テーブルに属性を設定します
右に結合(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):文字サイズ改行~~改行|

表示例

ヘッダ1 ヘッダ2 ヘッダ3
左寄せ センタリング 右寄せ
右寄せ 左寄せ センタリング
部分ヘッダ テキスト テキスト
背景色 文字色 文字サイズ改行
改行


表組み(テーブル)を作成する

行頭から | で区切ると表組み(テーブル)になります。
記法名 記法 説明
表組み(テーブル) |〜〜|〜〜| 表組み(テーブル)を作成します

サンプル

|テキスト|テキスト|テキスト|
|テキスト|テキスト|テキスト|

表示例

テキスト テキスト テキスト
テキスト テキスト テキスト


属性の設定

テーブルに属性を設定し、幅の指定や独自のデザインを可能にします。
記法名 記法 説明
テーブルの横幅を指定する {|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|
|}

表示例

タイトル1 タイトル2 タイトル3
1 eee 1000
2 ddd 500
3 ccc 300


右のセルと結合する

「|>|」で右側のセルと結合します。
記法名 記法 説明
右に結合(colspan) |>|〜〜| 右のセルと結合します(colspan)

サンプル

|テキスト|テキスト|テキスト|
|テキスト|>|テキスト|

表示例

テキスト テキスト テキスト
テキスト テキスト


上のセルと結合する

「|^|」で上側のセルと結合します。
この記法は新世代テンプレートのみ対応しております。
記法名 記法 説明
上に結合(rowspan) |^|〜〜| 上のセルと結合します(rowspan)

サンプル

|テキスト|テキスト|
|テキスト|^|

表示例

テキスト テキスト
テキスト


セルの幅指定

「w():」でセルの幅を指定します。
px、または%で指定することができます。
記法名 記法 説明
セルの幅指定 |w():| セルの幅を指定します

サンプル

|w(100px):テキスト|テキスト|テキスト|
|テキスト|>|テキスト|

表示例

テキスト テキスト テキスト
テキスト テキスト


セルの高さ指定

「h():」でセルの高さを指定します。
px、または%で指定することができます。
記法名 記法 説明
セルの高さ指定 |w():| セルの高さを指定します

サンプル

|h(100px):テキスト|テキスト|テキスト|
|テキスト|>|テキスト|

表示例

テキスト テキスト テキスト
テキスト テキスト


行全体をヘッダにする

「~」で、行全体をヘッダにします。
記法名 記法 説明
ヘッダ(行全体) |~〜〜| 行全体をヘッダ(th)にします

サンプル

|~テキスト|テキスト|テキスト|
|テキスト|テキスト|テキスト|

表示例

テキスト テキスト テキスト
テキスト テキスト テキスト


指定のセルのみをヘッダにする

「!」で、指定のセルのみをヘッダ(th)にします。
記法名 記法 説明
ヘッダ(セル単位) |!〜〜| 指定のセルのみをヘッダ(th)にします

サンプル

|!テキスト|テキスト|テキスト|
|テキスト|テキスト|テキスト|

表示例

テキスト テキスト テキスト
テキスト テキスト テキスト


セル内の文字を左寄せにする

セル内の文字は、デフォルトでは左寄せで表示されます。
「|left:〜〜|」で、文字を左寄せに表示することもできます。
記法名 記法 説明
文字の左寄せ |left:〜〜| 文字を左寄せにします
※デフォルトは左寄せになっています

サンプル

|~テキストテキスト|テキストテキスト|テキストテキスト|
|テキスト|テキスト|left:テキスト|

表示例

テキストテキスト テキストテキスト テキストテキスト
テキスト テキスト テキスト


セル内の文字をセンタリングする

「|center:〜〜|」で、セル内の文字をセンタリングします。
記法名 記法 説明
文字のセンタリング |center:〜〜| 文字をセンタリングします

サンプル

|~テキストテキスト|テキストテキスト|テキストテキスト|
|テキスト|center:テキスト|テキスト|

表示例

テキストテキスト テキストテキスト テキストテキスト
テキスト テキスト テキスト


セル内の文字を右寄せする

「|right:〜〜|」で、セル内の文字を右寄せします。
記法名 記法 説明
文字の右寄せ |right:〜〜| 文字を右寄せします

サンプル

|~テキストテキスト|テキストテキスト|テキストテキスト|
|テキスト|right:テキスト|テキスト|

表示例

テキストテキスト テキストテキスト テキストテキスト
テキスト テキスト テキスト


セル内の文字を上揃えにする

「|top:〜〜|」で、セル内の文字を上揃えにします。
記法名 記法 説明
文字の上揃え |top:〜〜| 文字を上揃えにします

サンプル

|~テキストテキスト|テキストテキスト|
|top:テキスト|テキスト~~テキスト|

表示例

テキストテキスト テキストテキスト
テキスト テキスト
テキスト


セル内の文字を中央揃えにする

「|middle:〜〜|」で、セル内の文字を中央揃えにします。
記法名 記法 説明
文字の中央揃え |middle:〜〜| 文字を中央揃えにします

サンプル

|~テキストテキスト|テキストテキスト|
|middle:テキスト|テキスト~~テキスト|

表示例

テキストテキスト テキストテキスト
テキスト テキスト
テキスト


セル内の文字を下揃えにする

「|bottom:〜〜|」で、セル内の文字を下揃えにします。
記法名 記法 説明
文字の下揃え |bottom:〜〜| 文字を下揃えにします

サンプル

|~テキストテキスト|テキストテキスト|
|bottom:テキスト|テキスト~~テキスト|

表示例

テキストテキスト テキストテキスト
テキスト テキスト
テキスト


セル内の文字を改行する

「|〜〜~~〜〜|」で、セル内の文字を改行します。
記法名 記法 説明
文字の改行 |〜〜~~〜〜| セル内の文字を改行します

サンプル

|~テキストテキスト|テキストテキスト|テキストテキスト|
|テキスト|テキスト~~テキスト|テキスト|

表示例

テキストテキスト テキストテキスト テキストテキスト
テキスト テキスト
テキスト
テキスト


セル内の文字の色を指定する

「|color(色指定):〜〜|」で、セル内の文字の色を指定します。
記法名 記法 説明
文字色 |color(色指定):〜〜| セル内の文字の色を指定します

サンプル

|~テキストテキスト|テキストテキスト|テキストテキスト|
|color(#FF0000):テキスト|color(#FF00FF):テキスト|テキスト|

表示例

テキストテキスト テキストテキスト テキストテキスト
テキスト テキスト テキスト


セル内の文字のサイズを指定する

「|size(サイズ指定):〜〜|」で、セル内の文字のサイズを指定します。
記法名 記法 説明
文字サイズ |size(サイズ指定):〜〜| セル内の文字のサイズを指定します

サンプル

|~テキストテキスト|テキストテキスト|テキストテキスト|
|size(18):テキスト|size(10):テキスト|テキスト|

表示例

テキストテキスト テキストテキスト テキストテキスト
テキスト テキスト テキスト


セル内の背景色を指定する

「|bgcolor(色指定):〜〜|」で、セル内の背景色を指定します。
記法名 記法 説明
背景色 |bgcolor(背景色指定):〜〜| セル内の背景色を指定します

サンプル

|~テキストテキスト|テキストテキスト|テキストテキスト|
|bgcolor(#FF0000):テキスト|bgcolor(#FF00FF):テキスト|テキスト|

表示例

テキストテキスト テキストテキスト テキストテキスト
テキスト テキスト テキスト


セル内の背景色と文字色を指定する

「|bgcolor(色指定):color(色指定):〜〜|」で、セル内の背景色と文字色を指定します。
記法名 記法 説明
背景色 |bgcolor(背景色指定):color(色指定):〜〜| セル内の背景色を指定します

サンプル

|~テキストテキスト|テキストテキスト|テキストテキスト|
|bgcolor(#FF0000):テキスト|bgcolor(#FF00FF):color(#FFFFFF):テキスト|テキスト|

表示例

テキストテキスト テキストテキスト テキストテキスト
テキスト テキスト テキスト


複数行書式設定

書式設定を複数行まとめて設定することができます。
テーブルの行末に「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|
|}

表示例

th th th th
td td td td
td td td td
td td td td
td td td td
td td td td


テーブル内ソート

テーブルの内容をソートさせることができます。
テーブルの先頭に{| 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|
|}

表示例

タイトル1 タイトル2 タイトル3
1 eee 1000
2 ddd 500
3 ccc 300
4 bbb 18
5 aaa 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|
|}

表示例

タイトル1 タイトル2 タイトル3
1 eee 1000
2 ddd 500
3 ccc 300
4 bbb 18
5 aaa 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|
|}

表示例

タイトル1 タイトル2 タイトル3
1 eee 1000
2 ddd 500
3 ccc 300
4 bbb 18
5 aaa 1

複数のclass指定

classには複数の値を設定することができます。sort edit filterなどをまとめて指定することができます。
class名を半角スペースで区切り、記述してください。

サンプル

{| class="sort edit filter"
|~タイトル1|タイトル2|タイトル3|
|1|eee|1000|
|2|ddd|500|
|3|ccc|300|
|4|bbb|18|
|5|aaa|1|
|}

表示例

タイトル1 タイトル2 タイトル3
1 eee 1000
2 ddd 500
3 ccc 300
4 bbb 18
5 aaa 1

タグ

コメント(29)