Googleサイトで表を作成する3つの方法｜埋め込み・コピペ・HTMLの手順

Googleサイトで表を作成しようとして、編集メニューに「表の挿入」ボタンが見当たらず困った経験はありませんか？実は、Googleサイトには単体での表作成機能が制限されており、スプレッドシートの埋め込みやHTML埋め込みといった代替手法を活用する必要があります。

本記事では、Googleサイトで表を作成する3つの方法（スプレッドシート埋め込み・コピー&ペースト・HTML埋め込み）を具体的な手順とともに解説します。それぞれの手法のメリット・デメリットを比較し、用途に応じた最適な選択ができるようガイドします。

比較項目	スプレッドシート埋め込み	コピー&ペースト	HTML埋め込み
更新の手軽さ	◎（元ファイル編集で自動反映）	△（再コピペが必要）	△（コード修正が必要）
デザインの自由度	△（スプレッドシートのスタイルに依存）	△（Googleサイトの標準スタイル）	◎（CSS で完全カスタマイズ可能）
実装難易度	◎（初心者向け）	◎（最も簡単）	△（HTML/CSS の知識が必要）
権限管理	△（共有設定の調整が必要）	◎（不要）	◎（不要）
SEO 効果	△（iframe 内は認識されにくい）	◎（直接テキストとして認識）	◎（HTML として認識）
スマホ対応	○（スプレッドシート側で調整）	△（列幅調整が困難）	◎（CSS でレスポンシブ対応可能）
向いているケース	在庫表、価格表、連絡先など頻繁に更新するデータ	固定的な料金表、イベント日程など更新頻度が低いデータ	ブランドに合わせたデザイン重視の表、複雑なレイアウト

スプレッドシート埋め込みによるリアルタイム同期、HTML埋め込みによる自由なデザインカスタマイズ、コピペによる手軽な掲載まで、あなたのニーズに合った表作成手法が見つかるはずです。

Googleサイトで表を作成する3つの方法と基本の制限

Googleサイトに直接的な「表の挿入」ボタンがないのは、スプレッドシートやドキュメントといった専門ツールとの役割分担を明確にするためです。表の編集・計算はスプレッドシートで行い、サイトはその結果を表示する場として機能する設計になっています。これに対し、NotePMのような社内wikiツールでは、ページ作成画面に表機能が標準搭載されているため、外部ツールを行き来することなく直感的に編集できます。

用途に合わせて「スプレッドシート埋め込み」「コピペ」「HTML埋め込み」の3つの手法から最適なものを選ぶ必要があります。頻繁にデータを更新する拠点一覧や在庫表にはスプレッドシート埋め込みが、固定的な料金表や営業時間にはコピペやHTMLが適しています。

社内ポータル等で高度な表管理が必要な場合は、表機能が標準搭載された専用の情報共有ツールの検討も有効です。ただし本記事では、Googleサイトの枠内で実現できる実践的な手法に焦点を当てて解説します。

方法①：Googleスプレッドシートを埋め込んで表を作成する手順

スプレッドシートを埋め込むことで、サイト編集画面を開かずに元データを更新するだけで内容を最新状態に保てます。営業拠点の連絡先や在庫状況など、日々変動する情報を複数人で管理する場合に特に有効です。

挿入メニューから対象のファイルを選択するだけで、プログラミング知識なしに動的な表をサイトに配置できます。具体的な手順は以下の通りです。

Googleサイトの編集画面で、表を挿入したい位置にカーソルを置く
右側の「挿入」パネルから「ドライブ」を選択
表示したいスプレッドシートファイルを検索または選択
「挿入」ボタンをクリックして埋め込み完了

埋め込まれた表は、スプレッドシート側で編集した内容がページ再読み込み時に自動的に反映されます。複数のページで同じ表を使い回す場合も、元データを1箇所修正するだけで全ページに変更が行き渡ります。

公開設定と権限管理の注意点

埋め込んだ表が閲覧者に表示されないトラブルを防ぐため、スプレッドシート側の共有設定とサイトの公開設定の整合性について解説します。

