表の埋め込み-Sheetの利用

Google spreadsheetで作成した表を埋め込む

htmlでは表を作成することができます。コード<table></table>を使います。
試しにgoogle spreadsheetで表を作成して htmlで書き出したコードを見てみましょう。
長いhtmlコードとresourcesフォルダにsheet.cssがあります。.htmlファイルをエディタで開きます。

この中で検索で<table>を探します。この<table>から後が重要です。書き出されたデータは改行が入っていないので下記に整理して表示してみます。

書き出したコードをvisual studio codeなどのエディタで開きます。"table"で検索すると以下のように「<table class=」で始まる行が見つかります。その行から「</table>」までをコピーします。下のコードは見やすいように改行やスペースを加えてあります。

<table class="waffle" cellspacing="0" cellpadding="0">

<thead>
　<tr>
　<th class="row-header freezebar-origin-ltr"></th>
    <th id="0C0" style="width:100px;" class="column-headers-background">A</th>
　<th id="0C1" style="width:100px;" class="column-headers-background">B</th>
　</tr>
</thead>
<tbody>
　<tr style="height: 20px">
　　<th id="0R0" style="height: 20px;" class="row-headers-background">
　　<div class="row-header-wrapper" style="line-height: 20px">1</div>
　 </th>
　<td class="s0" dir="ltr">商品名</td>
　<td class="s0" dir="ltr">単価(円)</td>
　</tr>
  <tr style="height: 20px">
　<th id="0R1" style="height: 20px;" class="row-headers-background">
　  <div class="row-header-wrapper" style="line-height: 20px">2</div>
　</th>
  <td class="s0" dir="ltr">りんご</td>
  <td class="s1" dir="ltr">150</td>
  </tr>
　<tr style="height: 20px">
　<th id="0R2" style="height: 20px;" class="row-headers-background">
　  <div class="row-header-wrapper" style="line-height: 20px">3</div>
　</th>
    <td class="s0" dir="ltr">みかん</td>
    <td class="s1" dir="ltr">100</td>
    </tr>
</tbody>
</table>

GoogleサイトではHTMLを入力できます。wordprssなどでも同様です。
Googleサイトの挿入/埋め込むを開いて、コードをペーストします。「次へ」をクリックします。
最後に表が現れ、さらに「次へ」をクリックします。

 表のtable HMLコードを一度作れば行や列の追加は比較的分かりやすいのでぜひそれを変更して利用して見てください。