{"id":4943,"date":"2020-01-31T18:19:07","date_gmt":"2020-01-31T17:19:07","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=4943"},"modified":"2020-02-02T09:33:30","modified_gmt":"2020-02-02T08:33:30","slug":"create-a-beautiful-html-table-with-python","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/create-a-beautiful-html-table-with-python\/","title":{"rendered":"Create A Beautiful Html Table with Python"},"content":{"rendered":"

I made a lot of script to find a nice way to automate the creation of nice html tables using Python. This is the last one. I think this is a nice script. The result is this:<\/p>\n

\"\"<\/a><\/p>\n

I think it’s nice. You can change the structure of the table changing this:<\/p>\n

conto = \"\"\"\r\n<tr>\r\n<td data-th=\"Movie Title\">{}<\/td>\r\n<td data-th=\"Genre\">{}<\/td>\r\n<td data-th=\"Year\">{}<\/td>\r\n<td data-th=\"Gross\">{}<\/td>\r\n<\/tr>\"\"\"*2<\/pre>\n
This is where the data go. The data, for example, can be these:<\/p>\n
replace = \"\"\"Banca x c\/c\r\nVersamento\r\n500\u20ac\r\n\r\nDenaro in cassa\r\nprelievo depositato in banca\r\n\r\n500 \u20ac\"\"\"<\/pre>\n
There are 2 rows (if you want more row, multiplicate for 3, 4 … the conto variable).<\/p>\n
You just have to write on each line the 4 data for the first line and another 4 data for line after those. If you want to leave a cell empty, leave the line empty.<\/p>\n
Here is the whole code. Most of it is css. The python code is at the end, just 10ish line of code.<\/p>\n
import os\r\n\r\nhtml = \"\"\"<style>\r\n@import \"https:\/\/fonts.googleapis.com\/css?family=Montserrat:300,400,700\";\r\n.rwd-table {\r\n  margin: 1em 0;\r\n  min-width: 300px;\r\n}\r\n.rwd-table tr {\r\n  border-top: 1px solid #ddd;\r\n  border-bottom: 1px solid #ddd;\r\n}\r\n.rwd-table th {\r\n  display: none;\r\n}\r\n.rwd-table td {\r\n  display: block;\r\n}\r\n.rwd-table td:first-child {\r\n  padding-top: .5em;\r\n}\r\n.rwd-table td:last-child {\r\n  padding-bottom: .5em;\r\n}\r\n.rwd-table td:before {\r\n  content: attr(data-th) \": \";\r\n  font-weight: bold;\r\n  width: 6.5em;\r\n  display: inline-block;\r\n}\r\n@media (min-width: 480px) {\r\n  .rwd-table td:before {\r\n    display: none;\r\n  }\r\n}\r\n.rwd-table th, .rwd-table td {\r\n  text-align: left;\r\n}\r\n@media (min-width: 480px) {\r\n  .rwd-table th, .rwd-table td {\r\n    display: table-cell;\r\n    padding: .25em .5em;\r\n  }\r\n  .rwd-table th:first-child, .rwd-table td:first-child {\r\n    padding-left: 0;\r\n  }\r\n  .rwd-table th:last-child, .rwd-table td:last-child {\r\n    padding-right: 0;\r\n  }\r\n}\r\n\r\n\r\nh1 {\r\n  font-weight: normal;\r\n  letter-spacing: -1px;\r\n  color: #34495E;\r\n}\r\n\r\n.rwd-table {\r\n  background: #34495E;\r\n  color: #fff;\r\n  border-radius: .4em;\r\n  overflow: hidden;\r\n}\r\n.rwd-table tr {\r\n  border-color: #46637f;\r\n}\r\n.rwd-table th, .rwd-table td {\r\n  margin: .5em 1em;\r\n}\r\n@media (min-width: 480px) {\r\n  .rwd-table th, .rwd-table td {\r\n    padding: 1em !important;\r\n  }\r\n}\r\n.rwd-table th, .rwd-table td:before {\r\n  color: #dd5;\r\n}\r\n<\/style>\r\n<script>\r\n  window.console = window.console || function(t) {};\r\n<\/script>\r\n<script>\r\n  if (document.location.search.match(\/type=embed\/gi)) {\r\n    window.parent.postMessage(\"resize\", \"*\");\r\n  }\r\n<\/script>\r\n\r\n\r\n<h1>Libro giornale<\/h1>\r\n<table class=\"rwd-table\">\r\n<tr>\r\n\r\n  <table class=\"rwd-table\">\r\n<tr>\r\n<th>Conto<\/th>\r\n<th>Descrizione<\/th>\r\n<th>Dare<\/th>\r\n<th>Avere<\/th>\r\n<\/tr>\r\n\r\n\r\n<---conti--->\r\n\r\n\r\n<\/table>\"\"\"\r\n\r\n\r\nconto = \"\"\"\r\n<tr>\r\n<td data-th=\"Movie Title\">{}<\/td>\r\n<td data-th=\"Genre\">{}<\/td>\r\n<td data-th=\"Year\">{}<\/td>\r\n<td data-th=\"Gross\">{}<\/td>\r\n<\/tr>\"\"\"*2\r\n\r\nreplace = \"\"\"Banca x c\/c\r\nVersamento\r\n500\u20ac\r\n\r\nDenaro in cassa\r\nprelievo depositato in banca\r\n\r\n500 \u20ac\"\"\"\r\n\r\nreplace = replace.split(\"\\n\")\r\nprint(replace)\r\nconto = conto.format(*replace)\r\nhtml = html.replace(\"<---conti--->\", conto)\r\n\r\nwith open(myfile := \"table.html\", \"w\") as file:\r\n    file.write(html)\r\n\r\nos.startfile(myfile)\r\n<\/pre>\n
A version for “csv” type of data, comma separated value<\/h2>\n
This version let you input the data separated by comma. Perhaps it’s more handy<\/p>\n
import os\r\n\r\nhtml = \"\"\"<style>\r\n@import \"https:\/\/fonts.googleapis.com\/css?family=Montserrat:300,400,700\";\r\n.rwd-table {\r\n  margin: 1em 0;\r\n  min-width: 300px;\r\n}\r\n.rwd-table tr {\r\n  border-top: 1px solid #ddd;\r\n  border-bottom: 1px solid #ddd;\r\n}\r\n.rwd-table th {\r\n  display: none;\r\n}\r\n.rwd-table td {\r\n  display: block;\r\n}\r\n.rwd-table td:first-child {\r\n  padding-top: .5em;\r\n}\r\n.rwd-table td:last-child {\r\n  padding-bottom: .5em;\r\n}\r\n.rwd-table td:before {\r\n  content: attr(data-th) \": \";\r\n  font-weight: bold;\r\n  width: 6.5em;\r\n  display: inline-block;\r\n}\r\n@media (min-width: 480px) {\r\n  .rwd-table td:before {\r\n    display: none;\r\n  }\r\n}\r\n.rwd-table th, .rwd-table td {\r\n  text-align: left;\r\n}\r\n@media (min-width: 480px) {\r\n  .rwd-table th, .rwd-table td {\r\n    display: table-cell;\r\n    padding: .25em .5em;\r\n  }\r\n  .rwd-table th:first-child, .rwd-table td:first-child {\r\n    padding-left: 0;\r\n  }\r\n  .rwd-table th:last-child, .rwd-table td:last-child {\r\n    padding-right: 0;\r\n  }\r\n}\r\n\r\n\r\nh1 {\r\n  font-weight: normal;\r\n  letter-spacing: -1px;\r\n  color: #34495E;\r\n}\r\n\r\n.rwd-table {\r\n  background: #34495E;\r\n  color: #fff;\r\n  border-radius: .4em;\r\n  overflow: hidden;\r\n}\r\n.rwd-table tr {\r\n  border-color: #46637f;\r\n}\r\n.rwd-table th, .rwd-table td {\r\n  margin: .5em 1em;\r\n}\r\n@media (min-width: 480px) {\r\n  .rwd-table th, .rwd-table td {\r\n    padding: 1em !important;\r\n  }\r\n}\r\n.rwd-table th, .rwd-table td:before {\r\n  color: #dd5;\r\n}\r\n<\/style>\r\n<script>\r\n  window.console = window.console || function(t) {};\r\n<\/script>\r\n<script>\r\n  if (document.location.search.match(\/type=embed\/gi)) {\r\n    window.parent.postMessage(\"resize\", \"*\");\r\n  }\r\n<\/script>\r\n\r\n\r\n<h1>Libro giornale<\/h1>\r\n<table class=\"rwd-table\">\r\n<tr>\r\n\r\n  <table class=\"rwd-table\">\r\n<tr>\r\n<th>Conto<\/th>\r\n<th>Descrizione<\/th>\r\n<th>Dare<\/th>\r\n<th>Avere<\/th>\r\n<\/tr>\r\n\r\n\r\n<---conti--->\r\n\r\n\r\n<\/table>\"\"\"\r\n\r\n# ================================== Python ===\r\n\r\nreplace = \"\"\"\r\nBanca x c\/c, Versamento,500 \u20ac,,\r\nDenaro in cassa, prelievo depositato in banca,,500 \u20ac,\r\nMerci c\/acquisto, ricevuta ft. n. 3, 100 \u20ac,,\r\n------,-----,-----,----,\r\nIVA a Credito, iva su ft. nr. 3, 22 \u20ac,,\r\nDebiti v\/fornitori, ft. 3,,122 \u20ac\r\n\"\"\"\r\n\r\nreplace = replace.split(\",\")\r\nlines = len(replace) \/\/ 4\r\n\r\nconto = \"\"\"\r\n<tr>\r\n<td data-th=\"Movie Title\">{}<\/td>\r\n<td data-th=\"Genre\">{}<\/td>\r\n<td data-th=\"Year\">{}<\/td>\r\n<td data-th=\"Gross\">{}<\/td>\r\n<\/tr>\"\"\"*lines\r\n\r\n\r\nprint(replace)\r\nconto = conto.format(*replace)\r\nhtml = html.replace(\"<---conti--->\", conto)\r\n\r\nwith open(myfile := \"table.html\", \"w\") as file:\r\n    file.write(html)\r\n\r\nos.startfile(myfile)\r\n<\/pre>\n
Video about this code to make html table with Python<\/h2>\n