<HTML>
<HEAD>
<TITLE>Table Generator</TITLE>
<style>
#mytable{border:1px solid #8e8462}
#mytable td{border:1px solid #c9bda9}
#mytable td input{background-color:#a09790;width:74px;height:20px;font-size:10px}
#mytable td select{background-color:#a09790;width:74px;height:20px;font-size:10px}
*html #mytable td{line-height:22px}
</style>
<script type="text/javascript">
<!--
function create_table(){
document.getElementById("table_gen").innerHTML=""
document.getElementById("table_code").innerHTML=""
myform=document.f1
Width=myform.wdth.value
rows=myform.row.value
cells=myform.cell.value
space=myform.space.value
pad=myform.pad.value
t_border=myform.tbrdr.value
s_border=myform.sbrdr.value
bordtype=myform.s1.options[myform.s1.selectedIndex].value
bordcol=myform.brdrcol.value
if(bordtype!="none"&&s_border==0){
s_border=1
myform.sbrdr.value=s_border
}
if(bordtype=="double"&&s_border<3){ // minimum for double border effect
s_border=3
myform.sbrdr.value=s_border
}
if(rows>20){rows=20;myform.row.value=20}
if(cells>20){cells=20;myform.cell.value=20}
setTimeout("create_table2()",200)
}
function create_table2(){
if(s_border>=1){
document.getElementById("table_code").innerHTML+="<table border=\""+t_border+"\" width=\""+Width+"px\" cellspacing=\""+space+"px\" cellpadding=\""+pad+"px\" style=\"border:"+s_border+"px "+bordtype+" #"+bordcol+"\"><br><tbody><br>"
tempStr="<table border=\""+t_border+"\" width=\""+Width+"px\" cellspacing=\""+space+"px\" cellpadding=\""+pad+"px\" style=\"border:"+s_border+"px "+bordtype+" #"+bordcol+"\"><tbody>"
}
else{
document.getElementById("table_code").innerHTML+="<table border=\""+t_border+"\" width=\""+Width+"px\" cellspacing=\""+space+"px\" cellpadding=\""+pad+"px\"><br><tbody><br>"
tempStr="<table border=\""+t_border+"\" width=\""+Width+"px\" cellspacing=\""+space+"px\" cellpadding=\""+pad+"px\"><tbody>"
}
for (i = 0; i <rows; i++){ // Rows
document.getElementById("table_code").innerHTML+="<tr><br>"
tempStr+="<tr>"
for (k = 0; k < cells; k++){ // Cells
document.getElementById("table_code").innerHTML+="<td>Row "+(i+1)+": Cell "+(k+1)+"</td><br>"
tempStr+="<td>Row "+(i+1)+": Cell "+(k+1)+"</td>"
}
document.getElementById("table_code").innerHTML+="</tr><br>"
tempStr+="</tr>"
}
document.getElementById("table_code").innerHTML+="</tbody><br></table>"
tempStr+="</tbody></table>"
document.getElementById("table_gen").innerHTML+=tempStr
}
// -->
</script>
</HEAD>
<BODY>
<h1>Table Generator</h1>
Enter your requirements
<center>
<form name="f1">
<table border="1" id="mytable">
<tbody>
<tr>
<td align="right" valign="top">
<input type="text" name="wdth" value="500" maxlength="3" onclick="this.select()"><br>
<input type="text" name="row" value="5" maxlength="2" onclick="this.select()"><br>
<input type="text" name="cell" value="5" maxlength="2" onclick="this.select()"><br>
<input type="text" name="space" value="2" maxlength="2" onclick="this.select()"><br>
<input type="text" name="pad" value="2" maxlength="2" onclick="this.select()"><br>
<input type="text" name="tbrdr" value="1" maxlength="1" onclick="this.select()"><br>
<input type="text" name="sbrdr" value="0" maxlength="1" onclick="this.select()"><br>
<select name="s1">
<option value="none" selected>None</option>
<option value="solid">Solid</option>
<option value="dashed">Dashed</option>
<option value="dotted">Dotted</option>
<option value="double">Double</option>
<option value="groove">Groove</option>
<option value="ridge">Ridge</option>
<option value="inset">Inset</option>
<option value="outset">Outset</option>
</select><br>
<input type="text" name="brdrcol" value="FF0000" maxlength="6" onclick="this.select()"><br>
</td>
<td valign="top">
Width<br>
TR's<br>
TD's<br>
CellSpacing<br>
CellPadding<br>
Border<br>
CSS Border<br>
CSS Border Type<br>
CSS Border Colour<br>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Generate Table" style="width:100px" onclick="create_table()">
</td>
</tr>
</tbody>
</table>
<br><br>
<div id="table_gen"></div>
</center>
<br><br>
<div id="table_code"></div>
</BODY>
</HTML>