それほど頻繁に使うわけではありませんが、記事中に表組を入れる時には、tableタグを使います。
頻繁に使わないからこそ、いざ使おうとした時に忘れてしまっていたり、なによりHTMLの記述がとても面倒です。
もくじ
tableタグ
こんな表を作ってみました。
| 項 目 | ドリップコーヒー | インスタントコーヒー |
|---|---|---|
| 味 | 美味しい | まあまあ |
| 手間 | 手間がかかる | 簡単 |
| 価格 | 道具代がかかる | コーヒー代のみ |
CSSで装飾しているため線や色の表示は実際のデフォルトと違いますが、最上段は、標題で太字の中央揃え。
２段目移行は、左の列が左寄せ、中央は中央揃え、右の列は右寄せにしています。
Htmlでは
HTMLでは、列や行の結合や装飾など複雑な表でも自由に作ることができます。
その分コードは膨大な量になってしまいます。
上の表を普通にHTMLで記述すると、このようになります。
<table> <thead> <tr> <th align="left">項 目</th> <th align="center">ドリップコーヒー</th> <th align="right">インスタントコーヒー</th> </tr> </thead> <tbody> <tr> <td align="left">味</td> <td align="center">美味しい</td> <td align="right">まあまあ</td> </tr> <tr> <td align="left">手間</td> <td align="center">手間がかかる</td> <td align="right">簡単</td> </tr> <tr> <td align="left">価格</td> <td align="center">道具代がかかる</td> <td align="right">コーヒー代のみ</td> </tr> </tbody> </table>
僅かな表組みでも非常に長いコードになってしまいますね。
特に右寄せなどを列ごとに変えたい時など、面倒です。
Markdown記法では
Markdown記法では、複雑な表組を作成するには向いてませんが、数列・数段程度のシンプルな表であれば、非常に簡単に作成できます。
|項 目|ドリップコーヒー|インスタントコーヒー| |:---|:---:|---:| |味|美味しい|まあまあ| |手間|手間がかかる|簡単| |価格|道具代がかかる|コーヒー代のみ
各項目の区切りに ” | ” を、文字の位置指定に ” : ” と ” – ” を入れるだけです。
左寄せは ” :— ” 中央揃えは ” :—: ” 右寄せは ” —: ” を列ごとに指定します。
各セル内の文字列前後のスペースは無視されますので、もっと視覚的に分かりやすく書くこともできます。
| 項 目 | ドリップコーヒー | インスタントコーヒー | |:----- | :----------: | -------------: | |味 | 美味しい | まあまあ | |手間 | 手間がかかる | 簡単 | |価格 | 道具代がかかる | コーヒー代のみ |
こんな書き方をしても、HTMLへ出力すると同じコードになります。
まとめ
スニペットが使えるとタグでも割と作成しやすくなると思いますが、マークダウン記法での最大の利点は、視覚的に分かりやすいことですね。
HTMLタグでの記述は、完成形を想像しながらの作業ですが、視覚的に記述できるマークダウン記法の場合はイメージしやすいです。
ベース部分をマークダウン記法で記述して、HTML変換後細かな修正をしていくという使い方もありだと思います。
SublimeText３を使い始めて、スニペット機能やマークダウン記法の素晴らしさを実感しています。
もっと早く出会いたかった♪
