table / tablehead / tablerow / tablecell : 列数の多い表でも対応可能なソート機能付きHTMLテーブルを表示

このショートコードを使用するには「Shortcodes for DigiPress」または「DigiPress Ex – Shortcodes」プラグインが必要です

スマートフォンなどの表示幅が狭いディスプレイ環境や、列数が多くオーバーフローしても横スクロールして表全体を表示できるHTMLテーブルを出力するショートコードです。
ソート機能も備わっています。

TablePressプラグインを利用している場合

「TablePress」プラグインを使用している場合は、「DP Ex-Shortcodes」のショートコードと重複するため、本プラグインでのテーブル表示をするには、[table]ショートコードのみ、接頭辞「dp_」を付けてください。

[table] → [dp_table]

HTMLテーブルショートコードの構成

テーブルショートコードは、行を追加する tablerow コード内に最小単位のセルとなる tablecell コードを追加することで、1行内に左から右へ並ぶセルをいくつも追加できます。

行を分ける(追加する)場合は、改めて tablerow コードから定義して tablecell コードを追加していきます。

HTMLテーブルショートコード表示例

ヘッダがない場合(オプション未指定)

1-1番目のセル	1-2番目のセル	1-3番目のセル	1-4番目のセル
2-1番目のセル	2-2番目のセル	2-3番目のセル	2-4番目のセル
3-1番目のセル	3-2番目のセル	3-3番目のセル	3-4番目のセル

このショートコード

[table]

[tablerow]
[tablecell]
1-1番目のセル
[/tablecell]

[tablecell]
1-2番目のセル
[/tablecell]

[tablecell]
1-3番目のセル
[/tablecell]

[tablecell]
1-4番目のセル
[/tablecell]
[/tablerow]

[tablerow]
[tablecell]
2-1番目のセル
[/tablecell]

[tablecell]
2-2番目のセル
[/tablecell]

[tablecell]
2-3番目のセル
[/tablecell]

[tablecell]
2-4番目のセル
[/tablecell]
[/tablerow]

[tablerow]
[tablecell]
3-1番目のセル
[/tablecell]

[tablecell]
3-2番目のセル
[/tablecell]

[tablecell]
3-3番目のセル
[/tablecell]

[tablecell]
3-4番目のセル
[/tablecell]
[/tablerow]

[/table]

行ヘッダがある場合

1行目タイトル	1-2番目のセル	1-3番目のセル	1-4番目のセル	1-5番目のセル
2行目タイトル	2-2番目のセル	2-3番目のセル	2-4番目のセル	2-5番目のセル
3行目タイトル	3-2番目のセル	3-3番目のセル	3-4番目のセル	3-5番目のセル

このショートコード

[table]

[tablerow
  title="1行目タイトル"
  icon="icon-crown"
  width="160px"]
[tablecell width="160px"]
1-2番目のセル
[/tablecell]

[tablecell width="160px"]
1-3番目のセル
[/tablecell]

[tablecell width="160px"]
1-4番目のセル
[/tablecell]

[tablecell width="160px"]
1-5番目のセル
[/tablecell]
[/tablerow]

[tablerow
  title="2行目タイトル"
  icon="icon-warmedal"]
[tablecell]
2-2番目のセル
[/tablecell]

[tablecell class="blue icon-crown" bgcolor="#F4FEC9"]
2-3番目のセル
[/tablecell]

[tablecell]
2-4番目のセル
[/tablecell]

[tablecell]
2-5番目のセル
[/tablecell]
[/tablerow]

[tablerow
  title="3行目タイトル"
  icon="icon-star"]
[tablecell]
3-2番目のセル
[/tablecell]

[tablecell]
3-3番目のセル
[/tablecell]

[tablecell]
3-4番目のセル
[/tablecell]

[tablecell]
3-5番目のセル
[/tablecell]
[/tablerow]

[/table]

列ヘッダがある場合

1列目タイトル	2列目タイトル	3列目タイトル	4列目タイトル
1-1番目のセル	1-2番目のセル	1-3番目のセル	1-4番目のセル
2-1番目のセル	2-2番目のセル	2-3番目のセル	2-4番目のセル
3-1番目のセル	3-2番目のセル	3-3番目のセル	3-4番目のセル

