I’m trying to modify someones weather app to make it span across the bottom of the right side of the page. The initial module looks like it was just copy pasted from the default weather forecast module. It is the MMM-weatherforecast by jharttech. I’ve reach out to him with no response, so I’m asking here. What I want is basically 3 rows by 2 cells with the first row being the day spanning 2 cells, second being a weather icon spanning 2 cells, and the third row being the hi and low temperature. I’ve got almost everything figured out except getting the icon centered between the two cells. If I take out the code he added and add test text the text is centered between two cells. I cannot figure this out. I’ve tried colspan, changing them between tr, td, and span. Nothing I am doing seems to be working right.

  var table = document.createElement("table");
		table.className = this.config.tableClass;

		switch (this.config.layout){
		case "horizontal":
			for (var f in this.forecast) {
				var forecast = this.forecast[f];

				var row = document.createElement("td");
				if (this.config.colored) {
					row.className = "colored";
				}
				table.appendChild(row);

				var dayCell = document.createElement("td");
				dayCell.colSpan = 2;
				dayCell.className = "day";
				dayCell.innerHTML = forecast.day;
				row.appendChild(dayCell);
				
				var iconCell = document.createElement("tr");
				iconCell.colSpan = 2;
				iconCell.style.textAlign = "center";
				iconCell.className = "bright-weather-icon";
				row.appendChild(iconCell);
				

				var icon = document.createElement("span");
				icon.colSpan = 2;
				icon.style.textAlign = "center";
				icon.className = "wi-weathericon " + forecast.icon;
				iconCell.appendChild(icon);
								
				var degreeLabel = "°";
				if(this.config.scale) {
					switch(this.config.units) {
					case "metric":
						degreeLabel += " C";
						break;
					case "imperial":
						degreeLabel += " F";
						break;
					case "default":
						degreeLabel = "K";
						break;
					}
				}

				if (this.config.decimalSymbol === "" || this.config.decimalSymbol === " ") {
					this.config.decimalSymbol = ".";
				}

				var maxTempCell = document.createElement("td");
				maxTempCell.innerHTML = "Hi:" + forecast.maxTemp.replace(".", this.config.decimalSymbol) + degreeLabel;
				maxTempCell.className = "max-temp";
				row.appendChild(maxTempCell);

				var minTempCell = document.createElement("td");
				minTempCell.innerHTML = "Lo:" + forecast.minTemp.replace(".", this.config.decimalSymbol) + degreeLabel;
				minTempCell.className = "min-temp";
				row.appendChild(minTempCell);

				if (this.config.showRainAmount) {
					var rainCell = document.createElement("td");
					if (isNaN(forecast.rain)) {
						rainCell.innerHTML = "";
					} else {
						if(config.units !== "imperial") {
							rainCell.innerHTML = parseFloat(forecast.rain).toFixed(1) + " mm";
						} else {
							rainCell.innerHTML = (parseFloat(forecast.rain) / 25.4).toFixed(2) + " in";
						}
					}
					rainCell.className = "align-right bright rain";
					row.appendChild(rainCell);
				}