CMS記事本文にテーブルを追加する方法

CMSの記事タイプモデルでは、アイテム本文中にテーブル（表）が追加できます。テーブルを使うと情報を整理でき、閲覧者が内容を一目で理解しやすくなります。

追加したテーブルは、見出しを設定したり、デザインエディタで幅や色などのスタイル調整が可能です。

※動画は、公開時点のStudio仕様に基づきます

CMSダッシュボードを開き、記事タイプモデルのアイテム編集画面を開きます。

テーブルを挿入したい箇所をクリックし、「＋」ボタンをクリックします。「テーブル」を選択すると見出し行を含む3列×2行のテーブルが追加されます。

追加したテーブルは、左寄せ・中央・右寄せに配置の設定ができます。

テーブルは、選択してコピー＆ペーストで簡単に複製できます。削除する場合は、テーブルを選択し、Deleteキーかブロックメニューを使用します。

三角の行（列）メニュー、またはテーブル下か右端の追加ボタンで、行列が追加できます。「列（行）を削除」をクリックすると削除できます。

※現在、行と列の入れ替えはできません。セルをコピー＆ペーストして移動させることは可能です。

テーブル内の最上行と最左列は、「見出しセル（th）」として設定可能です。これらはテーブル内のデータを説明するタイトルとして機能します。設定には、ブロックまたは行列メニューで「行見出し」または「列見出し」を選択します。

テーブル内のセル (td) にはテキストが入力でき、テキストを選択して表示されるメニューから太字、斜体、打ち消し線、のスタイル適用とリンク、コメント機能が利用できます。

Shift + Enterで改行したり「Shift + 左右上下キー」でセルの複数選択も可能です。

Googleスプレッドシートや Notion など外部のテーブルをコピーして、Studioのテーブルにペーストできます。Notionからコピーできるのは、シンプルテーブル｜Notionヘルプセンターのみです。データベースのテーブルはペーストできませんのでご注意ください。

なお、コピーする際はテーブル自体を以下画像のように選択してください。

テーブルのデザインは、デザインエディタで行います。

動的ページにCMS本文（リッチテキスト）を配置して、テーブルを追加したアイテムを表示します。

テーブル <table> を選択し、スタイルメニューのテーブル・テキストタブからスタイル調整できます。

テーブル内の見出し (th) とセル (td) は、それぞれ個別にスタイルを調整することができます。これにより、見出しとセルで色を変えたり、フォントを変更したりすることが可能です。

セル（td）に適用したスタイルは、自動的に見出し（th）にも適用されます。ただし、見出しに直接スタイルが指定されている場合は、見出しのスタイル指定が優先されます。

※行見出しと列見出し (th) のスタイルは共通となっており、別々にスタイルを設定することはできません。

※下線のスタイルは、見出し (th) とセル (td) の間でスタイルが継承されません。

見出しまたはセルを選択すると、列の最小幅が設定できます。

テキストタブでは「垂直配置」でテキストの配置が変更可能です。

テーブルのアクセシビリティ向上において、２つポイントがあります。

スクリーンリーダーなどの支援技術でテーブルを読むとき、見出しセル（th）が存在すると、データセル（td）と組み合わせて読み上げられます。見出しセル（th）がないと何の行・列のデータかの理解が困難になります。

参考

テーブルの直前に見出し（h1, h2 要素など）を配置することを推奨します。

WCAG 2.0「1.3.1 情報及び関係性 ※1」を達成する２つの方法があります。

１の方法は現在の Studio では caption が設定できないため、採用できません。２の方法を採用します。見出しとテーブルの内容を結びつけ、支援技術利用者に見出しからテーブルの手がかりを与え、情報及び関係性を保つようにします。

参考

その他、アクセシビリティを考慮した構築方法については、Studioアクセシビリティチェックシートも合わせてご確認ください。

テーブルレイアウト