【table技法か】戯れ言――はてなブログのテーブル（表）記載法について【HTMLか】
――【スポンサー検索】――
さあ、戯れ言《
テーブル（表）とは
Excel（エクセル）に代表される表計算ソフトのシートを思い浮かべてもらえばいい。
アスキーアート風に表現すれば、こうだ。
ーーーーーーーーーーーーーーーーーー
｜ 中身１ ｜ 中身２ ｜ 中身３ ｜
ーーーーーーーーーーーーーーーーーー
｜ データ ｜ データ ｜ データ ｜
ーーーーーーーーーーーーーーーーーー
｜ データ ｜ データ ｜ データ ｜
ーーーーーーーーーーーーーーーーーー
ダサ過ぎる（汗。むろん、こんな表ならば無い方がマシだ。
箇条書きを駆使して工夫するべきだろう。それか表そのものを画像データ化して、貼り付けてしまえば良い。それならば、ＰＣ表示・タブレット表示・スマホ表示にて、レスポンシブ対応的に困る事はなくなる。
こんな風に――
その反面、ＳＥＯ的には好ましくない。
セルの中（データ）をGoogle神はデータとして認識してくれないからだ。
サクッと分かり易く解説している、優良な記事を紹介しよう。
ＨＴＭＬモードで載せる場合
『エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)』にて、エクセルシートをＨＴＭＬコード化する、と『元ＩＴ土方の供述』で解説されているが、だったら、そのＨＴＭＬコードの標準形を雛形化してしまおうと思った。
「見たままモード」の「ＨＴＭＬ編集」から「はてな記法モード」「Markdownモード」に編集画面を切り替えるのが面倒だからだ。
で、辿り着いたのが下のツール。
これで以下のコードを作成
<table style="border: 1px solid #CCC;border-collapse: collapse;width: 100%;">
<tr>
<td style="padding:10px;border: 1px solid #CCC;background-color: #F4F8FF;font-weight: bold;padding: 5px;">データ１</td>
<td style="padding:10px;border: 1px solid #CCC;background-color: #F4F8FF;font-weight: bold;padding: 5px;">データ２</td>
<td style="padding:10px;border: 1px solid #CCC;background-color: #F4F8FF;font-weight: bold;padding: 5px;">データ３</td>
</tr>
<tr>
<td style="padding:10px;background-color: #F9FCFE;font-weight: bold;">中身１</td>
<td style="padding:10px;border: 1px solid #CCC;">中身２</td>
<td style="padding:10px;border: 1px solid #CCC;">中身３</td>
</tr>
<tr>
<td style="padding:10px;border: 1px solid #CCC;background-color: #F9FCFE;font-weight: bold;">詳細１</td>
<td style="padding:10px;border: 1px solid #CCC;">詳細２</td>
<td style="padding:10px;border: 1px solid #CCC;">詳細３</td>
</tr>
</table>
すると、こんな感じでシンプルな表（テーブル）が出来上がる。
| データ１ | データ２ | データ３ |
| 中身１ | 中身２ | 中身３ |
| 詳細１ | 詳細２ | 詳細３ |
実際にカスタムしてみる
ＴＨＭＬを少し弄ってみる。
| 要素１ | 要素２ | 要素３ | |
| タグ１ | データ１✕１ | データ１✕２ | データ１✕３ |
| タグ２ | データ２✕１ | データ２✕２ | データ２✕３ |
| タグ３ | データ３✕１ | データ３✕２ | データ３✕３ |
こうなった場合のコードは以下だ。
<table style="border: 1px solid #CCC; border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="padding: 5px; border: 1px solid #CCC; background-color: #f4f8ff; font-weight: bold;"> </td>
<td style="padding: 5px; border: 1px solid #CCC; background-color: #f4f8ff; font-weight: bold;">要素１</td>
<td style="padding: 5px; border: 1px solid #CCC; background-color: #f4f8ff; font-weight: bold;">要素２</td>
<td style="padding: 5px; border: 1px solid #CCC; background-color: #f4f8ff; font-weight: bold;">要素３</td>
</tr>
<tr>
<td style="padding: 10px; background-color: #f9fcfe; font-weight: bold;">タグ１</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ１✕１</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ１✕２</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ１✕３</td>
</tr>
<tr>
<td style="padding: 10px; border: 1px solid #CCC; background-color: #f9fcfe; font-weight: bold;">タグ２</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ２✕１</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ２✕２</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ２✕３</td>
</tr>
<tr>
<td style="padding: 10px; border: 1px solid #CCC; background-color: #f9fcfe; font-weight: bold;">タグ３</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ３✕１</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ３✕２</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ３✕３</td>
</tr>
</tbody>
</table>
使用している「はてなテーマ」にもよるが、このＨＴＭＬコードを基本に弄っていけば、スタンダードな表ならば問題なく作れると思う。凝りたければ、ＣＳＳにコードを追記するしかない。
［ データ１✕１ ］この場所の記述を、通常のHTMLに沿って書き換えればＫＯだ。リンクや画像の挿入もそれでいける。
ここから更に実用の表にすると――
| 作品タイトル | 表紙 | 購入先 | 値段 |
| 顔の亡い堕天使 |
|
商品ページ | ４００円+税 |
| 国立安楽死センター |
|
商品ページ | ４００円+税 |
| 真夜中の解猟区 |
|
４００円+税 |
ザッとこんな感じになる。
この記事が少しでも参考になってくれれば幸いだ。