CMS記事本文にテーブルを追加する
Studio CMSの記事タイプモデルのアイテム（CMS記事アイテム）で、本文内の任意の位置にテーブル（表）を挿入できます。
料金プランやイベント日程、製品スペック一覧など、複数の項目を一覧で比較したいときに便利です。
追加したテーブルは、見出しを設定したり、デザインエディタで幅や色などを調整できます。
注意：テーブル機能の制限と推奨条件
行数/列数が80を超えるテーブルは、CMSダッシュボードでの編集に支障が出る場合があります。 必要に応じてテーブルを分割し、それぞれの行数・列数が80以下になるよう調整してください。
次の機能に対応していません。
テーブル内に別のテーブルを追加すること
複数の行・列に見出しセル（th）を設定すること
行・列の先頭以外に見出しセル（th）を設定すること
セルの結合
caption 要素の設定
thead 要素の設定
tfoot 要素の設定
scope 属性の設定
※動画は、公開時点のStudio仕様に基づきます
CMS記事アイテムにテーブルを追加する
CMSダッシュボードで、対象の「記事タイプ」モデルのCMSアイテム詳細編集画面を開きます。
テーブルを挿入したい位置にカーソルを置き、本文エディタ左側の[＋]ボタンをクリックします。
表示される候補から[テーブル]を選択すると、見出し行を含む3列×2行のテーブルが追加されます。
テーブルの配置を設定する
テーブルの右上部にあるアイコンで、テーブルの配置を左寄せ・中央・右寄せのいずれかに設定できます。
テーブルを複製・削除する
テーブルを複製したい場合は、テーブルを選択してコピー＆ペーストします。
テーブルを削除したい場合は、テーブルを選択し、Deleteキーまたはブロックメニューから削除します。
テーブルに行や列を追加・削除する
テーブル内のセルをクリックします。
表示された三角の行（列）メニューをクリックして、行（列）の追加・削除をします。テーブル下、または右端の追加ボタンからも行や列を追加できます。
行と列をそのまま入れ替えることはできませんが、セルの内容をコピー＆ペーストして移動することは可能です。
行・列見出し(th)を設定する
テーブル内の最上行と最左列は、見出しセル（th）として設定できます。 見出しセルは、テーブル内のデータの内容を説明するタイトルとして機能します。
見出しとして設定したいセルをクリックします。
表示された三角の行（列）メニューをクリックして[列（行）見出し]トグルを有効にします。
セル (td) を編集する
テーブル内のセル (td) にはテキストを入力できます。テキストを選択するとメニューが表示され、以下の設定や機能を利用できます。
太字
斜体
打ち消し線
コメント機能
キーボード操作は次のとおりです。
セル内で改行をする：Shift + Enter
セルの複数選択をする：Shift + 左右上下キー
外部ツールで作成したテーブルを貼り付ける
Googleスプレッドシートや Notion など、外部ツールで作成したテーブルを貼り付けることができます。
Googleスプレッドシートや Notion などの外部ツールでテーブル全体を選択し、コピーします。
StudioでCMSダッシュボードを開きます。
対象の「記事タイプ」モデルのCMSアイテム詳細編集画面を開き、テーブルを配置したい箇所にペーストします。
テーブルのデザインを設定する
他の要素と同様に、テーブルのレイアウトや外観を調整できます。操作はデザインエディタで行います。
テーブル全体に適用するデザイン設定する
リッチテキストボックス内に配置したテーブル<tabel>を選択します。
設定内容に合わせて、右パネルでタブを開きます。パネルが閉じている場合は、右パネルを開いてください。
テーブル自体のレイアウトや外観を設定する場合は、[ボックス]タブを開き、[レイアウト]や[外観]の項目で必要な設定を行います。
テーブル内のテキストのスタイルを変更する場合は、[コンテンツ]タブを開き、タイポグラフィなどの設定を行います。
見出しとセルのスタイルを変更する
リッチテキストボックス内に配置したテーブルの見出し (th) またはセル (td) を選択します。
設定内容に合わせて、右パネルでタブを開きます。パネルが閉じている場合は、右パネルを開いてください。
見出しやセル自体のレイアウトや外観を設定する場合：[ボックス]タブを開き、[レイアウト]や[外観]で必要な設定をします。
見出しやセル内のテキストにスタイル変更を加える場合：[コンテンツ]タブを開き、必要な設定をします。
注意：見出しとセルのスタイル設定について
セル（td）に適用した設定は、自動的に見出しセル（th）にも適用されます。
タイポグラフィの設定で下線を選択した場合、見出しセル（th）とセル（td）の間で下線設定は継承されません。
見出しセルに直接スタイルを設定した場合は、そのスタイルが優先されます。
行見出しと列見出し（th）のスタイル設定は共通です。別々に設定をすることはできません。
テーブル内の列に最小幅を設定する
列の最小幅をpx単位で設定できます。 px以外のサイズ単位は使用できません。
リッチテキストボックス内に配置したテーブルの見出し (th) またはセル (td) を選択します。
右パネルで[ボックス]タブを開きます。パネルが閉じている場合は、右パネルを開いてください。
[レイアウト]内の[最小幅]設定欄に、数値を入力して設定します。
テーブル<tabel>全体を選択している場合には、[最小幅]の設定欄は表示されません。
アクセシビリティ向上のヒント
テーブルのアクセシビリティ向上のポイントとして、次の2つが重要です。
見出しセル（th）を使う
スクリーンリーダーなどの支援技術は、見出しセル（th）とデータセル（td）を組み合わせて読み上げます。 見出しセルがない場合、利用者はそのセルがどの行・列に対応するかを理解しづらくなります。
参考
テーブルの直前に見出し（h1, h2 要素など）を配置
テーブルの直前に見出し（h1, h2 要素など）を配置することを推奨します。
WCAG 2.0の達成基準「1.3.1 情報及び関係性(※1)」では、情報の構造や関係性が支援技術の利用者にも伝わるようにすることが求められています。
この達成基準を満たす代表的な方法には、次の2つがあります。
テーブルに caption 要素を設定する（現在、Studio では設定できません）(※2)
テーブルの直前に見出しを配置する (※3)
Studioではcaption要素を設定できないため、テーブルの前に見出しを置く方法を採用します。 見出しとテーブルの内容を結びつけることで、支援技術の利用者が見出しからテーブルの内容を想像しやすくなり、情報の関係性を保ちやすくなります。
参考
その他、アクセシビリティを考慮した構築方法については、Studioアクセシビリティチェックシートも合わせてご確認ください。
テーブルレイアウト