Translate

2020年6月2日

Googleスプレッドシート から 簡単にHTMLの表を作成する

Googleシートからテーブルタグを作成

HTMLで表を描くのは嫌いです。簡単な表であればエディタで直接書けばよいのですが、大きな表を作成したり、セルを結合したり、バックグランドの色を変えたりとなると、、、、。

「んー、面倒くさい!」


HTMLで表を作成する(基本編編)

先ずは、HTMLで表を作成するときのおさらいです。


枠線

枠線を描くときは、<table border=”数値”> を使い、枠線の太さを px(ピクセル)で指定します。

<table border="1">
    <tbody>
        <tr>
            <td>データ1</td>
            <td>データ1</td>
            <td>データ1</td>
        </tr>
    </tbody>
</table>

表示:
データ1 データ2 データ3

border で枠線を描くと二重線となります。枠線を一本線にするには、二重線の予約を設定する cellspacing を使って、二重線の余白を 0 にすることで2本の線が重なり一本線となります。

<table border="1" cellspacing="0">
    <tbody>
        <tr>
            <td>データ1</td>
            <td>データ1</td>
            <td>データ1</td>
        </tr>
    </tbody>
</table>

表示:
データ1 データ2 データ3

セル内の余白

表の見栄えをよくするために、セルの内の余白を設定しましょう。セル内の余白については、tableタグの中で cellpadding=”数値” で指定します。数値は px(ピクセル)指定です。余白は、左右、前後に適用されます。

例:cellpading=”0”

※ セル内の余白なしの場合は、cellpadding を指定する必要はありませんが、下記の例では明示的に0としています。

<table border="1" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td>データ1</td>
            <td>データ1</td>
            <td>データ1</td>
        </tr>
    </tbody>
</table>

表示:
データ1 データ2 データ3


例:cellpading=”3”

<table border="1" cellspacing="0" cellpadding"3">
    <tbody>
        <tr>
            <td>データ1</td>
            <td>データ1</td>
            <td>データ1</td>
        </tr>
    </tbody>
</table>

表示:
データ1 データ2 データ3


例:cellpading=”5”

<table border="1" cellspacing="0" cellpadding="5">
    <tbody>
        <tr>
            <td>データ1</td>
            <td>データ1</td>
            <td>データ1</td>
        </tr>
    </tbody>
</table>

表示:
データ1 データ2 データ3

セル内の背景色

表の見出し行に色を付けるとわかりやすくなります。背景色は、<td bgcolor=”カーラーコード”> です。下記の例では見出しの色を #cccccc としています。

<table border="1" cellspacing="0" cellpadding="3">
    <tbody>
        <tr>
            <td bgcolor="#cccccc">見出し1</td>
            <td bgcolor="#cccccc">見出し2</td>
            <td bgcolor="#cccccc">見出し3</td>
        </tr>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
            <td>データ3</td>
        </tr>
    </tbody>
</table>

表示:
見出し1 見出し2 見出し3
データ1 データ2 データ3

文字寄せ

セル内の文字は、aling=”” で 左寄せ(left)、中寄せ(center)、右寄せ(right) の指定ができます。

<table border="1" cellspacing="0" cellpadding="3">
    <tbody>
        <tr>
            <td bgcolor="#cccccc">見出し1</td>
            <td bgcolor="#cccccc">見出し2</td>
            <td bgcolor="#cccccc">見出し3</td>
        </tr>
        <tr>
            <td align="left">左</td>
            <td align="center">中</td>
            <td align="right">右</td>
        </tr>
    </tbody>
</table>

表示:
見出し1 見出し2 見出し3
左寄せ 中寄せ 右寄せ

セル内縦位置

セル内の文字位置の指定となります、valign=”” で 上端揃え(top)、中央揃え(middle)、下端揃え(bottom) の指定ができます。但し、1行で収まるようなときは指定しても何も変わりません。

<table border="1" cellspacing="0" cellpadding="3">
    <tbody>
        <tr>
            <td bgcolor="#cccccc">見出し1</td>
            <td bgcolor="#cccccc">見出し2</td>
            <td bgcolor="#cccccc">見出し3</td>
            <td bgcolor="#cccccc">見出し4</td>
        </tr>
        <tr>
            <td>あ<br />い<br />う<br />え<br />お></td>
            <td valign="top">上端揃えlt;/td>
            <td valign="middle">中央揃え</td>
            <td valign="bottom">下端揃え</td>
        </tr>
    </tbody>
</table>

表示:
見出し1 見出し2 見出し3 見出し4




