I am working on some ESP8266 project, and this project has multiple web pages with some html-tables.
Nothing very fancy, typical table is about 6x7 cells, but I am bored and tired to handle multiple String operators with endless “” and “” 
Are there any lightweight class accepting 2d array of strings, allowing to set some properties such as font size, colors, alignments, border styles, so on, and returning full html-string with desired table, from “” to “
SergeS:
I am working on some ESP8266 project, and this project has multiple web pages with some html-tables.
Nothing very fancy, typical table is about 6x7 cells, but I am bored and tired to handle multiple String operators with endless “” and “”Are there any lightweight class accepting 2d array of strings, allowing to set some properties such as font size, colors, alignments, border styles, so on, and returning full html-string with desired table, from “” to “
”?
Consider doing what I did with my irrigation controller, that also has a web page interface.
Create your html files, and tables, with Microsoft Expression Web.
This is old software and now provided free by Microsoft.
But it is still quite a good web page editor and it is relatively easy to create tables with it.
Then store all your web pages on an SD card in a data logger shield.
To send your html file you need only open the file through the SD library, loop through the html file a line at a time and serial print each line to the the web client.
Far more efficient way of handling web pages than storing them in flash memory/code.
boylesg:
Consider doing what I did with my irrigation controller, that also has a web page interface.Create your html files, and tables, with Microsoft Expression Web.
This is old software and now provided free by Microsoft.
But it is still quite a good web page editor and it is relatively easy to create tables with it.
Then store all your web pages on an SD card in a data logger shield.
To send your html file you need only open the file through the SD library, loop through the html file a line at a time and serial print each line to the the web client.
Far more efficient way of handling web pages than storing them in flash memory/code.
Thank you for advice, will consider this idea. But in my case I do not have SD card and my tables contain data which need to be changed all the time, so use your approach may not be so easy.
Just for references, sample of table is here: 
SergeS:
But in my case I do not have SD card
There is absolutely no need to use an SD card. Just use the SPIFFS, it's much faster and easier than an SD card, and the ESP8266 has plenty.
The easiest way is to use client-side JavaScript to fill the table. The ESP only serves static files: HTML with an empty table, CSS with the style of the table, and JS that downloads the static CSV data file, and builds the dynamic HTML table.
The computer that renders the web page is much more powerful than the ESP, and JS was designed for manipulating HTML.
Here's a similar example:
https://tttapa.github.io/ESP8266/Chap16%20-%20Data%20Logging.html
You just have to change the JS program to display the data in a table instead of a graph.
Pieter
PieterP:
There is absolutely no need to use an SD card. Just use the SPIFFS, it's much faster and easier than an SD card, and the ESP8266 has plenty.The easiest way is to use client-side JavaScript to fill the table. The ESP only serves static files: HTML with an empty table, CSS with the style of the table, and JS that downloads the static CSV data file, and builds the dynamic HTML table.
The computer that renders the web page is much more powerful than the ESP, and JS was designed for manipulating HTML.Here's a similar example:
A Beginner's Guide to the ESP8266
You just have to change the JS program to display the data in a table instead of a graph.Pieter
Thank you! I did not know about SPIFFS on ESP8266 as far as I have never fill the html table using JS. Have to learn these, now have something to do on rainy weekends
But still looking for class to generate html table string, it is easy to add to my project.
PieterP:
There is absolutely no need to use an SD card. Just use the SPIFFS, it’s much faster and easier than an SD card, and the ESP8266 has plenty.The easiest way is to use client-side JavaScript to fill the table. The ESP only serves static files: HTML with an empty table, CSS with the style of the table, and JS that downloads the static CSV data file, and builds the dynamic HTML table.
The computer that renders the web page is much more powerful than the ESP, and JS was designed for manipulating HTML.Here’s a similar example:
A Beginner's Guide to the ESP8266
You just have to change the JS program to display the data in a table instead of a graph.Pieter
The idea to fillout the html-table from JavaScript is working well, thank you.
Just for records, here are sample of JavaScript I have to use to fillout the table:
<script>
let headerItems = ["Header1", "Header2", "Header3"];
let dataItems = [
[ "Data1", 1111, "ABC1" ],
[ "Data2", 2222, "ABC2" ],
[ "Data3", 3333, "ABC3" ],
[ "Data4", 4444, "ABC4" ],
[ "Data5", 5555, "ABC5" ]
];
function generateTableHead(table, data)
{
let thead = table.createTHead();
let row = thead.insertRow();
for (let element of data)
{
let th = document.createElement("th");
let text = document.createTextNode(element);
th.appendChild(text);
row.appendChild(th);
}
}
function generateTableData(table, data)
{
for (let rowelement of data)
{
let row = table.insertRow();
for (let element in rowelement)
{
let cell = row.insertCell();
let text = document.createTextNode(rowelement[element]);
cell.appendChild(text);
}
}
}
let table = document.querySelector("table");
//order of those two functions may be reversed or even call multiple times
generateTableData(table, dataItems);
generateTableHead(table, headerItems);
</script>
html code must to have this element:
<table border='1'>
<!-- here goes our data! -->
</table>
If you have to do something repetitive in coding, Loops !
to add values from a 2d (or 3d) array into a table they are very practical, though tend to lack a bit of overview.
Looping is not always good idea. Mixing data and its representation is also not good idea, I am trying to avoid something like this:
message += "<table border='1'>\n";
message += "<tr bgcolor='"; message += WebPageTableHeaderColor; message += "'>";
//header
message += "<th>Sensor</th>";
message += "<th>SensorID</th>";
message += "<th>CNT</th>";
message += "<th>LAST</th>";
message += "<th>AVE</th>";
message += "<th>MIN</th>";
message += "<th>MAX</th>";
message += "<th>STDEV</th>";
message += "</tr>\n";
for (byte i=0; i<SensorsNum; i++)
{
message += "<tr>";
//
message += "<td>"; message += names[i]; message += "</td>";
message += "<td>"; message += SID_arr[i]; message += "</td>";
message += "<td>"; message += stat[i].count(); message += "</td>";
message += "<td>"; message += stat[i].last(); message += "</td>";
message += "<td>"; message += stat[i].average(); message += "</td>";
message += "<td>"; message += stat[i].minimum(); message += "</td>";
message += "<td>"; message += stat[i].maximum(); message += "</td>";
message += "<td>"; message += stat[i].pop_stdev(); message += "</td>";
//
message += "</tr>\n";
}
message += "</table>\n";
Seems like to have constant string with data representation (having no data at all) and separately variable data-only string (with no html-tags) is much better idea.