データなどを纏めていると必要になってくるのがテーブルの表記。
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>| |:-|:-:|-:| |左寄せ|センタリング|右寄せ|
左寄せ | センタリング | 右寄せ |
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 |
みたいに。