上端揃え 中央揃え 下端揃え

セルの結合

表をきれいに見せるために横のセルと結合するには colsapn属性 を、縦に結合するには rowsapn 属性を使い、結合する行数、列数を指定します。

<table border="1" cellspacing="0" cellpadding="3">
    <tbody>
        <tr>
            <td rowspan="2" valign="middle">2行1列</td>
            <td colspan="2" valign="middle" align="center">1行2列</td>
        </tr>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
        </tr>
    </tbody>
</table>

表示:
2行1列 1行2列
データ1 データ2

簡単にHTMLで表を作成したい

と、データを埋めるだけでなく、そもそもHTMLで表を記載するのは面倒くさい。オンラインでHTMLで表を作成できる「Table Tag Generator」を使っていましたが、それでも、超簡単とまではなりません。

どうせならスプレッドシートで作成した表をHTML表記に変換するようなツールがあればいい!そういのを作成している賢い人はいないのかと探してみると、

「いらっしゃいました!」

Googleスプレッドシートで作成した表を 背景色、文字色、セルの結合、文字寄せ、文字揃え、セル内の改行 など シートで作成した見た目に近い形で、HTMLのTABLEタグに変換してくれます。


モーリーさんのスクリプトをカスタマイズ

モーリーさんが作られたスクリプトを若干変更して使わせていただきました。

変更点
  • 枠線・余白を設定
  • <tbody>タグの追加
  • 文字の縦位置を中央揃えに
  • 見出しの変更

枠線・余白 + <tbody>タグ

<table>タグに枠線と余白の設定を追加し、併せて<tbody>タグを追加

【変更前】13行目

var tableTag = "<table>"; // テーブルタグを格納する

【変更後】
表に1pxの枠線で囲み、セル内の余白を3pxに + <tbody> タグを追加

var tableTag = '<table border="1" cellspacing="0" cellpadding="3"><tbody>'; // テーブルタグを格納する 

【変更前】113行目

tableTag += "</table>"; // テーブルタグを閉じる

【変更後】
</tbody>タグを追加

tableTag += "</tbody></table>"; // tbodyとテーブルタグを閉じる


文字の縦位置を中央揃えに

文字の縦位置についても取得とありますが、Google Sheets で ”垂直方向の位置” を変更しても、なぜか常に bottom (下端揃え)となっていたので、シートの設定に関わらず、middle(中央揃え)としました。下記では<td>タグで1セルづつ、文字の縦位置を設定していますが、<tr>タグに valign=”middle” を追加すれば、行全体を “中央揃え” にすることができます。

【変更前】97行目から105行目

// 縦方向の文字寄せ
var alignString = range.getVerticalAlignments()[i][j]; // スプレッドシートのセルの文字寄せの状態を取得する
switch(alignString){ // 文字寄せの種類別処理
    case "top": // 上寄せ
    //case "middle": // 中央寄せ(縦)テーブルタグのセルのデフォルト位置なので記述しない
    case "bottom": //下寄せ
        rowTag += ' valign="' + alignString + '"'; // テーブルタグの文字寄せの属性値を作成する
        break;
}

【変更後】
セルの文字寄せ状態は取得せずに、常に valign=”middle”(中央揃え)とする。

// 縦方向の文字寄せ
rowTag += ' valign="middle"'; // 中央揃えに設定

見出しの変更

太文字のセルを見出しとして <td> ではなく <th> を設定するようになっていましたが、背景色などその他が設定されないので、太文字の場合には、見出しとして<th>タグに変更するけど、それ以外のシートの属性は、反映されるように変更。

【変更前】71-85行目

// 通常・見出しセル、セルの背景色、文字色を設定する
var cellTag = ""; // セルタグ var colorString = ""; // 背景色指定の属性値 if(range.getFontWeights()[i][j] === "normal"){ // 文字が通常の場合(太字でない場合) cellTag = "td" // 通常のセル if(range.getBackgroundColors()[i][j] !== "#ffffff"){ // 白色の場合 colorString = ' bgcolor="' + range.getBackgroundColors()[i][j] + '"'; //色指定の属性値を追加する } }else{ // それ以外の場合 cellTag = "th"; // 見出しセル } rowTag += "<" + cellTag + margeString + colorString; // セルの結合と背景色指定を追加する if(range.getFontColors()[i][j] !== "#000000"){ // 文字が黒でない場合 rowTag += ' style="color:' + range.getFontColors()[i][j] + '"'; // 文字色指定を追加する }

【変更後】
通常文字であれば<td>、太文字であれば、見出しタグ<th>とする。

