A Table Generator

This is a simple app that creates and copies the code for tables that can be pasted into web pages.

Here is an example:

This is the code:

!DOCTYPE HTML>
html>
head>style>
input{position: relative;width:60px}
table{position: relative}
/style>/head>
body>
div id= “frame” style= “position: absolute; width: 100%; height: 100%; top: 50px”>/div>
center>input type = “text” id=”t5″ value=”” placeholder=”width” /> input type = “text” id=”t1″ value=”” placeholder=”# rows” /> input type = “text” id=”t2″ value=”” placeholder=”# cols” /> select id=”s1″>option>table/option>option>cell/option>/select> select id=”s2″>option>border/option>option>solid/option>option>ridge/option>option>groove/option>option>outset/option>option>inset/option>/select> select id=”s3″>option>border width/option>option>0/option>option>1/option>option>2/option>option>3/option>option>4/option>option>5/option>option>6/option>option>7/option>option>8/option>option>9/option>option>10/option>/select> select id=”s4″ onchange=’op();’>option>operation/option>option>create/option>option>save/option>/select>/center>
textarea id=”ta” Style = “position: absolute; width: 100%; height: 100%; top: 101%; background-color: #dddddd”>/textarea>

script>
var wd = “”; var ht = “”; var rows; var cols; var bw;
function op() {
if (document.getElementById(“s4”).value == “save”) {
sve();
} else {
bw = document.getElementById(“s3”).value + “px”;
rows = document.getElementById(“t1”).value; cols = document.getElementById(“t2”).value;
wd = document.getElementById(“t5”).value; var bd = document.getElementById(“s2”).value; //ht = “300px”;
var str = ‘center>table id=”tb” style = “border: ‘ + bw + ‘ ‘ + bd + ‘; border-collapse: collapse; text-align: center; width: ‘ + wd + ‘; height: ‘ + ht + ‘”>’;
for (var j = 1; j = rows; j ++ ) {
str += ‘tr>’;
for (var i = 1; i = cols; i ++ ) {
str += ‘td id = “td’ + j + i + ‘” style= “position: relative;padding:2px 10px; height: 50px; border: ‘ + bw + ‘ ‘ + bd + ‘” contenteditable = “true”>cell’ + j + i + ‘/td> ‘;
if (i == cols) str += “/tr>”
}
}
str += ‘/table>/center>’;
document.getElementById(“frame”).innerHTML = str;
}
}

function sve() {
document.getElementById(“ta”).value = document.getElementById(“frame”).innerHTML;
document.getElementById(“ta”).focus();
document.getElementById(“ta”).select();
success = document.execCommand(“copy”);
}
/script>
/body>/html>

The main function is called op().
A select with two options links to it. If “save” is chosen sve() is called:
function sve() {
document.getElementById(“ta”).value = document.getElementById(“frame”).innerHTML;
document.getElementById(“ta”).focus();
document.getElementById(“ta”).select();
success = document.execCommand(“copy”);
}

The table code is copied to a textarea which is then selected and its contents copied to the clipboard.

If “create” is chosen the following code creates the table:
bw = document.getElementById(“s3”).value + “px”;
rows = document.getElementById(“t1”).value; cols = document.getElementById(“t2”).value;
wd = document.getElementById(“t5”).value; var bd = document.getElementById(“s2”).value; //ht = “300px”;
var str = ”; for (var j = 1; j <= rows; j ++ ) { str += ”; for (var i = 1; i <= cols; i ++ ) { str += ‘ ‘; if (i == cols) str += “” } } str += ‘

cell’ + j + i + ‘

‘;
document.getElementById(“frame”).innerHTML = str;

The cells are contenteditable, which is then saved.

A width can be set for either the table or the cells.

The border style and border width can be set from select elements.