Affinger レスポンシブ対応のテーブルレイアウト

Affingerでテーブルレイアウトを使うときのためにデザインやショートコードについてまとめます。

ブロックエディターでテーブルを使う場合

ブロックエディターでテーブルを挿入すると、Affingerの場合、テーブルスタイルが6タイプ用意されています。

Afiingerでは「ヘッダーセクション」を有効にすると、スクロール時に上部に固定される仕様になっています。（PC・スマホ共通）

スタイル1 - デフォルト

全ての罫線があるタイプ。デフォルトのテーブルスタイルです。

スタイル2 - ストライプ

テーブル行がストライプになるタイプ。縦のラインはありません。

行が多い時にはストライプの方がわかりやすい場合もあります。

スタイル3 - スクロール

スマホ（599px以下）で横スクロールが表示されます。テーブルカラム数（列数）が多い時に活躍するレイアウトです。

スタイル4 - 中央寄せ

セル内のテキストを天地左右中央揃えにします。

スタイル5 - ラインのみ

横ラインのみのテーブルデザイン

スタイル6 - ラインのみ2

横ラインのみのテーブルデザインで左カラムもthにしたい時に使えるデザインです。

テーブルのデザインカスタマイズ

テーブルのデザインは、カスタマイザーで設定できます。

カスタマイザー＞オプション（その他）＞table（表）

テーブルのショートコード

クラシックブロックから「タグ」＞「レイアウト」＞「table」で挿入できる。挿入できるtableは2種類あり。

• table（シンプル）
• table（属性あり）

table（シンプル）

1セルずつ囲みショートコードで作っていくのであまり使いやすいとは言えない感じがします。

[st-table]
[st-tr]
[st-td]テキスト[/st-td]
[/st-tr]
[/st-table]

table（属性あり）

[st-table width="100" bordercolor=""]
[st-tr bgcolor="" color="" fontweight="" center=""]
[st-td width="" bordercolor="" bgcolor="" color="" fontweight="" center="" colspan=""]テキスト[/st-td]
[st-td width="" bordercolor="" bgcolor="" color="" fontweight="" center="" colspan=""]テキスト[/st-td]
[/st-tr]
[/st-table]

横スクロール

クラシック段落ブロックでクラシック版のテーブルを挿入できます。

作成したテーブルをdivで囲む。モバイル画面で横スクロールができるようになります。

スタイル＞テーブル＞横スクロール

<div class="scroll-box">
</div>

この場合の横スクロールは599px以下の場合に表示されます。

PCでも横スクロール

PCでも横スクロールできるようにするには、ラッパーのdivに「pc」クラスを追加します。

<div class="scroll-box pc">
<figure class="wp-block-table is-style-regular">
<table style="border-collapse: collapse;">
<thead>
<tr>
<td>プラン</td>
<td class="has-text-align-center" data-align="center">BOX1</td>
<td class="has-text-align-center" data-align="center">BOX2</td>
<td class="has-text-align-center" data-align="center">BOX3</td>
<td class="has-text-align-center" data-align="center">BOX4</td>
<td class="has-text-align-center" data-align="center">BOX5</td>
<td class="has-text-align-center" data-align="center">BOX6</td>
<td class="has-text-align-center" data-align="center">BOX7</td>
<td class="has-text-align-center" data-align="center">BOX8</td>
</tr>
</thead>
<tbody>
<tr>
<td>初期費用</td>
<td class="has-text-align-center" colspan="8" data-align="center">3ヶ月以上契約で初期費用無料（1ヶ月契約のみ￥2200）</td>
</tr>
<tr>
<td>月額費用<br />（36ヶ月）</td>
<td class="has-text-align-center" data-align="center">¥528 /月</td>
<td class="has-text-align-center" data-align="center">¥968 /月</td>
<td class="has-text-align-center" data-align="center">¥1628 /月</td>
<td class="has-text-align-center" data-align="center">¥2178 /月</td>
<td class="has-text-align-center" data-align="center">¥3278/月</td>
<td class="has-text-align-center" data-align="center">¥5478/月</td>
<td class="has-text-align-center" data-align="center">¥7678/月</td>
<td class="has-text-align-center" data-align="center">¥15378/月</td>
</tr>
</tbody>
</table>
</figure>
</div>

テーブル - 中央配置