// 通常・見出しセル、セルの背景色、文字色を設定する
var cellTag = ""; // セルタグ
var colorString = ""; // 背景色指定の属性値
if(range.getFontWeights()[i][j] === "normal"){ // 文字が通常の場合(太字でない場合)
    cellTag = "td"; // 通常のセル
} else { //見出しセル
    cellTag = "th"; // 見出しセル
}        
if(range.getBackgroundColors()[i][j] !== "#ffffff"){ // 白色の場合
    colorString = ' bgcolor="' + range.getBackgroundColors()[i][j] + '"'; //色指定の属性値を追加する
}
rowTag += "<" + cellTag + margeString + colorString; // セルの結合と背景色指定を追加する
if(range.getFontColors()[i][j] !== "#000000"){ // 文字が黒でない場合
    rowTag += ' style="color:' + range.getFontColors()[i][j] + '"'; // 文字色指定を追加する
}

とっても簡単にGoogleシートからHTMLの表に変換

象と散歩: アレクサ、ポモドーロを開始して!」の表も、Googleシートで作成した表をこちらのスクリプトでHTML変換しています。

とっても便利です。ありがとうございます!!!

8 件のコメント:

  1. はじめまして、表組で悩んでいたところこちらにたどり着きとても参考になり助かりました。ありがとうございます。1点、うまくいかないところがあり、もしよろしければ教えていただきたいのですが、Google スプレッドシートでテキストに色を付け、HTML化するとそのセルの囲み罫も色がついてしまいます。テキストのみ色を付けたいのですが、どの部分を修正すればいいのでしょうか。モーリーさんのスクリプトをカスタマイズで、枠線・余白 + tbodyタグのみ変更してあります。何卒よろしくお願いいたします。

    返信削除
    返信
    1. スクリプト上の下記の部分で文字色を設定しているようです。自分の環境では特に問題なく動いていますが、シートの背景色は白になっていますか?

      if(range.getFontColors()[i][j] !== "#000000"){ // 文字が黒でない場合
      rowTag += ' style="color:' + range.getFontColors()[i][j] + '"'; // 文字色指定を追加する
      }

      削除
  2. 初めまして。質問すみません。
    【変更前】87行目~にもともとあるのは縦方向ではなく横方向なのですが、縦方向(97行目から)を変更でよろしいんでしょうか。

    返信削除
    返信
    1. ご指摘ありがとうございます!
      97行目から105行目が正解です。ブログ内本文も修正いたしました。

      削除
  3. はじめまして、よろしくお願いいたします。
    スプレッドシートからGoogle siteへの罫線をつかった表の移植に困り、貴サイトにたどり着きました。
    HTMLで埋め込むことでGoogle site内での検索に引っかるようになり、大変使い勝手が良くなり感謝しております。

    一点質問なのですが、HTMLに変換した際に文字色が誤って反映される場合があります。
    具体的には赤字のものが緑色で表示されます。
    ただしく赤色で表示されることもあるので原因がわからないです。

    HTMLは初心者でよくわからないので教えていただけるとありがたいです。
    よろしくお願いします。

    返信削除
    返信
    1. 確認してみましたがカラーコードも問題なく設定できています。どのような表をHTMLに変換したときに問題が発生しているかを教えていただければ調べてみます。

      削除
  4. はじめまして。スプレッドシートからテーブルタグを出力できる方法がないか調べておりましたら、こちらのページにたどり着きました。枠に余白がつけれないかと悩んでいたためとても助かりました。
    もう1点悩んでいる箇所があるため、もし方法が分かりましたらご教授頂けたらと思い、ご連絡させていただきました。

    データ1 データ2 データ3 となっている表からHTMLのテーブルタグを作成したら

    <table border="1" cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
    <td>★データ1●</td>
    <td>★データ1●</td>
    <td>★データ1●</td>
    </tr>
    </tbody>
    </table>

    のように予め最初と最後に指定した言葉が入った状態にできたらと思っております。
    何卒よろしくお願いいたします。

    返信削除
    返信
    1. ご質問ありがとうございます。データの前に★、データの後ろに●が表示されるように変更するのであれば、

      1) 下記の行を見つける
      rowTag += cells[i][j].toString().replace(/\n/g, "
      ") + ""
      2) 下記のように変更する
      rowTag += "★" + cells[i][j].toString().replace(/\n/g, "
      ") + "●"

      実行結果は確認しましたが、これで回答になっていますでしょうか。



      削除

アクセス上位(過去7日間)