WEB記事で表を作成したい場合、HTMLをいじってtableタグで表作成をする方が多いと思います。
私もlivedoorブログで表をtableタグで挿入したところ、改行してほしくないところで改行されてしまい、見事に表が崩れるという事象が発生！
なんとかいい方法はないものかと探していたら「エクセルを使って表を作成→WEB形式ファイル保存→アップ」という方法を発見！
ちょっと面倒くさいけどこれしかないか・・・と思っていたら「ん？待てよ・・・」と思って試してみたら、なんと、livedoorブログでも超簡単に表を記事反映できる方法を発見！！！
今回、筆者のブログがライブドアなので、ライブドアブログで試していますか、ほとんどのブログのCMS（投稿画面）で対応できるはずです！
（ワードプレスで試したら同じようにできました）
と言うことで、超簡単な表作成方法＆表崩れを防ぐ方法を大公開しちゃいます！
Googleスプレッドシートを使用して表を作成する
しかし、「一度、ファイル変換してさらに開く」行程を省いてくれるツールがあったのです！
それがGoogleスプレッドシート。
言わずと知れた、Google版のオンラインエクセルですね。
最終的に「.html」ファイル形式にして使わなければいけないなら、「最初からオンラインのスプレッドシートで作成すれば一発でできるんじゃ・・・」と思って試したら見事的中。
Googleスプレッドシートを使ったlivedoorブログでの表（table）作成方法
では、超簡単なlivedoorブログで崩れのない表作成方法の手順を紹介します。Step1：Googleスプレッドシートで表を作成する
作成が完了したら表の範囲を選択してコピーします。
Step2：livedoorブログにコピーをペーストする
たったこれだけ。
この方法で作成したlivedoorブログの表をプレビューしてみる
見事に崩れていません！
SP（スマホ）表示
ブログのデザインテーマによるかもしれませんが、実は、livedoorブログはスマホ表示だとテーブルタグの枠線や表のヘッダータグのカラー変更がうまく表示されない場合がほとんど。
しかし、スプレッドシートからのコピーならスマホ表示でもうまく反映されています！
表の横幅を広げてみた場合
試しに、表の幅を広げても崩れがおきないか実験してみました。セルを6個分使った表がこちら。
実は、セル8個分も作成したのですが、横幅がずいぶんはみ出しました。
ですが、表自体は崩れがなく横スクロールしたら全て確認でき、きちんと表示されていました。
SP（スマホ）表示でも全て確認できる
スプレッドシートでの表作成なら簡単で崩れなし！
現状、自分がlivedoorブログで崩れのない表を作成しようと思ったら、Googleスプレッドシートで表作成してlivedoorブログに貼付ける方法がベストです。ただし、GoogleスプレッドシートはGoogleアカウントを持っていないと使用できません。
Googleアカウントは無料で作成できるので、これまでlivedoorブログで表作成に悩んでいた方は、是非、試してみてくださいね。
コメント