サイト閲覧者全員に表を見せるには、スプレッドシートの共有設定を「リンクを知っている全員」に変更する必要があります。具体的な手順は次の通りです。

スプレッドシートを開き、右上の「共有」ボタンをクリック
「リンクを知っている全員」を選択し、権限を「閲覧者」に設定
「完了」をクリックして設定を保存

社内限定公開の場合は「組織内のユーザー」、特定メンバーのみの場合は個別にメールアドレスを追加します。サイトの公開範囲とスプレッドシートの共有範囲が一致していないと、閲覧者に「アクセス権限がありません」というエラーが表示されます。

権限設定後は、必ずシークレットモード（プライベートブラウジング）で動作確認を行い、ログアウト状態でも表が正しく表示されるかをチェックしてください。

表示範囲とツールバー非表示の設定テクニック

不要なセルやツールバーを隠し、サイトのデザインに馴染ませるためのURLパラメータ調整や範囲指定のコツを解説します。

埋め込みURLに特定のパラメータを付与することで、グリッド線や行列番号を非表示にして見た目をスッキリさせられます。スプレッドシートの共有URLの末尾に以下のパラメータを追加してください。

グリッド線を非表示: &gridlines=false
行列番号を非表示: &headers=false
ツールバーを非表示: &chrome=false

例えば、元のURLが https://docs.google.com/spreadsheets/d/ABC123/edit の場合、https://docs.google.com/spreadsheets/d/ABC123/edit?gridlines=false&headers=false&chrome=false のように連結します。

特定のセル範囲のみを表示させることで、作業用シートの隠したい情報を伏せたまま必要なデータだけを公開できます。範囲指定は以下の手順で行います。

スプレッドシートで表示したいセル範囲を選択（例: A1:D10）
「ファイル」→「ウェブに公開」を選択
「埋め込む」タブで範囲を指定し、HTMLコードを取得
Googleサイトの「埋め込み」機能でHTMLコードを貼り付け

この方法を使えば、価格表の一部だけを抜粋して表示したり、集計結果のみを公開して計算式を隠したりできます。

よくあるトラブルと対処法

表が表示されない、サイズが合わない、更新が反映されないといった代表的なトラブルのチェックリストと解決策をまとめます。

1. 表が表示されない場合の確認ポイント

表が表示されない場合は、まずブラウザのシークレットモードで権限設定が正しく機能しているかを確認してください。ログイン状態では自分の権限で表示されていても、閲覧者には見えていない可能性があります。

次に、スプレッドシートの共有設定を再確認します。「リンクを知っている全員」または「組織内のユーザー」に設定されているか、権限が「閲覧者」以上になっているかをチェックしてください。

2. サイズが合わない・レスポンシブ対応

スマートフォンの表示で表が切れる場合は、Googleサイト側の埋め込み枠のサイズ調整や列幅の最適化が必要になります。埋め込み後に表をクリックして選択し、四隅のハンドルをドラッグして枠サイズを調整できます。

スマホでの横スクロールを許可するには、スプレッドシート側で列幅を狭めるか、表示する列数を減らす対応が有効です。重要な列だけを抜粋して別シートに作成し、そのシートを埋め込む方法も検討してください。

3. 更新が反映されない場合の対処法

スプレッドシートを更新しても表示が変わらない場合は、ブラウザのキャッシュが原因の可能性があります。ページを強制再読み込み（Ctrl+Shift+R / Cmd+Shift+R）して最新状態を取得してください。

それでも反映されない場合は、埋め込み設定を一度削除して再度挿入し直すことで解決することがあります。スプレッドシート側の「ウェブに公開」設定が有効になっているかも確認してください。

方法②：コピー&ペーストで表を作成する手順

この章では、外部ファイルとの連携が不要なコピペ手法のメリット・デメリット、レイアウト崩れへの対処法、コピペが向いているケースの順に見ていきます。