このショートコード

[table]
[tablehead
  title="1列目タイトル,2列目タイトル,3列目タイトル,4列目タイトル"
  icon="icon-safe,,icon-credit,icon-dollar"]

[tablerow]
[tablecell]
1-1番目のセル
[/tablecell]

[tablecell]
1-2番目のセル
[/tablecell]

[tablecell]
1-3番目のセル
[/tablecell]

[tablecell]
1-4番目のセル
[/tablecell]
[/tablerow]

[tablerow]
[tablecell]
2-1番目のセル
[/tablecell]

[tablecell class="blue icon-crown" bgcolor="#F4FEC9"]
2-2番目のセル
[/tablecell]

[tablecell]
2-3番目のセル
[/tablecell]

[tablecell]
2-4番目のセル
[/tablecell]
[/tablerow]

[tablerow]
[tablecell]
3-1番目のセル
[/tablecell]

[tablecell]
3-2番目のセル
[/tablecell]

[tablecell]
3-3番目のセル
[/tablecell]

[tablecell]
3-4番目のセル
[/tablecell]
[/tablerow]

[/tablehead]
[/table]

行ヘッダ＋列ヘッダがある場合

	2列目タイトル	3列目タイトル	4列目タイトル	5列目タイトル
1行目タイトル	1-2番目のセル	1-3番目のセル	1-4番目のセル	1-5番目のセル
2行目タイトル	2-2番目のセル	2-3番目のセル	2-4番目のセル	2-5番目のセル
3行目タイトル	3-2番目のセル	3-3番目のセル	3-4番目のセル	3-5番目のセル

このショートコード

[table]
[tablehead
  title=",2列目タイトル,3列目タイトル,4列目タイトル,5列目タイトル"
  icon=",icon-safe,icon-star,icon-credit,icon-dollar"]

[tablerow title="1行目タイトル"]
[tablecell]
1-2番目のセル
[/tablecell]

[tablecell]
1-3番目のセル
[/tablecell]

[tablecell]
1-4番目のセル
[/tablecell]

[tablecell]
1-5番目のセル
[/tablecell]
[/tablerow]

[tablerow title="2行目タイトル"]
[tablecell]
2-2番目のセル
[/tablecell]

[tablecell class="blue" bgcolor="#F4FEC9"]
2-3番目のセル
[/tablecell]

[tablecell]
2-4番目のセル
[/tablecell]

[tablecell]
2-5番目のセル
[/tablecell]
[/tablerow]

[tablerow title="3行目タイトル"]
[tablecell]
3-2番目のセル
[/tablecell]

[tablecell]
3-3番目のセル
[/tablecell]

[tablecell]
3-4番目のセル
[/tablecell]

[tablecell]
3-5番目のセル
[/tablecell]
[/tablerow]

[/tablehead]
[/table]

テーブル幅が表示幅よりも長い場合(横スクロール)

テーブルの幅が表示幅よりも長い場合は、自動的にスクロールバーが表示され、横スクロール可能な状態になります。

	1列目タイトル	2列目タイトル	3列目タイトル	4列目タイトル	5列目タイトル	6列目タイトル	7列目タイトル
1行目タイトル	1-1番目のセル通常は表示幅に合わせて自動で折り返ししません。	1-2番目のセルフォントサイズは14px。	1-3番目のセル	1-4番目のセル	1-5番目のセル	1-6番目のセル	1-7番目のセル
2行目タイトル	2-1番目のセル改行したい箇所では、<br />タグを明示します。	2-2番目のセル	2-3番目のセル	2-4番目のセル	2-5番目のセル	2-6番目のセル	2-7番目のセル

このショートコード

[table class="ft14px"]

[tablehead
title=",1列目タイトル,2列目タイトル,3列目タイトル,4列目タイトル,5列目タイトル,6列目タイトル,7列目タイトル"]

