Octopress has been very cool for the 2 weeks since I began using.

My first hiccup came when I tried using table in this post. Firstly, I have to figure out how to create table in Octopress. Yet after figuring out, the table doesn’t get displayed! It’s just not working.

Usage

The first problem is with understanding how to create table in Octopress. They didn’t really document that, because they expect you to know markdown inline HTML can be used. That means writing:

1
2
3
4
5
6
7
8
9
10

<table>
    <tr>
        <td>Column1</td>
        <td>Column2</td>
    </tr>
    <tr>
        <td>foo</td>
        <td>foo</td>
    </tr>
</table>    

However, that’s not really nice, and defeats the point of not writing in HTML.

Fortunately, you can do the same using extended markdown syntax like this:

1
2
3

| Column1     | Column2      |
| ----------- | ------------ |
| foo         | foo

But that still does not work. You will not see the table borders..

I would say that’s a bug with Octopress.

Table Stylesheet

As I inspect the generated HTML, the table tags are present, and correct.

They are not showing because of the css stylesheet. table, th and td has border-width of ZERO! This post in chinese provides a solution. Translated, it means:

Step 1. Add data-table.css

Add data-table.css to source/stylesheets/.

Step 2. Add link header

In source/_includes/head.html insert this:

1

<link href="/stylesheets/data-table.css" media="screen, projection" rel="stylesheet" type="text/css" />

And now the table appears!

PS: I am puzzled why Octopress does not ship with a default table stylesheet.