Table With Borders In HTML And LaTeX Output From Markdown Source With Pandoc

This is a sample table in Markdown for Pandoc. Simple tables look like this: Right Left Center Default ------- ------ ---------- ------- 12 12

Solution 1:

The following CSS adds tables to your HTML output when using Pandoc:

table {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    border-spacing: 0;
    border-bottom: 2px solid black;
    border-top: 2px solid black;
}
table th {
    padding: 3px 10px;
    background-color: white;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid black;
}
table td {
    padding: 3px 10px;
    border-top: none;
    border-left: none;
    border-bottom: none;
    border-right: none;
}


/* Add border for the last row of the table.           */
/*      (Might be of use for table footnotes, later).  */
/* tr:last-child td { border-top: 2px solid black; }   */

This CSS is from Marked.app. I believe it's available to download on the support website for the app.

You can tell Pandoc to use a custom CSS file with the --css flag. Something like this should work:

pandoc -t html                      \
       --css=/path/to/custom.css    \
       -o /path/to/output/file.html \
        /path/to/markdown/file.md

Hope that helps.

Solution 2:

You can do it with Pandoc. But it takes a little bit of more effort.

You have to take advantage of the following facts:

1. Pandoc can recognize raw LaTeX snippets embedded in Markdown [1]. If the target output format is LaTeX or PDF, it will pass these snippets unchanged into the target document.

   So if you know how to write a good looking table in LaTeX, embed it with your Markdown.

   For HTML output, this LaTeX table code will be ignored however. That's not a problem, because...

2. Pandoc can recogniz raw HTML snippets embedded in Markdown [1]. If the target output format is HTML, it will pass these snippets unchanged into the target document.

   So if you know how to write a good looking table in HML, embed it with your Markdown.

   For LaTeX/PDF output, this HTML table code will be ignored however. That's not a problem, because...

3. Pandoc can recognize raw LaTeX snippets embedded in Markdown [1].... (aaahhh!, we had that already. See no. 1. above...   :)

---

Trick: Use pandoc interactively in the terminal window

Here is another trick.

If you do not know how to start with learning LaTeX, Pandoc can teach you some. Because you can use Pandoc interactively.

For LaTeX output:

It goes like this:

1. Type in the terminal: pandoc -t latex.
2. Hit [RETURN].
3. Nothing happens.
4. Start typing a Markdown snippet into the terminal (like you would type it into a text editor). Say, you type a table.
5. When your table is ready, hit [RETURN] one more time to be on a newline.
6. Then hit [CTRL]+[D].
7. Voila!, LaTeX code appears in the terminal window...

See here:

$ pandoc -t latex   [RETURN]

  Right     Left     Center     Default
-------     ------ ----------   -------
     12     12        12            12
    123     123       123          123
      1     1          1             1

Table:  Demonstration of simple table syntax.

^D

To be very honest with you: I didn't type the Markdown table. I cheated. I copied it from your question and pasted it into the terminal. The last [^D] you see is when I hit [CTRL]+[D].

This is what appeared in the terminal window then:

\begin{longtable}[c]{@{}rlcl@{}}
\caption{Demonstration of simple table syntax.}\tabularnewline
\toprule
Right & Left & Center & Default\tabularnewline
\midrule
\endfirsthead
\toprule
Right & Left & Center & Default\tabularnewline
\midrule
\endhead
12 & 12 & 12 & 12\tabularnewline
123 & 123 & 123 & 123\tabularnewline
1 & 1 & 1 & 1\tabularnewline
\bottomrule
\end{longtable}

This is the default LaTeX table code generated by LaTeX from the Markdown input.

Now you can google for some methods (if you are not a LaTeX expert yet) to pimp that code in order to make the table looking nicer. The heavy-lifting is already done. (And if you are a LaTeX expert: it still is nice to not need to do the heavy-lifting yourself, isn't it?)

For HTML output:

Of course you can do the very same to output the HTML code of a table as Pandoc would generate it. Look:

$ pandoc -t html   [RETURN]

  Right     Left     Center     Default
-------     ------ ----------   -------
     12     12        12            12
    123     123       123          123
      1     1          1             1

Table:  Demonstration of simple table syntax.

^D

<table>
<caption>Demonstration of simple table syntax.</caption>
<thead>
<tr class="header">
<th align="right">Right</th>
<th align="left">Left</th>
<th align="center">Center</th>
<th align="left">Default</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="right">12</td>
<td align="left">12</td>
<td align="center">12</td>
<td align="left">12</td>
</tr>
<tr class="even">
<td align="right">123</td>
<td align="left">123</td>
<td align="center">123</td>
<td align="left">123</td>
</tr>
<tr class="odd">
<td align="right">1</td>
<td align="left">1</td>
<td align="center">1</td>
<td align="left">1</td>
</tr>
</tbody>
</table>

Isn't that nice?

---

[1] _{You may need to tell Pandoc that you want to use some of its extensions when processing the Markdown input: pandoc --from=markdown+raw_html+raw_tex+..., just in case it doesn't work from its default settings...)}