はてなブログでテーブル（表）を表示する方法

f:id:nanana-blog:20190806230132j:plain

こんばんは。

nanana-blog管理人のナナナです。

ブログを訪問し記事を読んでいただきありがとうございます。

他の方のブログを見ていると製品仕様などを記述する時にテーブルを使用していることが多いと感じます。

私もテーブルを使って記事を書きたいと思ったことがありますが、よく分からずテーブルを使わすに記事を書いていました。

本日ははてなブログでテーブルを記述する方法を紹介します。

はてな技法を使ってテーブルを書く方法
- テーブルを書く方法
HTMLでテーブルを書く方法
最後に

はてな技法を使ってテーブルを書く方法

はてなブ技法を使ってブログを書くには設定を変更する必要があります。

ダッシュボード ⇒ 設定をクリックし、編集モードで「はてな技法モード」を選択して変更するボタンをクリックします。

テーブルを書く方法

はてな技法でテーブルを書くにはバーティカルバー（半角の縦棒）「|」で項目を区切ります。

アスタリスク「*」を文字の前に入れることで見出しにすることができます。

１行目を見出しにする書き方
|*見出し１|*見出し２|*見出し３|*見出し４|
|項目1-1|項目1-2|項目1-3|項目1-4|
|項目2-1|項目2-2|項目2-3|項目2-4|
|項目3-1|項目3-2|項目3-3|項目3-4|
|項目4-1|項目4-2|項目4-3|項目4-4|    


１列目を見出しにする書き方
|*見出し１|項目1-1|項目1-2|項目1-3|項目1-4|
|*見出し２|項目2-1|項目2-2|項目2-3|項目2-4|
|*見出し３|項目3-1|項目3-2|項目3-3|項目3-4|
|*見出し４|項目4-1|項目4-2|項目4-3|項目4-4|

プレビューをするとこのように表示されます。

f:id:nanana-blog:20190730001221j:plain — １行目が見出しのプレビュー

f:id:nanana-blog:20190730001252j:plain — １列目が見出しのプレビュー

HTMLでテーブルを書く方法

HTMLでテーブルを書く場合は、HTML編集タブに書いていきます。

１行目を見出しにする書き方

<table>
<tr>
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
<tr>
<td>項目1-1</td>
<td>項目1-2</td>
<td>項目1-3</td>
</tr>
<tr>
<td>項目2-1</td>
<td>項目2-2</td>
<td>項目2-3</td>
</tr>
<tr>
<td>項目3-1</td>
<td>項目3-2</td>
<td>項目3-3</td>
</tr>
<tr>
<td>項目4-1</td>
<td>項目4-2</td>
<td>項目4-3</td>
</tr>
</table>

１列目を見出しにする書き方

<table>
<tr>
<th>見出し１</th>
<td>項目1-1</td>
<td>項目1-2</td>
<td>項目1-3</td>
</tr>
<tr>
<th>見出し２</th>
<td>項目2-1</td>
<td>項目2-2</td>
<td>項目2-3</td>
</tr>
<tr>
<th>見出し３</th>
<td>項目3-1</td>
<td>項目3-2</td>
<td>項目3-3</td>
</tr>
<tr>
<th>見出し４</th>
<td>項目4-1</td>
<td>項目4-2</td>
<td>項目4-3</td>
</tr>
</table>

CSS

.entry-content table{
	width:auto;
	border: 1px;
	cellpadding: 0px;
	cellspacing: 0px;
	border-spacing: 0px;
}

.entry-content table th{
	background-color:#f5f5f5;
	border: 1px solid #000000;
	text-align: center;
}

.entry-content table td{
	border: 1px solid #000000;
	width:auto;
}