[tablerow title="1行目タイトル"]
[tablecell]
1-1番目のセル<br/>
通常は表示幅に合わせて自動で折り返ししません。
[/tablecell]
[tablecell]
1-2番目のセル<br/>
フォントサイズは14px。
[/tablecell]
[tablecell]
1-3番目のセル
[/tablecell]
[tablecell]
1-4番目のセル
[/tablecell]
[tablecell]
1-5番目のセル
[/tablecell]
[tablecell]
1-6番目のセル
[/tablecell]
[tablecell]
1-7番目のセル
[/tablecell]
[/tablerow]

[tablerow title="2行目タイトル"]
[tablecell]
2-1番目のセル<br/>
改行したい箇所では、br タグを明示します。
[/tablecell]
[tablecell]
2-2番目のセル
[/tablecell]
[tablecell]
2-3番目のセル
[/tablecell]
[tablecell]
2-4番目のセル
[/tablecell]
[tablecell]
2-5番目のセル
[/tablecell]
[tablecell]
2-6番目のセル
[/tablecell]
[tablecell]
2-7番目のセル
[/tablecell]
[/tablerow]

[/tablehead]
[/table]

セルにマウスホバー効果を有効にしたテーブル

1列目タイトル	2列目タイトル	3列目タイトル	4列目タイトル
1-1番目のセル	1-2番目のセル	1-3番目のセル	1-4番目のセル
2-1番目のセル	2-2番目のセル	2-3番目のセル	2-4番目のセル
3-1番目のセル	3-2番目のセル	3-3番目のセル	3-4番目のセル

このショートコード

[table highlight=true]
[tablehead
  title="1列目タイトル,2列目タイトル,3列目タイトル,4列目タイトル"]

[tablerow]
[tablecell]
1-1番目のセル
[/tablecell]

[tablecell]
1-2番目のセル
[/tablecell]

[tablecell]
1-3番目のセル
[/tablecell]

[tablecell]
1-4番目のセル
[/tablecell]
[/tablerow]
[tablerow]

[tablecell]
2-1番目のセル
[/tablecell]

[tablecell class="blue"]
2-2番目のセル
[/tablecell]

[tablecell]
2-3番目のセル
[/tablecell]

[tablecell]
2-4番目のセル
[/tablecell]
[/tablerow]

[tablerow]
[tablecell]
3-1番目のセル
[/tablecell]

[tablecell]
3-2番目のセル
[/tablecell]

[tablecell]
3-3番目のセル
[/tablecell]

[tablecell]
3-4番目のセル
[/tablecell]
[/tablerow]

[/tablehead]
[/table]

セルホバー時に任意のフォントカラーと背景カラーを指定したテーブル

1列目タイトル	2列目タイトル	3列目タイトル	4列目タイトル
1-1番目のセル	1-2番目のセル	1-3番目のセル	1-4番目のセル
2-1番目のセル	2-2番目のセル	2-3番目のセル	2-4番目のセル
3-1番目のセル	3-2番目のセル	3-3番目のセル	3-4番目のセル

このショートコード

