How to display better Markdown tables

In this post I want to share my experience with Markdown tables and pandas data frames. I wanted to format pandas data frames as Markdown tables unfortunately the original outlook is unreadable and ugly. You can compare the difference in the image below:

beauty_markdown_table

Let say that we have the next pandas dataframe and table. And you wanted to show it as Markdown table with better format including borders:

import pandas as pd
df = pd.DataFrame({'Date': ['08/09/2018', '10/09/2018', '09/09/2018', '04/09/2018', '08/09/2018', '10/09/2018',
                            '09/09/2018', '04/09/2018'],
                   'Company': ['Samsung', 'Samsung', 'Samsung', 'Samsung', 'Sony', 'Sony', 'Sony', 'Sony'],
                   'Promotions': [54, 56, 54, 4, 3, 34, 32, 15],
                   'Sells': [23, 34, 54, 6, 96, 45, 3, 12]})

print(df)

raw data frame output:

   Company        Date  Promotions  Sells  Total
0  Samsung  08/09/2018          54     23     57
1  Samsung  10/09/2018          56     34     90
2  Samsung  09/09/2018          54     54     86
3  Samsung  04/09/2018           4      6     19
4     Sony  08/09/2018           3     96     57
5     Sony  10/09/2018          34     45     90
6     Sony  09/09/2018          32      3     86
7     Sony  04/09/2018          15     12     19

table formatted after excel and using site conversion:

Company Date Promotions Sells Total
0 Samsung 8/9/2018 54 23 57
1 Samsung 10/9/2018 56 34 90
2 Samsung 9/9/2018 54 54 86
3 Samsung 4/9/2018 4 6 19
4 Sony 8/9/2018 3 96 57
5 Sony 10/9/2018 34 45 90
6 Sony 9/9/2018 32 3 86
7 Sony 4/9/2018 15 12 19

You can do this by:

<style>
table{
    border-collapse: collapse;
    border-spacing: 0;
    border:2px solid #000000;
}

th{
    border:2px solid #000000;
}

td{
    border:1px solid #000000;
}
</style>

For example if you use Ghost Blog you can do(for single post):

  • Open the post for edit
  • Settings of the post
  • Code injection
  • Post header
    • paste the code above

And now your Markdown tables/ pandas dataframes will be much more readable, user friendly and easy for the reader.

Related Article