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

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

「んー、面倒くさい！」

HTMLで表を作成する（基本編編）

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

枠線

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

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

表示：

データ１

データ２

データ３

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

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

表示：

データ１

データ２

データ３

セル内の余白

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

例：cellpading=”0”

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

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

表示：

データ１

データ２

データ３

例：cellpading=”3”

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

表示：

データ１

データ２

データ３

例：cellpading=”5”

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

表示：

データ１

データ２

データ３

セル内の背景色

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

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

表示：

見出し１	見出し２	見出し３
データ１	データ２	データ３

文字寄せ

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

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

表示：

見出し１	見出し２	見出し３
左寄せ	中寄せ	右寄せ

セル内縦位置

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

<table border="1" cellspacing="0" cellpadding="3">
    <tbody>
        <tr>
            <td bgcolor="#cccccc">見出し１</td>
            <td bgcolor="#cccccc">見出し２</td>
            <td bgcolor="#cccccc">見出し３</td>
            <td bgcolor="#cccccc">見出し４</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>

表示：

見出し１	見出し２	見出し３	見出し４
あ い う え お	上端揃え	中央揃え	下端揃え

セルの結合

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

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

表示：

２行１列	１行２列
	データ１	データ２

簡単に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変換しています。

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

Udemy オススメ講座

【新IDE対応】Google Apps Script（GAS）の基礎を完全習得

講師：事務職たらこ

印象に残りやすい手書き風スライドを用いGASの基本的なプログラミングを気軽に学ぶことができる。本講座でGASを活用した自動化ができるレベルにはなれないが、基礎としては十分。