表の挿入

スプレッドシートで作成した表をそのまま Webサイトに貼り付ける方法について解説します。 以下では Googleサイトを例にした手順を説明します。
※ Googleサイトには表作成の機能がないため、 その代用としてもご利用になれます。

手順

1. スプレッドーシートの HTML を取得する

ドキュメント、スプレッドシート、プレゼンテーションを埋め込む

 1.Google ドキュメント、スプレッドシート、スライドのいずれかでファイルを開きます。

 2.上部の [ファイル] → [ウェブに公開] をクリックします。

 3.表示されたウィンドウで [埋め込む] をクリックします。

 4.公開オプションを選択します。

・スプレッドシート: スプレッドシート全体を公開するか、シート別に公開するかを選択します。

・ プレゼンテーション: プレゼンテーションのサイズとスライドの進行速度を選択します。

 1.[公開] をクリックします。

 2.テキスト ボックス内の HTML をコピーして、サイトやブログに貼り付けます。

Google ドキュメント、スプレッドシート、スライド、フォームを公開する - パソコン - ドキュメント エディタ ヘルプ

https://support.google.com/docs/answer/183965

※「ファイルを埋め込む」の項目をご参考ください。

* ドキュメント、スプレッドシート、プレゼンテーションを埋め込む

2. 上記の HTML 内のファイルのリンクに、スプレッドシートの範囲指定するための range パラメータを追加 ( 例 : &range=A1%3AB3)

3. Google サイトにて埋め込み機能を利用する

Google ドキュメント、スライド、スプレッドシート、フォーム、グラフを追加する

 1.パソコンから、新しい Google サイトでサイトを開きます。

 2.右側の [挿入] をクリックします。

 3.追加するファイルの種類（ドキュメント、スライド、スプレッドシート、フォーム、グラフなど）を選択します。

 4.ファイルを選択 → [ 挿入 ] をクリックします。

 5.変更を公開するには、右上の [ 公開 ] をクリックします。

Google のファイルや動画などを追加する - サイト ヘルプ

https://support.google.com/sites/answer/90569?hl=ja

課題

・一部しか表示されない（表示エリアを広げるには？）

・シート名が表示に含まれる

・タブ名がが表示に含まれる

解決策

Google スプレッドシートで対象のファイルを開きます。

上部の [ファイル] ->  [ウェブに公開] をクリックします。

表示されたウィンドウで [埋め込む] をクリックします。

「ドキュメント全体」が表示されている箇所で指定のシートを選択し、[公開] をクリックします。

テキスト ボックス内のコードをコピーして、他の場所にて一旦貼り付けます。

取得したコードを主に下記の部分を編集してください。

「width=」と「 height=」を追加すると、スプレッドシートの表示される部分を広げることができます

例：「width=100% height=100%」

「range=」を追加すると、表示される部分を指定できます

例：対象のシートの「A1からE50まで」のみを公開したい場合、「range=A1:E50」を追加いただけます

「widget=false」を変更すると、シートタブが表示されないようになります

「chrome=false」を追加すると、タイトルとフッターが表示されないようになります

(例)

元のコード：

<iframe src="https://docs.google.com/spreadsheets/d/e/docid/pubhtml?gid=123456789&amp;single=true&amp;widget=true&amp;headers=false"></iframe>

編集されたコード：

<iframe width=100% height=100% src="https://docs.google.com/spreadsheets/d/e/docid/pubhtml?gid=123456789&amp;single=true&amp;range=A1:E50&amp;widget=false&amp;chrome=false&amp;headers=false"></iframe>

新しい Google サイトでサイトを開きます。右側で、[挿入] -> [埋め込む] -> [埋め込みコード] をクリックします。

[手順 6 ] によって編集されたコードをこの箇所に貼り付けます。[次へ] -> [插入] をクリックします。

変更を公開するには、右上の [公開] をクリックします。

尚、コードの編集は Google 社のサポート対象外のサービスとなっており、更に詳しい内容となりますとご案内することができかねますので、予めご了承ください。

[1] Google ドキュメント、スプレッドシート、スライド、フォームを公開する - パソコン - ドキュメント エディタ ヘルプ

「埋め込んだスプレッドシートを編集する」の項目をご参照ください。

課題

・ファイル名とシート名を消したい

解決策

タイトル部分とシート名部分につきましては、以下のように記載することで共に非表示になります。

「widget=false」→ シートタブ非表示

「chrome=false」→ タイトルとフッター非表示