いろいろブログカスタマイズメモ

はてなブログのカスタマイズ、書き方などのメモ、チートシートです。/※本サイトはアフィリエイトプログラムによる収益を得ています。ページ内のリンクがアフィリエイトリンクの場合があります。

Markdownでテーブルを表現する方法


※本サイトはアフィリエイトプログラムによる収益を得ています。
 ページ内のリンクがアフィリエイトリンクの場合があります。

 データなどを纏めていると必要になってくるのがテーブルの表記。

Markdownでの簡易表記

簡単なテーブル構成であれば、Markdownの表記がわかりやすい。

これは簡単で、「|」で区切るだけ。

最初の一行が見出し、次が行の属性、そこから先にテーブルに並べたい内容になります。

|見出し1|見出し2|見出し3|
|-------|-------|-------|
|内容1-1|内容1-2|内容1-3|
|内容2-1|内容2-2|内容2-3|
見出し1 見出し2 見出し3
内容1-1 内容1-2 内容1-3
内容2-1 内容2-2 内容2-3

これが基本形。
二行目の「-」はいくつでもいいので、適当に見栄えを整えるとよいです。

センタリングなどをしたいときは、

|見出し1|見出し2|見出し3|
|:------|:-----:|------:|
|左寄せ|センタリング|右寄せ|
見出し1 見出し2 見出し3
左寄せ センタリング 右寄せ

というように、二行目に「:」を入れて指定します。

一部をセンタリングしたい

上の例だと、まとめて全部センタリングされてしまうんですが、見出しだけセンタリングしたいみたいなことはあると思います。

そういうときは直接書いてしまったらできました。

|<center>見出し1</center>|<center>見出し3</center>|<center>見出し3</center>|
|:-|:-:|-:|
|左寄せ|センタリング|右寄せ|
見出し1
見出し3
見出し3
左寄せ センタリング 右寄せ

centerタグだけではなくていろいろ応用は利きそうです。

複雑なテーブル構成

これ以上の複雑な構成、例えばカラムの結合などをして表示したいとなったらHTMLを直接書いてしまったほうが早い。

<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 colspan=2>内容2-1</td>
  <td>内容2-3</td>
</tr>
</table>
見出し1 見出し2 見出し3
内容1-1 内容1-2 内容1-3
内容2-1 内容2-3

みたいに。