How to Show Complete Jupyter Notebook Table in Jekyll

Jupyter notebook and Jekyll are both great tools that I’m currently using. I’ve done a lot work with Jupyter notebook and lately realized Jekyll is great to share all those works referring to this article.

By following the tutorial, it works almost perfectly except the tabular. Tabular output in Jupyter is converted to an HTML table when downloaded as markdown, however Jekyll uses Kramdown as the markdown processor which is slightly different from the markdown GitHub Flavored Markdown(GFM). The table displayed perfectly on github repository and lost table header on the github pages. The html sript of the table is like:

<table>
<thead><tr><th scope=col>brand</th><th scope=col>mileage</th><th scope=col>num_accidents</th><th scope=col>num_passengers</th><th scope=col>speed_car</th><th scope=col>speed_air</th><th scope=col>height</th><th scope=col>width</th><th scope=col>ABS</th></tr></thead>
<tbody>
	<tr><td>Ford       </td><td>36696.57   </td><td>2          </td><td> 6         </td><td>59.26462   </td><td>-3.28547256</td><td>7.938580   </td><td>6.069673   </td><td> TRUE      </td></tr>
	<tr><td>Toyota     </td><td>20618.62   </td><td>2          </td><td>14         </td><td>38.21588   </td><td>-2.79019074</td><td>5.997753   </td><td>6.170255   </td><td> TRUE      </td></tr>
	<tr><td>Ford       </td><td>21003.26   </td><td>2          </td><td> 8         </td><td>39.18807   </td><td>-0.26558119</td><td>7.857335   </td><td>6.777170   </td><td>FALSE      </td></tr>
	<tr><td>GM         </td><td>      NA   </td><td>0          </td><td> 5         </td><td>36.38138   </td><td>-1.35033786</td><td>5.691600   </td><td>5.848215   </td><td> TRUE      </td></tr>
	<tr><td>Ford       </td><td>27488.80   </td><td>3          </td><td> 6         </td><td>49.22647   </td><td>-0.06738388</td><td>6.050838   </td><td>6.389353   </td><td>FALSE      </td></tr>
	<tr><td>Ford       </td><td>      NA   </td><td>0          </td><td>10         </td><td>60.68898   </td><td>-0.92135848</td><td>4.435193   </td><td>5.711845   </td><td>FALSE      </td></tr>
</tbody>
</table>

However the github pages show the table like:

<th scope=col>brand</th><th scope=col>mileage</th><th scope=col>num_accidents</th><th scope=col>num_passengers</th><th scope=col>speed_car</th><th scope=col>speed_air</th><th scope=col>height</th><th scope=col>width</th><th scope=col>ABS</th>

Ford	36696.57	2	6	59.26462	-3.28547256	7.938580	6.069673	TRUE
Toyota	20618.62	2	14	38.21588	-2.79019074	5.997753	6.170255	TRUE
Ford	21003.26	2	8	39.18807	-0.26558119	7.857335	6.777170	FALSE
GM	NA	0	5	36.38138	-1.35033786	5.691600	5.848215	TRUE
Ford	27488.80	3	6	49.22647	-0.06738388	6.050838	6.389353	FALSE
Ford	NA	0	10	60.68898	-0.92135848	4.435193	5.711845	FALSE

It seems like the Kramdown isn’t able to recognize <th scope=col>. I googled a lot but couldn’t find a way out. But I found that there is no quotation marks after the equal sign so I just add quotation marks like this <th scope="col"> to see if it works and BOOM!

brand	mileage	num_accidents	num_passengers	speed_car	speed_air	height	width	ABS
Ford	36696.57	2	6	59.26462	-3.28547256	7.938580	6.069673	TRUE
Toyota	20618.62	2	14	38.21588	-2.79019074	5.997753	6.170255	TRUE
Ford	21003.26	2	8	39.18807	-0.26558119	7.857335	6.777170	FALSE
GM	NA	0	5	36.38138	-1.35033786	5.691600	5.848215	TRUE
Ford	27488.80	3	6	49.22647	-0.06738388	6.050838	6.389353	FALSE
Ford	NA	0	10	60.68898	-0.92135848	4.435193	5.711845	FALSE

Hope this blog would help!