酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

Octopressでテーブルをmarkdownで編集できるようにする

Where?

Octopressにテーブル(table)をマークダウン(markdown)で編集できるようにする方法があったので書いておきます。


data-table.cssの追加

source/stylesheets/data-table.cssを追加。

data-table.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
* + table {
    border-style:solid;
    border-width:1px;
    border-color:#e7e3e7;
    margin: 10px 0 30px 0;
}

* + table th, * + table td {
    border-style:dashed;
    border-width:1px;
    border-color:#e7e3e7;
}

* + table th {
    border-style:solid;
    font-weight:bold;
    background: url("/images/noise.png?1330434582") repeat scroll left top #F7F3F7;
    padding: 2px 9px;
}

* + table td {
    padding: 2px 9px;
}

* + table th[align="left"], * + table td[align="left"] {
    text-align:left;
}

* + table th[align="right"], * + table td[align="right"] {
    text-align:right;
}

* + table th[align="center"], * + table td[align="center"] {
    text-align:center;
}

tr:nth-child(even){
    background: url("/images/noise.png?1330434582") repeat scroll left top #F7F3F7;
}

htmlのheaderにcssのリンクを追加

source/_includes/head.htmlに以下のコードを追加。

head.html
1
<link href="/stylesheets/data-table.css" rel="stylesheet" type="text/css" />

記事のマークダウンファイルにテーブルタグを書く

以下のようなテーブルタグをマークダウンに追加します。

| Column1(left) | Column2(center) | Column2(right) |
| :------------ | :-------------: | -------------: |
| foo           | foo             | foo

すると次のように自動でテーブルに変換してくれます。

Column1(left) Column2(center) Column2(right)
foo foo foo

Special Thanks

変更来歴

05/07 17:30 cssの記述名のミスを修正

おすすめの書籍