外部ファイルとの連携が不要なため、一時的な情報共有や更新頻度が極めて低いデータの掲載に最適です。イベントの日程表や固定的な料金プラン一覧など、一度掲載したら長期間変更しない情報に適しています。

Excelやスプレッドシートなどの既存資料から範囲を選択して貼り付けるだけで、表の構造を維持したまま素早くサイトへ反映できます。具体的な手順は以下の通りです。

ExcelまたはGoogleスプレッドシートで表の範囲を選択してコピー（Ctrl+C / Cmd+C）
Googleサイトの編集画面で、表を挿入したい位置にカーソルを置く
ペースト（Ctrl+V / Cmd+V）で貼り付け
表が挿入されたことを確認

この方法では、元のファイルを編集してもサイト上の表は自動更新されません。内容を変更する場合は、再度コピー&ペーストが必要です。

レイアウト崩れへの対処法

貼り付け時に発生しやすい罫線の消失や列幅の不一致などの問題を最小限に抑えるための、コピー前の事前整形のコツを解説します。

セル結合が含まれる複雑な表はレイアウトが崩れやすいため、貼り付け前にシンプルな形式へ調整しておくことが望ましいです。具体的には、以下の点に注意してください。

セル結合を解除し、必要なら同じ内容を各セルに入力し直す
複数行にわたる見出しは1行にまとめる
背景色や罫線のスタイルは最小限に抑える

書式崩れが激しい場合は、表を画像として保存して貼り付けるか、HTML埋め込み手法への切り替えを検討してください。画像化する場合は、元の表をスクリーンショットで撮影し、画像ファイルとしてGoogleサイトに挿入します。

ただし画像化すると、テキストの検索性が失われ、スマホでの拡大表示が必要になるデメリットがあります。情報の更新頻度やアクセシビリティを考慮して判断してください。

コピペが向いているケース

この手法をあえて選ぶべき具体的なシチュエーション（料金表、固定の連絡先一覧など）を例示し、運用の効率化を提案します。

権限管理の煩雑さを避けたい場合や、サイト内検索で表の内容をヒットさせたい場合にコピペ手法は有効です。スプレッドシート埋め込みでは外部ファイルの共有設定が必要ですが、コピペなら権限設定の手間がかかりません。

また、埋め込み形式ではサイト内検索にヒットしない場合がありますが、コピペで直接テキストとして貼り付ければ、検索機能で表の内容を見つけやすくなります。社内ポータルで部署の連絡先一覧を掲載する場合など、検索性を重視するケースに適しています。

具体的には、以下のような用途でコピペが推奨されます。

年度ごとの料金表（年1回の更新）
固定的な営業所の住所・電話番号一覧
イベントの開催日程表（終了後は更新不要）
社内規定の一覧（改定頻度が低い）

方法③：HTML埋め込みで表をカスタマイズする手順

埋め込みコード機能を使用することで、Googleサイトの標準テーマに縛られない自由なデザインの表を実装できます。企業のブランドカラーに合わせた背景色や、マウスホバー時の色変化など、視覚的に洗練された表を作成可能です。

HTMLで記述された表は検索エンジンに内容が認識されやすく、サイト内の情報発見性を高める効果が期待できます。スプレッドシート埋め込みではiframe内のコンテンツが検索対象外になる場合がありますが、HTMLなら直接ページに組み込まれるためSEO面でも有利です。

基本的な埋め込み手順は以下の通りです。

Googleサイトの編集画面で「挿入」パネルから「埋め込み」を選択
「埋め込みコード」タブを開く
HTMLコード（後述のサンプル参照）を入力
「次へ」→「挿入」をクリック

CSSによるデザインカスタマイズ例

枠線の太さ、背景色、マウスホバー時の色変化など、視認性を高めるための具体的なCSSプロパティの使用例を紹介します。

border-collapseプロパティ等を使用することで、モダンで洗練された印象の表デザインを簡単に構築できます。以下は基本的なスタイル設定の例です。

<style>

table {

  border-collapse: collapse;

  width: 100%;

  margin: 20px 0;

}

