Minimal Green

はてなブログテーマ『Minimal Green』のデモブログ。はてなブログカスタマイズや、HTML、CSSなどについて書いています。

ブログにtable(表)を挿入する簡単な方法 Excel→HTML変換ツールの活用

f:id:minimalgreen:20180214003617j:plain
ブログなどに表を挿入するとき、面倒なのがtableのコーディング。はてなブログの見たままモードだとExcelなどからコピペしてそのまま貼り付ければOKなようですが、セル結合をしていたりする複雑な表シートだと上手くいかないようです。
普通にHTML書けば良いのですが、tableの入れ子を書くのは結構手間ですよね。


Twitterでこういうツイートを見かけ以下のツールを使って無事解決されたようなので備忘録として書かせていただきます。
HTMLのtable(表)の基本についてはサルワカさんの記事がわかりやすいので是非ご参照下さい。
saruwakakun.com

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)はExcelシートの表をHTMLのtableに変換コーディングしてくれるツールです。
ExcelやCSVからコピペするだけでHTMLのtableに変換してくれます。ExcelがなくてもGoogleスプレッドシートやNumbersでも使えます。
f:id:minimalgreen:20180213181610p:plain
↑こういった空白セルがある場合も
f:id:minimalgreen:20180213182220p:plain
「空白セルを出力しない」「空白セルを上セルと結合する」にチェックを入れて変換出力すれば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
このHTMLをはてなブログの見たままモードならHTML編集画面にはてな記法モード・Markdownモードならそのままコピペすれば表をブログに挿入完了です。

はてな記法を使う(簡単な表)

簡単な表の場合ははてな記法やMarkdownで書くのが楽です。

|*名前|*色|*個数|
|りんご|赤|1|
|みかん|だいだい|2|
名前 個数
りんご 1
みかん だいだい 2

半角アスタリスク*をつけると見出しとなります。
blog.minimal-green.com
はてな記法モードでははてな記法がわからなくても十分使えますので、見たままモードのように勝手に変なゴミタグが追加されるのが嫌な人、シンプルに記事編集画面を使いたい方は「はてな記法モード」「Markdownモード」がおすすめです。普通にHTMLもそのまま使えますので見たままモードのようにHTML編集画面と行ったり来たりしなくて済みます。