ブログなどに表を挿入するとき、面倒なのがtableのコーディング。はてなブログの見たままモードだとExcelなどからコピペしてそのまま貼り付ければOKなようですが、セル結合をしていたりする複雑な表シートだと上手くいかないようです。
普通にHTML書けば良いのですが、tableの入れ子を書くのは結構手間ですよね。
numbersで作った表をはてなに貼り付けると崩れちゃう。
— エルパ (@elppapr) 2018年2月13日
今までは問題なくできてたんだけどなんでだろう。
対処法求む！
Twitterでこういうツイートを見かけ以下のツールを使って無事解決されたようなので備忘録として書かせていただきます。
HTMLのtable（表）の基本についてはサルワカさんの記事がわかりやすいので是非ご参照下さい。
saruwakakun.com
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)はExcelシートの表をHTMLのtableに変換コーディングしてくれるツールです。
ExcelやCSVからコピペするだけでHTMLのtableに変換してくれます。ExcelがなくてもGoogleスプレッドシートやNumbersでも使えます。
↑こういった空白セルがある場合も
「空白セルを出力しない」「空白セルを上セルと結合する」にチェックを入れて変換出力すればOK。n列ごとにclass名を付けれたりして便利。見出しの背景色も変更可能です。
出力されたHTMLはこんな感じ。（CSSは省いてます）
<table> <thead> <tr> <th> 見出し0 </th> <th> 見出し4 </th> <th> 見出し5 </th> </tr> </thead> <tbody> <tr> <th rowspan="2"> 見出し1 </th> <td> データ1 </td> <td rowspan="2"> データ5 </td> </tr> <tr> <td> データ2 </td> </tr> <tr> <th> 見出し2 </th> <td> データ3 </td> <td> データ6 </td> </tr> <tr> <th> 見出し3 </th> <td> データ4 </td> <td> データ7 </td> </tr> </tbody> </table>
見出し0 |
見出し4 |
見出し5 |
|---|---|---|
見出し1 |
データ1 |
データ5 |
データ2 |
||
見出し2 |
データ3 |
データ6 |
見出し3 |
データ4 |
データ7 |
はてな記法を使う（簡単な表）
簡単な表の場合ははてな記法やMarkdownで書くのが楽です。|*名前|*色|*個数| |りんご|赤|1| |みかん|だいだい|2|
| 名前 | 色 | 個数 |
|---|---|---|
| りんご | 赤 | 1 |
| みかん | だいだい | 2 |
半角アスタリスク*をつけると見出しとなります。
blog.minimal-green.com
はてな記法モードでははてな記法がわからなくても十分使えますので、見たままモードのように勝手に変なゴミタグが追加されるのが嫌な人、シンプルに記事編集画面を使いたい方は「はてな記法モード」「Markdownモード」がおすすめです。普通にHTMLもそのまま使えますので見たままモードのようにHTML編集画面と行ったり来たりしなくて済みます。