th, td {

  border: 1px solid #ddd;

  padding: 12px;

  text-align: left;

}

th {

  background-color: #4285f4;

  color: white;

  font-weight: bold;

}

tr:nth-child(even) {

  background-color: #f9f9f9;

}

tr:hover {

  background-color: #f1f1f1;

}

</style>

<table>

<thead>

<tr>

<th>項目</th>

<th>内容</th>

</tr>

</thead>

<tbody>

<tr>

<td>料金</td>

<td>月額1,000円</td>

</tr>

<tr>

<td>利用期間</td>

<td>1年間</td>

</tr>

</tbody>

</table>

サイトのテーマカラーに合わせた背景色を指定することで、埋め込み要素特有の違和感を解消し一体感を持たせられます。上記の #4285f4 部分を自社のブランドカラーに変更してください。

偶数行に背景色を付ける tr:nth-child(even) や、マウスホバー時の色変化 tr:hover を設定すると、視認性が向上し、ユーザーが現在どの行を見ているかを把握しやすくなります。

レスポンシブ対応（スマホでの横スクロール実装）

画面幅の狭いスマートフォンで表がはみ出さないよう、CSSで横スクロールを実装する方法と実機での確認手順を解説します。

overflow-xプロパティを設定したdivタグで表を囲むことで、スマホ閲覧時のみ横スクロールさせるレスポンシブ対応が可能になります。以下のコードを参考にしてください。

<style>

.table-wrapper {

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

}

table {

  min-width: 600px;

}

</style>

<div class="table-wrapper">

<table>

<!-- 表の内容 -->

</table>

</div>

-webkit-overflow-scrolling: touch; を追加すると、iOSデバイスでスムーズなスクロール操作が可能になります。min-width で表の最小幅を指定し、画面幅より広い場合に横スクロールが発動するよう設定します。

実装後は、実際のスマートフォンまたはブラウザの開発者ツール（F12キー → デバイスモード）で動作確認を行ってください。横スクロールが正しく機能しているか、指でスワイプして操作できるかをチェックします。

実践例：ユースケース別サンプルコード

ウェブアクセシビリティの観点から、スクリーンリーダーが正しく構造を解釈できるようthタグ等の適切な使用が推奨されます。見出しセルには <th>、データセルには <td> を使い分けることで、視覚障害のあるユーザーにも表の内容が正しく伝わります。

用途に合わせたサンプルコードを活用することで、HTML初心者でも短時間で高品質な表をサイトに追加できます。以下に代表的なユースケース別のコードを示します。

1. 料金表のサンプルコード

<style>

.price-table {

  border-collapse: collapse;

  width: 100%;

}

.price-table th {

  background-color: #34a853;

  color: white;

  padding: 12px;

  text-align: left;

}

.price-table td {

  border: 1px solid #ddd;

  padding: 10px;

}

.price-table tr:hover {

  background-color: #f5f5f5;

}

</style>

<table class="price-table">

<thead>

<tr>

<th>プラン名</th>

<th>月額料金</th>

<th>機能</th>

</tr>

</thead>

<tbody>

<tr>

<td>ベーシック</td>

<td>1,000円</td>

<td>基本機能のみ</td>

</tr>

<tr>

<td>スタンダード</td>

<td>3,000円</td>

<td>高度な分析機能</td>

</tr>

</tbody>

</table>

2. 営業日カレンダーのサンプルコード

<style>

.calendar-table {

  border-collapse: collapse;

  width: 100%;

}

.calendar-table th {

  background-color: #fbbc04;

  color: white;

  padding: 10px;

}

.calendar-table td {

  border: 1px solid #ddd;

  padding: 8px;

  text-align: center;

}

.holiday {

  background-color: #ffebee;

  color: #c62828;

}

</style>

<table class="calendar-table">

<thead>

<tr>

<th>日付</th>

<th>営業状況</th>

</tr>

</thead>

<tbody>

<tr>

<td>1月1日</td>

<td class="holiday">休業</td>

</tr>

<tr>

<td>1月2日</td>

<td>営業</td>

