ブログ運営

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

こんばんは。

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

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

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

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

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

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

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

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

テーブルを書く方法

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

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

1行目を見出しにする書き方
|*見出し1|*見出し2|*見出し3|*見出し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|
1列目を見出しにする書き方
|*見出し1|項目1-1|項目1-2|項目1-3|項目1-4|
|*見出し2|項目2-1|項目2-2|項目2-3|項目2-4|
|*見出し3|項目3-1|項目3-2|項目3-3|項目3-4|
|*見出し4|項目4-1|項目4-2|項目4-3|項目4-4|

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

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

HTMLでテーブルを書く方法

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

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

<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</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>

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

<table>
<tr>
<th>見出し1</th>
<td>項目1-1</td>
<td>項目1-2</td>
<td>項目1-3</td>
</tr>
<tr>
<th>見出し2</th>
<td>項目2-1</td>
<td>項目2-2</td>
<td>項目2-3</td>
</tr>
<tr>
<th>見出し3</th>
<td>項目3-1</td>
<td>項目3-2</td>
<td>項目3-3</td>
</tr>
<tr>
<th>見出し4</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;
}
f:id:nanana-blog:20190806222108j:plain
1行目を見出しにしたテーブル
f:id:nanana-blog:20190806222135j:plain
1列目を見出しにしたテーブル

最後に

いかがだったでしょうか。

本日ははてなブログでテーブルを書く方法を紹介しました。

普段書いているモードによって記述方法が変わってきますので、参考にしてみてください。

www.nanana-blog.com

www.nanana-blog.com

www.nanana-blog.com

www.nanana-blog.com

www.nanana-blog.com