Create A Beautiful Html Table with Python

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:

I think it’s nice. You can change the structure of the table changing this:

conto = """
<tr>
<td data-th="Movie Title">{}</td>
<td data-th="Genre">{}</td>
<td data-th="Year">{}</td>
<td data-th="Gross">{}</td>
</tr>"""*2

This is where the data go. The data, for example, can be these:

replace = """Banca x c/c
Versamento
500€

Denaro in cassa
prelievo depositato in banca

500 €"""

There are 2 rows (if you want more row, multiplicate for 3, 4 … the conto variable).

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.

Here is the whole code. Most of it is css. The python code is at the end, just 10ish line of code.

import os

html = """<style>
@import "https://fonts.googleapis.com/css?family=Montserrat:300,400,700";
.rwd-table {
  margin: 1em 0;
  min-width: 300px;
}
.rwd-table tr {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.rwd-table th {
  display: none;
}
.rwd-table td {
  display: block;
}
.rwd-table td:first-child {
  padding-top: .5em;
}
.rwd-table td:last-child {
  padding-bottom: .5em;
}
.rwd-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
}
@media (min-width: 480px) {
  .rwd-table td:before {
    display: none;
  }
}
.rwd-table th, .rwd-table td {
  text-align: left;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child, .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child, .rwd-table td:last-child {
    padding-right: 0;
  }
}


h1 {
  font-weight: normal;
  letter-spacing: -1px;
  color: #34495E;
}

.rwd-table {
  background: #34495E;
  color: #fff;
  border-radius: .4em;
  overflow: hidden;
}
.rwd-table tr {
  border-color: #46637f;
}
.rwd-table th, .rwd-table td {
  margin: .5em 1em;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    padding: 1em !important;
  }
}
.rwd-table th, .rwd-table td:before {
  color: #dd5;
}
</style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


<h1>Libro giornale</h1>
<table class="rwd-table">
<tr>

  <table class="rwd-table">
<tr>
<th>Conto</th>
<th>Descrizione</th>
<th>Dare</th>
<th>Avere</th>
</tr>


<---conti--->


</table>"""


conto = """
<tr>
<td data-th="Movie Title">{}</td>
<td data-th="Genre">{}</td>
<td data-th="Year">{}</td>
<td data-th="Gross">{}</td>
</tr>"""*2

replace = """Banca x c/c
Versamento
500€

Denaro in cassa
prelievo depositato in banca

500 €"""

replace = replace.split("\n")
print(replace)
conto = conto.format(*replace)
html = html.replace("<---conti--->", conto)

with open(myfile := "table.html", "w") as file:
    file.write(html)

os.startfile(myfile)

A version for “csv” type of data, comma separated value

This version let you input the data separated by comma. Perhaps it’s more handy

import os

html = """<style>
@import "https://fonts.googleapis.com/css?family=Montserrat:300,400,700";
.rwd-table {
  margin: 1em 0;
  min-width: 300px;
}
.rwd-table tr {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.rwd-table th {
  display: none;
}
.rwd-table td {
  display: block;
}
.rwd-table td:first-child {
  padding-top: .5em;
}
.rwd-table td:last-child {
  padding-bottom: .5em;
}
.rwd-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
}
@media (min-width: 480px) {
  .rwd-table td:before {
    display: none;
  }
}
.rwd-table th, .rwd-table td {
  text-align: left;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child, .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child, .rwd-table td:last-child {
    padding-right: 0;
  }
}


h1 {
  font-weight: normal;
  letter-spacing: -1px;
  color: #34495E;
}

.rwd-table {
  background: #34495E;
  color: #fff;
  border-radius: .4em;
  overflow: hidden;
}
.rwd-table tr {
  border-color: #46637f;
}
.rwd-table th, .rwd-table td {
  margin: .5em 1em;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    padding: 1em !important;
  }
}
.rwd-table th, .rwd-table td:before {
  color: #dd5;
}
</style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


<h1>Libro giornale</h1>
<table class="rwd-table">
<tr>

  <table class="rwd-table">
<tr>
<th>Conto</th>
<th>Descrizione</th>
<th>Dare</th>
<th>Avere</th>
</tr>


<---conti--->


</table>"""

# ================================== Python ===

replace = """
Banca x c/c, Versamento,500 €,,
Denaro in cassa, prelievo depositato in banca,,500 €,
Merci c/acquisto, ricevuta ft. n. 3, 100 €,,
------,-----,-----,----,
IVA a Credito, iva su ft. nr. 3, 22 €,,
Debiti v/fornitori, ft. 3,,122 €
"""

replace = replace.split(",")
lines = len(replace) // 4

conto = """
<tr>
<td data-th="Movie Title">{}</td>
<td data-th="Genre">{}</td>
<td data-th="Year">{}</td>
<td data-th="Gross">{}</td>
</tr>"""*lines


print(replace)
conto = conto.format(*replace)
html = html.replace("<---conti--->", conto)

with open(myfile := "table.html", "w") as file:
    file.write(html)

os.startfile(myfile)