![見出し画像](https://assets.st-note.com/production/uploads/images/89541282/rectangle_large_type_2_6eae6e8ad5b7f7780e3615c85cbfa8d4.png?width=1200)
スクリプトを使わずに、スプレッドシートの表をのタグに変換する【googleスプレッドシート】【関数】【HTML】
以前ご案内した記事です。
こちらでは、スプレッドシートの表をHTMLに変換して、メールで送信する方法のご案内でした。
そちらの内容では、GASの繰り返しとgetRange()、getValue()を使って
HTMLを作成しました。今回はGASを使わずに、関数のみを使ってHTMLを作成する方法です。
スプレッドシートの関数だけでHTMLに変換できました
GASを使ってHTML表を作成する構成としては、
1.1行に対して列を<td></td>で囲むことを繰り返す
2.<tr></tr>をつけて列を作成する
3.全体を<table></table>で囲む
でした。
繰り返し①で「1」を作成
繰り返し②で「2」を作成が基本になります。
この表を
![](https://assets.st-note.com/img/1666439795001-DWfaZ3eyEU.png)
こういうHTMLに変換するのがゴールです(まずは、すべてTH)
<table><tr>
<td>あ<td/><td>い<td/><td>う<td/><td>え<td/><td>お</td>
</tr><tr>
<td>あ<td/><td>い<td/><td>う<td/><td>え<td/><td></td>
</tr><tr>
<td>あ<td/><td>い<td/><td>う<td/><td><td/><td></td>
</tr><tr>
<td>あ<td/><td>い<td/><td><td/><td><td/><td></td>
</tr><tr>
<td>あ<td/><td><td/><td><td/><td><td/><td></td>
</tr><tr>
<td>あ<td/><td><td/><td>う<td/><td><td/><td></td>
</tr><table>
スプレッドシートの関数「TEXTJOIN」で行を作る方法
結論から言いますと、「TEXTJOIN」をつかえばHTMLが作成できます。
![](https://assets.st-note.com/img/1666440193143-kh8kcEQpg9.png?width=1200)
①1行目に指定する関数です。
「A2」
="<tr><td>"&TEXTJOIN("<td/><td>",FALSE,(B2:F2))&"</td></tr>"
これを、行数オートフィルします。
作成した6行に対し
「A8」
②="<table>"&CONCATENATE(A2:A7)&"<table>"で全体を生成します。
こちらで試してみて、表になっていました。
![](https://assets.st-note.com/img/1666440394517-PewV2S9SsG.png)
1行目を見出しにするとき
1列目だけ、こちらに書き換えます。<td>⇒<th>ですね。
="<tr><th>"&TEXTJOIN("<th/><th>",FALSE,(B2:F2))&"</th></tr>"
結果です。
![](https://assets.st-note.com/img/1666440576185-RpjJldKua9.png)
1列目を見出しにするとき
こちらは6行とも書き換えます。1列目を個別にして、2列目以降をTEXTJOINで結合します。
="<tr><th>"&B2&"</th><td>"&TEXTJOIN("<td/><td>",FALSE,(C2:F2))&"</td></tr>"
結果です。
![](https://assets.st-note.com/img/1666440773924-S39uUO9MvO.png)
まとめ
「TEXTJOIN」これは単純な文字の連結ではなく、「間に特定のテキストを挟んで連結する」という連結方法です。
「空白セルを無視する」・「空白セルも考慮する」の使い分けもできるので、用途によって使い分けて活用しましょう。
いいなと思ったら応援しよう!
![経理⇒関数⇒GAS](https://assets.st-note.com/production/uploads/images/140964968/profile_288626afe8f483640cfe2d9f1443c519.png?width=600&crop=1:1,smart)