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　簡単記法リファレンス 先頭へ
タグ

このページへのコメント

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

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

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

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

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

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

おちんぽ

1
Posted by 名無し(ID:GmGGhXZjwQ) 2021年09月24日(金) 15:38:27 返信

今更ですが
文字の上揃え |bottom:〜〜| 文字を下揃えにします
の記法名の項目が「上」揃えになっています。

0
Posted by  angelic_kitten angelic_kitten 2019年07月26日(金) 20:22:14 返信

コメントをかく


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

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

最近更新されたスレッド

Wiki内検索

メニュー

最近更新したページ

最新コメント

タグ

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

アクセス解析中

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