Strugling with formatting. When I use the basic code, I got the result I like but it’s not displayed nice. I like to have 3 columns.
var MPT = this.MPT;
// Creating the div's for your data items
var top = document.createElement("div");
top.classList.add("list-row");
// Fajr from data
var mptFajr = document.createElement("div");
mptFajr.classList.add("small", "bright", "Fajr");
mptFajr.innerHTML = "Fajr : " + MPT.Fajr + " الفجر";
wrapper.appendChild(mptFajr);
// Sunrise from data
if (this.config.showSunrise != false) {
var mptSunrise = document.createElement("div");
mptSunrise.classList.add("small", "bright", "Sunrise");
mptSunrise.innerHTML = "Sunrise : " + MPT.Sunrise + " شروق الشمس";
wrapper.appendChild(mptSunrise);
}
// Dhuhr from data
var mptDhuhr = document.createElement("div");
mptDhuhr.classList.add("small", "bright", "Dhuhr");
mptDhuhr.innerHTML = "Duhr : " + MPT.Dhuhr + " الظهر";
wrapper.appendChild(mptDhuhr);
// Asr from data
var mptAsr = document.createElement("div");
mptAsr.classList.add("small", "bright", "Asr");
mptAsr.innerHTML = "Asr : " + MPT.Asr + " العصر";
wrapper.appendChild(mptAsr);
// Sunset from data
if (this.config.showSunset != false) {
var mptSunset = document.createElement("div");
mptSunset.classList.add("small", "bright", "Sunset");
mptSunset.innerHTML = "Sunset : " + MPT.Sunset + " غروب الشمس";
wrapper.appendChild(mptSunset);
}
// Maghrib from data
var mptMaghrib = document.createElement("div");
mptMaghrib.classList.add("small", "bright", "Maghrib");
mptMaghrib.innerHTML = "Maghrib : " + MPT.Maghrib + " المغرب";
wrapper.appendChild(mptMaghrib);
// Isha from data
var mptIsha = document.createElement("div");
mptIsha.classList.add("small", "bright", "Isha");
mptIsha.innerHTML = "Isha : " + MPT.Isha + " العشاء";
wrapper.appendChild(mptIsha);
// Midnight from data
if (this.config.showMidnight != false) {
var mptMidnight = document.createElement("div");
mptMidnight.classList.add("small", "bright", "Midnight");
mptMidnigh

Now I trying for several hours to figure out how to create table, columns, rows…
I’ve changed the code part to
var MPT = this.MPT;
var logs = document.createElement("table");
var callWrapper = document.createElement("tr");
callWrapper.classList.add("small");
// Fajr
var FajrTextCell = document.createElement("td");
FajrTextCell.className.add = "xsmall bright fajrtext";
FajrTextCell.innerHTML = "Fajr";
callWrapper.appendChild(FajrTextCell);
var FajrTimeCell = document.createElement("td");
FajrTimeCell.className = "xsmall bright fajrtime";
FajrTimeCell.innerHTML = MPT.Fajr;
callWrapper.appendChild(FajrTimeCell);
var FajrArabCell = document.createElement("td");
FajrArabCell.className = "xsmall bright fajrarab";
FajrArabCell.innerHTML = "الفجر";
callWrapper.appendChild(FajrArabCell);
logs.appendChild(callWrapper);
wrapper.appendChild(logs);
return wrapper;
The result for 1 item is nice

But when I repeat this for the other items, no rows are created and everything is on the same row.
var MPT = this.MPT;
//Table Test
var logs = document.createElement("table");
var callWrapper = document.createElement("tr");
callWrapper.classList.add("small");
// Fajr
var FajrTextCell = document.createElement("td");
FajrTextCell.className.add = "xsmall bright fajrtext";
FajrTextCell.innerHTML = "Fajr";
callWrapper.appendChild(FajrTextCell);
var FajrTimeCell = document.createElement("td");
FajrTimeCell.className = "xsmall bright fajrtime";
FajrTimeCell.innerHTML = MPT.Fajr;
callWrapper.appendChild(FajrTimeCell);
var FajrArabCell = document.createElement("td");
FajrArabCell.className = "xsmall bright fajrarab";
FajrArabCell.innerHTML = "الفجر";
callWrapper.appendChild(FajrArabCell);
// Sunrise
var SunriseTextCell = document.createElement("td");
SunriseTextCell.className.add = "xsmall bright sunrisetext";
SunriseTextCell.innerHTML = "Sunrise";
callWrapper.appendChild(FajrTextCell);
var SunriseTimeCell = document.createElement("td");
SunriseTimeCell.className = "xsmall bright fajrtime";
SunriseTimeCell.innerHTML = MPT.Sunrise;
callWrapper.appendChild(SunriseTimeCell);
var SunriseArabCell = document.createElement("td");
SunriseArabCell.className = "xsmall bright sunrisearab";
SunriseArabCell.innerHTML = "شروق الشمس";
callWrapper.appendChild(SunriseArabCell);
logs.appendChild(callWrapper);
wrapper.appendChild(logs);
return wrapper;

Any help to get me on the right track again?