HTML

Markdown.js で記述しているTableに色をつける

ブログをMarkdownで書いているのですが、Tableを記述した時にボーダーや色がつかないことに気づきました。
勝手につくものと思っていたのですが、CSSを追記する必要があったので、まとめておきます。

Markdownで書いた部分はclassがmarkedのdivタグの下になっているので、その下のテーブルに適応させるようにしています。
まずは、CSSを記述する場所ですが、「テーマ」を選択して「カスタマイズ」を選択します。

Blogger テーマデザイナーが表示されるので、「上級者向け」を選択してCSSを追加します。

以下追加します。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.marked table { border-collapse: collapse; }   .marked table, td, th { border: 1px solid black; padding: 5px; }   .marked table tr:nth-child(even) { background: #F9F9F9; }   .marked table tr:nth-child(odd) { background: #FFFFFF; }

こんな感じのテーブルになります。

タイトル	内容
東京都	日本の首都
長野県	山がいっぱいで楽しい
北海道	食べのものが美味しい
沖縄	とにかく楽しい

tdたぐにpaddingを指定すると、テーブルの中に余裕が生まれます。