</tr>

</tbody>

</table>

3. 連絡先一覧のサンプルコード

<style>

.contact-table {

  border-collapse: collapse;

  width: 100%;

}

.contact-table th {

  background-color: #ea4335;

  color: white;

  padding: 12px;

  text-align: left;

}

.contact-table td {

  border: 1px solid #ddd;

  padding: 10px;

}

</style>

<table class="contact-table">

<thead>

<tr>

<th>部署名</th>

<th>電話番号</th>

<th>メールアドレス</th>

</tr>

</thead>

<tbody>

<tr>

<td>営業部</td>

<td>03-1234-5678</td>

<td>sales@example.com</td>

</tr>

<tr>

<td>総務部</td>

<td>03-1234-5679</td>

<td>hr@example.com</td>

</tr>

</tbody>

</table>

これらのサンプルコードは、色や項目を自社の用途に合わせてカスタマイズして使用してください。コードをコピーしてGoogleサイトの「埋め込みコード」に貼り付けるだけで、すぐに表を追加できます。

Googleサイトの表作成方法の比較と選び方

紹介した3つの手法を「更新性」「デザイン」「難易度」などの軸で比較し、読者が自身のユースケースに最適な方法を選べるようガイドします。この章では、各手法の特徴を整理した比較表、その他の判断軸（表示速度・SEO影響）、発展的な手法（Google Apps Scriptの活用）の順に見ていきます。

頻繁なデータ更新にはスプレッドシート、一度きりの掲載にはコピペ、デザイン重視ならHTMLと使い分けるのが効率的です。以下の比較表で各手法の特徴を確認してください。

比較項目	スプレッドシート埋め込み	コピー&ペースト	HTML埋め込み
更新の手軽さ	◎（元ファイル編集で自動反映）	△（再コピペが必要）	△（コード修正が必要）
デザインの自由度	△（スプレッドシートのスタイルに依存）	△（Googleサイトの標準スタイル）	◎（CSS で完全カスタマイズ可能）
実装難易度	◎（初心者向け）	◎（最も簡単）	△（HTML/CSS の知識が必要）
権限管理	△（共有設定の調整が必要）	◎（不要）	◎（不要）
SEO 効果	△（iframe 内は認識されにくい）	◎（直接テキストとして認識）	◎（HTML として認識）
スマホ対応	○（スプレッドシート側で調整）	△（列幅調整が困難）	◎（CSS でレスポンシブ対応可能）
向いているケース	在庫表、価格表、連絡先など頻繁に更新するデータ	固定的な料金表、イベント日程など更新頻度が低いデータ	ブランドに合わせたデザイン重視の表、複雑なレイアウト

表の作成・管理コストを根本的に下げたい場合は、NotePMのような表機能が標準搭載された専用の情報共有ツールの導入が長期的な生産性向上に寄与します。情報の属人化を解消し、添付ファイルの中身まで全文検索できるため、拠点一覧や内線表などの管理に最適です。

Googleサイトの表作成方法まとめ

本記事では、Googleサイトで表を作成する3つの方法を解説しました。スプレッドシート埋め込みはリアルタイム更新が必要なデータに、コピー&ペーストは固定的な情報に、HTML埋め込みはデザイン性を重視する場合に適しています。

まずは最も手軽なスプレッドシート埋め込みから試行し、必要に応じてHTML等の高度な手法へステップアップするのが近道です。権限設定やレイアウト調整に慣れてきたら、CSSを使ったカスタマイズやレスポンシブ対応にも挑戦してみてください。

表形式での情報の整理・可視化を徹底することで、社内の意思決定スピードや業務効率を大幅に改善できます。社内ポータルや顧客向けサイトで、誰もが必要な情報にすぐアクセスできる環境を整えましょう。

よりスムーズな情報共有環境を求めるなら、表機能が標準搭載されたNotePMのような高機能な社内wikiツールの活用も有力な選択肢となります。ただし、まずは本記事で紹介した手法を実践し、Googleサイトの可能性を最大限に引き出してください。