BloggerのGoogle Spreadsheetの表を貼り付ける

Bloggerで表を作ろうとしたら大変。簡単な方法としては、Google Spreadsheetで表を作って貼り付ければよいのだが、表がいい感じで表示されないので、諦めていた。

調整する方法を見つけたのでメモ。

表を貼り付けた後、HTMLビューにしてTableタグに含まれる「table-layout: fixed; width: 0px;」を「table-layout: auto; width: 100%;」に置き換える。

「table-layout」を「auto」に設定することで、デバイスの画面サイズに対応したサイズで表示され、「width」を「100%」に設定することで、表の横幅が画面の横幅いっぱいに表示されるようになる。

参考）https://dendensoken.hankeidou.jp/2021/05/blogger-table.html

2022-01-10追記（2022-02-14 tdタグを1行にまとめるコマンドを追加）

ここで作った表のHTMLが長い原因である、tdタグ内のdata-sheets-numberformat属性やdata-sheets-value属性、表内の各項目に付いているspanタグを削除すると見た目がスッキリする。tdタグのstyle属性はほぼすべての項目で同じなので、削除しても良さそうだが、微妙に違うセルがあるので残しておく。

自分用のメモだが、vimで行う場合は下記（1行目はHTMLで有ることを宣言、2行目はタグの終わりで改行を入れる、3行目はファイル全体を選択、4行目はインデントを整える、5行目はdata-sheets-*属性を削除、6行目はspanタグを削除、7行目はtdタグを1行にまとめる）

:set filetype=html     
:%s/>/>^M/gc 
ggVG
=
:%s/data-sheets-.\{-}\%(}"\)\@=}" //gc 
:%s/<span style="[^"]\{-}">[\s\n]*\s*\(.\{-}\)[\s\n]*\s*<\/span>/\1/gc
:%s/<td>\n\s*\(.*\)\%(<\/td>\)/<td>\1<\/td>/gc 

メモ

置換先の設定を「&」にしてやると、一致した文字列全体に置き換えてくれる。

置き換え時のオプションで「n」を指定すると、実際の置換はせずに、置換される個数を表示してくれる。

例

:%s/data-sheets-.\{-}\%(}"\)\@=}" /&/gn 

改行コードは\n。「\_.」で改行コードを含む任意の一文字を表せる。

「\{-}」は直前の文字の0個以上の最短マッチを表す