MENU
カテゴリー

「テーブルブロック」で使えるSWELLのオリジナル機能

記事上のウィジェットエリア

ここでは、テーブルタグを簡単に出力できる「テーブルブロック(表ブロック)」に関するSWELLのオリジナル機能について解説していきます。

目次
目次広告表示エリア

テーブルブロックのスタイル一覧

SWELLでは、テーブルブロックは4種類のスタイルを選ぶことができるようになっています。

SWELLで使える表ブロックのスタイル一覧
表ブロックのスタイル一覧
TABLEBLOCK
CELL – 01ABCDEFG
CELL – 02HIJKLMN
CELL – 03OPQLSTUVWXYZ
デフォルトスタイル
TABLEBLOCK
CELL – 01ABCDEFG
CELL – 02HIJKLMN
CELL – 03OPQLSTUVWXYZ
ストライプ
TABLEBLOCK
CELL – 01ABCDEFG
CELL – 02HIJKLMN
CELL – 03OPQLSTUVWXYZ
シンプル
TABLEBLOCK
CELL – 01ABCDEFG
CELL – 02HIJKLMN
CELL – 03OPQLSTUVWXYZ
2重線

テーブルブロックに追加している拡張項目

さらにSWELLでは、ブロックサイドバーから設定できる項目を独自に拡張しています。

ver.2.3.9で設定パネルがリニューアルされました

拡張パネル①:テーブル設定

「1列目のtdをth風に」設定

ブロックエディターでは今のところtdタグをthタグに変換することができません。
そこで、SWELLでは見た目だけthタグ風にできる設定を追加しています。

「スマホで縦並びに表示する」設定

スマホサイズで表示される時に表を組み替えて縦並びに表示することができます。

「各列で最低限維持する幅」

テーブルブロックは、1つのセルの内容がとても長い時、その他の列の横幅が極端に狭くなってしまいます。

表のテキストがとても長い時の様子
表のテキストがとても長い時の様子

この現象を防ぐため、どの程度の横幅を最低限維持するか3段階で選ぶことができます。

拡張パネル②: 横スクロール設定

横に長いテーブルを作成して、スクロール表示が可能です。
さらに、横幅を指定したり、左端を固定表示させたりすることも可能です。

こんな感じ!

スクロールできます
テーブルテーブルLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
テーブルテーブルLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

SWELL v2.2.3 から、テーブルブロックの「スマホでスクロールできる設定」がオンの時に「スクロールできます」というガイドテキストが表の右上に表示されるようになりました。

こんな感じ!

拡張パネル③: テーブルヘッダーの固定

テーブルヘッダーを表示している場合、ヘッダーを上部に固定させることが可能です。
縦に長いテーブルでぜひ活用してください。

ただし、横スクロール機能との併用はできません。

こんな感じ!

ヘッダーここが固定されます
テーブルLorem ipsum dolor sit amet, consectetur adipiscing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
テーブルLorem ipsum dolor sit amet, consectetur adipiscing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
テーブルLorem ipsum dolor sit amet, consectetur adipiscing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる