Seesaa Wikiの記法リファレンスです。

テーブル(表組み)記法編集する

最終更新： staff_wiki 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):文字サイズ改行~~改行|

表示例

ヘッダ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
1eee1000
2ddd500
3ccc300


右のセルと結合する

「|>|」で右側のセルと結合します。
記法名記法説明
右に結合(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|
|}

表示例

thththth
tdtdtdtd
tdtdtdtd
tdtdtdtd
tdtdtdtd
tdtdtdtd


テーブル内ソート

テーブルの内容をソートさせることができます。
テーブルの先頭に{| 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
1eee1000
2ddd500
3ccc300
4bbb18
5aaa1

テーブル行編集

テーブルを行ごとに編集できるようになります。
テーブルの先頭に{| 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編集
1eee1000編集
2ddd500編集
3ccc300編集
4bbb18編集
5aaa1編集

フィルター機能

テーブルを指定のキーワードで絞り込むことができます。
テーブルの先頭に{| 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
1eee1000
2ddd500
3ccc300
4bbb18
5aaa1

複数の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編集
1eee1000編集
2ddd500編集
3ccc300編集
4bbb18編集
5aaa1編集
このエントリーをTumblrにポストClip to Evernoteこのエントリーをはてなブックマークに追加
テーブル(表組み)記法 - Seesaa Wiki　簡単記法リファレンス 先頭へ
タグ

このページへのコメント

テーブル自体をセンターに寄せる「{| style="margin-left:auto;margin-right:auto"」とソートなどを設定する「{| class="sort filter"」を両方とも適用させたいのですが、

{| style="margin-left:auto;margin-right:auto"
{| class="sort filter edit"

このような感じで書くとセンタリングは生きるのですが、ソートなどのclass属性の設定が全滅してしまいます。
両立出来る書き方がわかる方が居ましたらご教授ください。

0
Posted by 名無し(ID:HFmkZtvyTQ) 2023年06月04日(日) 11:47:51 返信数(1) 返信

{|style="margin-left:auto;margin-right:auto" class="sort filter edit"
と同じ行に書けば両立できます。
あくまで{|の行にしか属性設定はできないので改行したり他のタグが入ると機能しなくなりますね。
当然終了も
|}
が一行のみになります

1
Posted by  angelic_kitten angelic_kitten 2023年06月04日(日) 16:06:21

テーブルのテキストに、縦線を入れたい場合はどうなりますか？
テーブルの区切りの縦線になってしまいます
全角の｜にするしかないですかね？

0
Posted by 名無し(ID:lbcJNWoAKA) 2023年05月29日(月) 14:43:59 返信数(1) 返信

|にすれば半角のそれ（テーブルタグで使われているもの）が表示できます。

0
Posted by  angelic_kitten angelic_kitten 2023年05月29日(月) 22:53:12

フィルター検索でand検索やor検索できませんか？

27
Posted by 名無し(ID:ayqA37brBQ) 2023年01月29日(日) 08:44:39 返信

【a】でキーワード打ち込んだら【A】と【a】を結果として同時に表示して欲しいです…

24
Posted by 名無し(ID:E1HydPm7ZQ) 2021年11月10日(水) 16:53:40 返信

表の中にリンクを設定する方法はありますか？

23
Posted by daiku 2021年10月30日(土) 04:38:05 返信

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい
 

最近更新されたスレッド

Wiki内検索

メニュー

最近更新したページ

最新コメント

タグ

イメージ記法 テーブル記法 テキスト記法 ページ全般 リスト記法 リンク記法 見出し 索引 便利な記法

アクセス解析中

メンバーのみ編集できます