スマートフォンなどの表示幅が狭いディスプレイ環境や、列数が多くオーバーフローしても横スクロールして表全体を表示できるHTMLテーブルを出力するショートコードです。
ソート機能も備わっています。
TablePressプラグインを利用している場合
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]
各カラムの幅を指定した場合
テーマ | カラム数 | フッターカラム数 | 対応アーカイブ形式 | パララックス | モバイルテーマ | AMP | pjax |
---|---|---|---|---|---|---|---|
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〜4 | 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〜4 [/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 ※テーブル)
[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
を指定します。注意事項
例 : 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
- このテーブルの1行に含む各テーブルセルの整列方法(左寄せ、中央、右寄せ)を指定する場合に指定します。
未指定の場合は 中央寄せ された状態が設定されます。指定可能な値
- left : 左寄せ
- center : 中央寄せ(規定値)
- right : 右寄せ
例 : align=”left”
- bgcolor
- このテーブルの1行全体の背景カラーを指定する場合に、そのカラーをカラーコード(#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 プラグインを使用している場合
「TablePress」プラグインを使用している場合は、「DP Ex-Shortcodes」のショートコードと重複するため、本プラグインでのテーブル表示をするには、[table]
ショートコードのみ、接頭辞「dp_」を付けてください。
[table]
→[dp_table]