Generate Code for HTML Tables

No outside food or beverage.

BrettBits > Java and Javascript Programs > Generate Code for HTML Tables

To use this Javascript for your own, copy the contents of the textbox below, and paste them into a text editor. Then, save the contents as a .htm or .html file. The JavaScript is now yours! Please ensure you give me proper credit if you repost it somewhere else.

Javascript Source Code

function createTableCode(theForm) {
	var numRows = theForm.numRows.value;
	var numColumns = theForm.numColumns.value;
	var borderSize = theForm.borderSize.value;
	var cellpaddingSize = theForm.cellpaddingSize.value;
	var cellspacingSize = theForm.cellspacingSize.value;
	var tableWidth = theForm.tableWidth.value;
	var backgroundColor = theForm.backgroundColor.value;

result = "<table width="+ tableWidth +" border="+borderSize+" cellpadding="+cellpaddingSize+" cellspacing="+cellspacingSize+" bgcolor=#"+ backgroundColor +">\n";

for(i = 1; i <= numRows; i++) {
		result += "\t<tr>\n"
		for(j = 1; j <= numColumns; j++) {
			result += "\t\t<td>Row " + i + ", Column " + j + "</td>\n";
		}
		result += "\t</tr>\n"
	}
	result += "</table>";
	return result;
}

function printTableCode(theForm) {
	errorList = generateErrorList(theForm);
	
	if(errorList != "") {
		alert(errorList);
		return false;
	}

theForm.tableCodeTextarea.value = createTableCode(theForm);
}

function generateErrorList(theForm) {
	errorList = "";

errorList += generateError("Number of Rows", theForm.numRows.value, true, true);
	errorList += generateError("Number of Columns", theForm.numColumns.value, true, true);
	errorList += generateError("Border Size", theForm.borderSize.value, true, true);
	errorList += generateError("Cell padding", theForm.cellpaddingSize.value, true, true);
	errorList += generateError("Cell spacing", theForm.cellspacingSize.value, true, true);
	errorList += generateError("Table Width", theForm.tableWidth.value, true, true);
	errorList += generateError("Table Background Color", theForm.backgroundColor.value, true, false);

if(errorList != "")
		errorList = "The following errors have occurred:\n" + errorList;

return errorList;
	
}
function generateError(nameOfValue, inputtedValue, cannotBeBlank, mustBeNumber) {
	result = "";
	if(cannotBeBlank && trimString(inputtedValue) == "")
		result += '-"' + nameOfValue + '"' + " cannot be blank.\n";
	if(mustBeNumber && isNaN(inputtedValue))
		result += '-"' + nameOfValue + '"' + " must be a number.\n";

return result;
	
}
function trimString(str) {
	return str.replace(/^\s*/, "").replace(/\s*$/, "");
}
// -->
</script>

<center>
<form name="tableCreateForm" onsubmit="printTableCode(this); return false;" action="">
Number of Rows: <input type="text" name="numRows" value="4" /><br />
Number of Columns: <input type="text" name="numColumns" value="5" /><br />
Table Width: <input type="text" name="tableWidth" value="600" /><br />
Table Background Color (in hexadecimal): #<input type="text" name="backgroundColor" value="ffffff" /><br />
Border Size (in pixels): <input type="text" name="borderSize" value="1" /><br />
Cell padding: <input type="text" name="cellpaddingSize" value="1" /><br />
Cell spacing: <input type="text" name="cellspacingSize" value="1" /><br />

<textarea cols="60" rows="10" name="tableCodeTextarea" onfocus="this.select()" >HTML Table Code is placed here.</textarea><br /><br />

Click once in the text box to highlight the HTML code. Then, press Ctrl + C (Apple + C for Mac users) to copy the table code to the clipboard, and then Ctrl + V (Apple + V for Mac users) to paste the table code into your favorite HTML code editor. Now you have your HTML table!
</form>
</center>

Alternatively, you can download the source .html file itself by right-clicking on the Download button below, and click "Save Target As..." or "Save Link As...":

Share This Page!