Affingerでテーブルレイアウトを使うときのためにデザインやショートコードについてまとめます。
ブロックエディターでテーブルを使う場合
ブロックエディターでテーブルを挿入すると、Affingerの場合、テーブルスタイルが6タイプ用意されています。

Afiingerでは「ヘッダーセクション」を有効にすると、スクロール時に上部に固定される仕様になっています。(PC・スマホ共通)
スタイル1 - デフォルト
全ての罫線があるタイプ。デフォルトのテーブルスタイルです。
テーブルヘッダー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 |
セル4-1 | セル4-2 | セル4-3 | セル4-4 |
テーブルフッター1 | テーブルフッター2 | テーブルフッター3 | テーブルフッター4 |
スタイル2 - ストライプ
テーブル行がストライプになるタイプ。縦のラインはありません。
行が多い時にはストライプの方がわかりやすい場合もあります。
テーブルヘッダー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 |
セル4-1 | セル4-2 | セル4-3 | セル4-4 |
テーブルフッター1 | テーブルフッター2 | テーブルフッター3 | テーブルフッター4 |
スタイル3 - スクロール
スマホ(599px以下)で横スクロールが表示されます。テーブルカラム数(列数)が多い時に活躍するレイアウトです。
テーブルヘッダー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 |
セル4-1 | セル4-2 | セル4-3 | セル4-4 |
テーブルフッター1 | テーブルフッター2 | テーブルフッター3 | テーブルフッター4 |
スタイル4 - 中央寄せ
セル内のテキストを天地左右中央揃えにします。
テーブルヘッダー1 | テーブルヘッダー2 | テーブルヘッダー3 | テーブルヘッダー4 |
---|---|---|---|
セル1-1 | セル1-2 | セル1-3 | セル1-4 |
セル2-1 | セル2-2 | セル2-3 セル2-3 | セル2-4 |
セル3-1 | セル3-2 | セル3-3 | セル3-4 |
セル4-1 | セル4-2 | セル4-3 | セル4-4 |
テーブルフッター1 | テーブルフッター2 | テーブルフッター3 | テーブルフッター4 |
スタイル5 - ラインのみ
横ラインのみのテーブルデザイン
テーブルヘッダー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 |
セル4-1 | セル4-2 | セル4-3 | セル4-4 |
テーブルフッター1 | テーブルフッター2 | テーブルフッター3 | テーブルフッター4 |
スタイル6 - ラインのみ2
横ラインのみのテーブルデザインで左カラムもthにしたい時に使えるデザインです。
テーブルヘッダー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 |
セル4-1 | セル4-2 | セル4-3 | セル4-4 |
テーブルフッター1 | テーブルフッター2 | テーブルフッター3 | テーブルフッター4 |
テーブルのデザインカスタマイズ
テーブルのデザインは、カスタマイザーで設定できます。
カスタマイザー>オプション(その他)>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>
プラン | BOX1 | BOX2 | BOX3 | BOX4 | BOX5 | BOX6 | BOX7 | BOX8 |
初期費用 | 3ヶ月以上契約で初期費用無料(1ヶ月契約のみ¥2200) | |||||||
月額費用 (36ヶ月) |
¥528 /月 | ¥968 /月 | ¥1628 /月 | ¥2178 /月 | ¥3278/月 | ¥5478/月 | ¥7678/月 | ¥15378/月 |
この場合の横スクロールは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>
プラン | BOX1 | BOX2 | BOX3 | BOX4 | BOX5 | BOX6 | BOX7 | BOX8 |
初期費用 | 3ヶ月以上契約で初期費用無料(1ヶ月契約のみ¥2200) | |||||||
月額費用 (36ヶ月) |
¥528 /月 | ¥968 /月 | ¥1628 /月 | ¥2178 /月 | ¥3278/月 | ¥5478/月 | ¥7678/月 | ¥15378/月 |
テーブル - 中央配置
プラン | BOX1 | BOX2 | BOX3 |
初期費用 | 3ヶ月以上契約で初期費用無料(1ヶ月契約のみ¥2200) | ||
月額費用 (36ヶ月) |
¥528 /月 | ¥968 /月 | ¥1628 /月 |