Octopress com tabelas personalizadas
Trabalhar com tabelas em markdown não é complicado, no octopress funciona da mesma forma que em qualquer editor markdown, porém, por alguma razão a configuração definida na folha de estilos (CSS) para tabelas no octopress não formata as bordas, tabela sem borda nem parece tabela.
Para resolver o problema, novamente pesquisei e achei algumas referências, veja abaixo como resolvi em meu ambiente.
Ajustando o Octopress
Primeiro passo, crie um arquivo chamado data-table.css em source/stylesheets com o conteúdo abaixo:
{% codeblock lang:css %}
-
- table { border-style:solid; border-width:1px; border-color:#e7e3e7; }
-
- table th, * + table td { border-style:dashed; border-width:1px; border-color:#e7e3e7; padding-left: 3px; padding-right: 3px; }
-
- table th { border-style:solid; font-weight:bold; }
-
- 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; }
{% endcodeblock %}
Segundo passo, adicione a linha abaixo ao arquivo source/_includes/head.html
{% codeblock lang:html %}
{% endcodeblock %}
A partir deste momento a tabelas que você criar via markdown
Nome | Twitter
----------------------- | --------------
Guto Carvalho | @gutocarvalho
Jose Augusto Carvalho | @joseaugustocc
Vão ter bordas, o resultado final é este abaixo
| Nome | |
|---|---|
| Guto Carvalho | @gutocarvalho |
| Jose Augusto Carvalho | @joseaugustocc |
Viram como foi fácil, e via CSS você pode personalizar ainda mais o estilo de suas tabelas.
No site smashingmagazine tem vários exemplos de CSS para tabelas.