[table
  highlight=true
  hoverrowbgcolor=#aae8e9
  hoverrowfontcolor=#465f60
  hovercellbgcolor=#23b5df
  hovercellfontcolor=#fff]

[tablehead
  title="1列目タイトル,2列目タイトル,3列目タイトル,4列目タイトル"]

[tablerow]
[tablecell]
1-1番目のセル
[/tablecell]

[tablecell]
1-2番目のセル
[/tablecell]

[tablecell]
1-3番目のセル
[/tablecell]

[tablecell]
1-4番目のセル
[/tablecell]
[/tablerow]

[tablerow]
[tablecell]
2-1番目のセル
[/tablecell]

[tablecell]
2-2番目のセル
[/tablecell]

[tablecell]
2-3番目のセル
[/tablecell]

[tablecell]
2-4番目のセル
[/tablecell]
[/tablerow]

[tablerow]
[tablecell]
3-1番目のセル
[/tablecell]

[tablecell]
3-2番目のセル
[/tablecell]

[tablecell]
3-3番目のセル
[/tablecell]

[tablecell]
3-4番目のセル
[/tablecell]
[/tablerow]

[/tablehead]
[/table]

ソート(並べ替え)機能を有効にしたテーブル

日付	ひらがな	アルファベット	金額	割合
2003/7/10	なにぬねの	Candy	¥5,429	44%
2000/10/25	かきくけこ	Fruit	¥1,980	78%
2014/7/16	やゆよわをん	Apple	¥34,869	8%
2014/12/24	はひふへほ	Graphic	¥20,082	63%

このショートコード

[table sort=true highlight=true]
[tablehead
  title="日付,ひらがな,アルファベット,金額,割合"]

[tablerow]
[tablecell]
2003/7/10
[/tablecell]

[tablecell]
なにぬねの
[/tablecell]

[tablecell]
Candy
[/tablecell]

[tablecell]
¥5,429
[/tablecell]

[tablecell]
44%
[/tablecell]
[/tablerow]

[tablerow]
[tablecell]
2000/10/25
[/tablecell]

[tablecell]
かきくけこ
[/tablecell]

[tablecell]
Fruit
[/tablecell]

[tablecell]
¥1,980
[/tablecell]

[tablecell]
78%
[/tablecell]
[/tablerow]

[tablerow]
[tablecell]
2014/7/16
[/tablecell]

[tablecell]
やゆよわをん
[/tablecell]

[tablecell]
Apple
[/tablecell]

[tablecell]
¥34,869
[/tablecell]

[tablecell]
8%
[/tablecell]
[/tablerow]

[tablerow]
[tablecell]
2014/12/24
[/tablecell]

[tablecell]
はひふへほ
[/tablecell]

[tablecell]
Graphic
[/tablecell]

[tablecell]
¥20,082
[/tablecell]

[tablecell]
63%
[/tablecell]
[/tablerow]

[/tablehead]
[/table]

各カラムの幅を指定した場合

テーマ	カラム数	フッターカラム数	対応アーカイブ形式
fresco	1〜2	1〜4	6種類 (スタンダード、ポートフォリオx2、混在グリッド、マガジン、シンプル)
Luminous Business Edition	1〜2	1〜4	5種類 (スタンダード、ポートフォリオx3、マガジン)
Luminous	1〜2	1〜3	3種類 (スタンダード、ポートフォリオ、マガジン)
Clarity Business Edition	1〜2	1〜４	5種類 (スタンダード、ブログ、ポートフォリオx2、マガジン)
Clarity	1〜2	1〜3	3種類 (スタンダード、ブログ、マガジン)

このショートコード

幅を指定する場合は、table(親)ショートコードに、nowrap=0 パラメータを指定します。

[table nowrap=0 width="100%" class="ft13px"]
[tablehead
title="テーマ,カラム数,フッターカラム数,対応アーカイブ形式,パララックス,モバイルテーマ,AMP,pjax"
eachwidth="250px,90px,90px,220px,110px,116px,116px,116px"]

[tablerow title="fresco" align="center"]
[tablecell align="center"]
1〜2
[/tablecell]
[tablecell align="center"]
1〜4
[/tablecell]
[tablecell align="center"]
6種類

(スタンダード、ポートフォリオx2、混在グリッド、マガジン、シンプル)
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-ok green"></i>
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-ok green"></i>
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-ok green"></i>
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-ok green"></i>
[/tablecell]
[/tablerow]

[tablerow title="Luminous Business Edition" align="center"]
[tablecell align="center"]
1〜2
[/tablecell]
[tablecell align="center"]
1〜4
[/tablecell]
[tablecell align="center"]
5種類

(スタンダード、ポートフォリオx3、マガジン)
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-ok green"></i>
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-ok green"></i>
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-ok green"></i>
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-cross pink"></i>
[/tablecell]
[/tablerow]

[tablerow title="Luminous" align="center"]
[tablecell align="center"]
1〜2
[/tablecell]
[tablecell align="center"]
1〜3
[/tablecell]
[tablecell align="center"]
3種類

(スタンダード、ポートフォリオ、マガジン)
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-cross pink"></i>
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-ok green"></i>
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-ok green"></i>
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-cross pink"></i>
[/tablecell]
[/tablerow]

[tablerow title="Clarity Business Edition" align="center"]
[tablecell align="center"]
1〜2
[/tablecell]
[tablecell align="center"]
1〜４
[/tablecell]
[tablecell align="center"]
5種類

(スタンダード、ブログ、ポートフォリオx2、マガジン)
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-ok green"></i>
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-ok green"></i>
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-ok green"></i>
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-cross pink"></i>
[/tablecell]
[/tablerow]

[tablerow title="Clarity" align="center"]
[tablecell align="center"]
1〜2
[/tablecell]
[tablecell align="center"]
1〜3
[/tablecell]
[tablecell align="center"]
3種類

(スタンダード、ブログ、マガジン)
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-cross pink"></i>
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-ok green"></i>
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-ok green"></i>
[/tablecell]
[tablecell align="center"]
<i class="ft16px icon-cross pink"></i>
[/tablecell]
[/tablerow]

[/tablehead]
[/table]

注意事項

このショートコードはテーブル全体のコード(table)内にテーブル行のコード(tablerow)単位で任意の行数をネスト(入れ子)し、そのテーブル行(tablerow)内にテーブルの最小単位となるテーブルセルのコード(tablecell)を記述する必要があります。
“tablecell”コードで括ったコンテンツが1つあたりのテーブルセルの内容となります。
また、テーブル行(tablerow)あたりに挿入するテーブルセル(tablecell)の合計数は、すべてのテーブル行ごとで同じにする必要があります。
テーブルセルのコンテンツには他のショートコードを利用することもできます。

指定可能なパラメータ（table ※テーブル）

「TablePress」プラグインを使用している場合は、接頭辞「dp_」を付けてください ([table] → [dp_table])。

highlight

テーブルの行やセルをマウスでホバーした際にハイライト効果を施す場合は true を指定します。

例 : highlight=true

hoverrowbgcolor

テーブルの行をマウスでホバーした際に任意のハイライト背景カラーを指定するときにそのカラーネームまたはカラーコードを指定します。

例 :
hoverrowbgcolor=”#aae8e9″
hoverrowbgcolor=”rgba(32,32,32,0.6)”

hoverrowfontcolor

テーブルの行をマウスでホバーした際に任意のハイライトフォントカラーを指定するときにそのカラーネームまたはカラーコードを指定します。

例 : hoverrowfontcolor=”#465f60″

hovercellbgcolor

テーブルのセルをマウスでホバーした際に任意のハイライト背景カラーを指定するときにそのカラーネームまたはカラーコードを指定します。

例 :
hovercellbgcolor=”#23b5df”
hovercellbgcolor=”rgba(255,255,255,0.8)”

hovercellfontcolor

テーブルのセルをマウスでホバーした際に任意のハイライトフォントカラーを指定するときにそのカラーネームまたはカラーコードを指定します。

例 : hovercellfontcolor=”#ffffff”

sort

テーブルを様々な単位でソート(並べ替え)可能にする場合に true を指定します。

注意事項

ソート機能を利用するには、”tablehead” ショートコードで列ヘッダを含める必要があります。
ひらがなのソートは不完全な場合があります。
数値は必ず半角で指定してください。
通貨(¥)のソートを可能にするには、半角円マーク(¥)を先頭につけてください。
未知の単位はソートできない場合があります。

例 : sort=true

class

テーブル全体(tableタグ)に指定するCSSクラスがある場合に指定します。

例 : class=”mg40px-btm”

style

テーブルタグ(table)全体に指定するスタイルがある場合に指定します。

width

テーブル全体の幅を任意の幅にする場合はその値を px、% で指定します。

例 : width=”100%”

指定可能なパラメータ（tablehead ※テーブル列ヘッダ）

title (※必須)

テーブルの横並びの列ヘッダとして定義したいヘッダタイトルを必要な列数分を半角カンマ「,」でまとめて指定します。

たとえば、列ヘッダを持つ4列のテーブルを表示する場合は、以下のように4列分のタイトルをカンマで区切って指定します。

例：title=”1列目のタイトル,2列目のタイトル,3列目のタイトル,4列目のタイトル”

eachwidth

列ヘッダの各タイトル( = 各カラム)の表示幅を、CSSで指定可能な単位付きのサイズ(120px など)で指定し、それぞれのサイズを半角カンマ「,」でまとめて指定します。

このパラメータに指定するカンマで区切ったサイズの数は、titleパラメータで指定したカンマ区切りのタイトルの数と同じにしてください。

例 : eachwidth=”120px,90px,90px,200px,120px,120px,120px”

icon

テーブルの横並びの列ヘッダの各タイトルの先頭に表示したいアイコンフォント名を半角カンマ「,」でまとめて指定します。

この定義は列ヘッダに指定したタイトルと同じ数を指定してください。

たとえば、列ヘッダを持つ4列のタイトルにアイコンを表示する場合は、以下のように4列分のアイコンフォントをカンマで区切って指定します。

例：icon=”icon-safe,,icon-credit,icon-dollar”
※この場合、2番目(2列目)のタイトルにはアイコンは表示されません。

caption (※注意)

このパラメータは「Shortcodes for DigiPress」のみで利用できるものです。
「DigiPress Ex -Shortcodes」ではオーバーフロー時は横スクロールして表全体が表示される仕様に変更されたため、廃止されています。

列ヘッダを持つテーブルの場合は、レスポンシブ表示およびスマートフォン表示の際にはテーブル自体が非表示になり、タップして全体が表示できる大きさのテーブルを表示するボタンのみが表示されます。
このボタンに表示するテキストを指定します。

このパラメータが未指定の場合は、「ここをタップして表示」というテキストが代用されます。

例：caption=”ここをタップしてテーブルを表示”

class

テーブル列ヘッダ(thead)に指定するCSSクラスがある場合に指定します。

例 : class=”mg40px-btm”

style

テーブルヘッダ(thead)全体に指定するスタイルがある場合に指定します。

指定可能なパラメータ（tablerow ※テーブル行）

title ※必須

このテーブル行のタイトル(th)を指定します。

icon

このテーブルの行タイトルの先頭に表示したいアイコンフォント名を指定します。

例：icon=”icon-safe”

class

このテーブル行(tr)にCSSクラスを指定する場合に指定します。

例 : class=”ft16px b”

align

このテーブルの１行に含む各テーブルセルの整列方法(左寄せ、中央、右寄せ)を指定する場合に指定します。
未指定の場合は中央寄せされた状態が設定されます。

指定可能な値

left : 左寄せ
center : 中央寄せ（規定値）
right : 右寄せ

例 : align=”left”

bgcolor

このテーブルの１行全体の背景カラーを指定する場合に、そのカラーをカラーコード(#0000ff など)、またはカラー名(blue など)で指定します。

例 : bgcolor=”#97D7FE”

style

このテーブル行(tr)全体に指定するスタイルがある場合に指定します。

例 : style=”font-size:16px;font-weight:bold;”

width

テーブルの行の幅を任意の幅にする場合はその値を px、% で指定します。

例 : width=”180px”

指定可能なパラメータ（tablecell ※テーブルセル）

class

このテーブルセル(td)にCSSクラスを指定する場合に指定します。

例 : class=”ft16px b”

align

このテーブルセルの整列方法(左寄せ、中央、右寄せ)を指定する場合に指定します。

指定可能な値

left : 左寄せ
center : 中央寄せ（規定値）
right : 右寄せ

例 : align=”left”

bgcolor

このテーブルセル背景カラーを指定する場合に、そのカラーをカラーコード(#0000ff など)、またはカラー名(blue など)で指定します。

例 : bgcolor=”#97D7FE”

style

このテーブルセル(td)全体に指定するスタイルがある場合に指定します。

例 : style=”font-size:16px;font-weight:bold;”

width

テーブルのセルの幅を任意の幅にする場合はその値を px、% で指定します。

例 : width=”90px”

【注意事項】TablePress プラグインを使用している場合

[table] → [dp_table]