JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Table Maker

This interactive script helps you, the webmaster, see the affects of the TABLE tag attributes. Just modify the values and you can see the example table immediately! If you know someone is having trouble learning tables, send them here!


Insert into <HEAD>


Insert into <BODY>


Other Options
<!-- TWO STEPS TO INSTALL TABLE MAKER: 1. Paste the FRAMESET code into your HTML document 2. Add the next code into the BODY of your table-maker-left.html --> <!-- STEP ONE: Paste the FRAMESET code into your HTML document --> <HTML> <HEAD> <TITLE>Table Maker</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Andy Augustine --> <!-- Begin var myTable = new tableObj('','Default',1,1,1,1,2,'',''); function init() { setValues(info.tform); } function propObj(string,outstring) { this.value = string; this.out = outstring + string; } function setValues(form) { this.alignment.value= form.alignment.value; this.border.value= form.border.value; this.cellspacing.value = form.cellspacing.value; this.cellpadding.value = form.cellpadding.value; this.rows.value = form.numrows.options[form.numrows.selectedIndex].text; this.cols.value = form.numcols.options[form.numcols.selectedIndex].text; this.calign.value = form.calign.value; this.cvalign.value = form.cvalign.value; } function updateProps() { this.alignment.out= " ALIGN=" + this.alignment.value; this.border.out= " BORDER=" + this.border.value; this.cellspacing.out = " CELLSPACING=" + this.cellspacing.value; this.cellpadding.out = " CELLPADDING=" + this.cellpadding.value; this.rows.out = " ROWS=" + this.rows.value; this.cols.out = " COLS=" + this.cols.value; this.calign.out = " ALIGN=" + this.calign.value; this.cvalign.out = " VALIGN=" + this.cvalign.value; } function tableObj(align,caption,border,cellpadding,cellspacing,rows,cols,calign,cvalign) { this.alignment = new propObj(align," ALIGN="); this.border = new propObj(border," BORDER="); this.cellspacing = new propObj(cellspacing," CELLSPACING="); this.cellpadding = new propObj(cellpadding," CELLPADDING="); this.rows = new propObj(rows," ROWS="); this.cols = new propObj(cols," COLS="); this.calign = new propObj(calign," ALIGN="); this.cvalign = new propObj(cvalign," VALIGN="); this.setValues = setValues; this.updateProps = updateProps; } function dumpProps(obj,obj_name) { var result = "", i =""; for (i in obj) result += obj_name +"."+ i +" = "+ obj[i].value +"\n"; return result; } function dumpTags(obj,obj_name) { var result = "", i =""; for (i in obj) result += obj_name +"."+ i +".out = "+ obj[i].out +"\n"; return result; } function drawTable(table) { var tabdoc = this.tableframe.document; table.updateProps(); tabdoc.open(); tabdoc.write('<HTML><BODY>---Your Table---<br><br><br>') tabdoc.write('<TABLE ') tabdoc.write(table.alignment.out) tabdoc.write(table.cellspacing.out) tabdoc.write(table.cellpadding.out) tabdoc.write(table.border.out) tabdoc.write(' >') for (var i=1; i <= table.rows.value; i++) { tabdoc.write('<TR' +table.cvalign.out+ '>') for (var j = 1; j <= table.cols.value; j++) { tabdoc.write('<TD ' +table.calign.out+ '>' +(ji)+ '</TD>') } tabdoc.write('</TR>') } tabdoc.write('</TABLE></HTML></BODY>') tabdoc.close() } function showSource() { var opts = 'width=350,height=350,scrollbars=yes,directories=no,status=yes,location=no,toolbar=no'; var ltag = '<' var gtag = '>' var sourcewin = window.open('','source',opts) sourcewin= window.open('','source') sourcewin.status="Cut and paste this info into your web page" sourcewin.document.write('<HTML><BODY BGCOLOR="#FFFFFF" <PRE><XMP>') sourcewin.document.writeln(ltag + 'TABLE ') if (myTable.alignment.out != '') sourcewin.document.writeln(myTable.alignment.out) sourcewin.document.writeln(myTable.border.out) sourcewin.document.writeln(myTable.cellspacing.out) sourcewin.document.writeln(myTable.cellpadding.out + gtag) for (var i=1; i <= myTable.rows.value; i++) { sourcewin.document.writeln(ltag+ 'TR' +myTable.cvalign.out+ ' ' +myTable.calign.out+ gtag) for (var j = 1; j <= myTable.cols.value; j++) { sourcewin.document.writeln(' ' +ltag+ 'TD' +gtag +(ji)+ ltag+ '/TD' +gtag) } sourcewin.document.writeln(ltag+ '/TR' +gtag) } sourcewin.document.writeln(ltag+ '/TABLE' +gtag) sourcewin.document.write('</XMP></PRE><CENTER>') sourcewin.document.write('<FORM NAME=menu><INPUT TYPE="button" '); sourcewin.document.write('VALUE="Close" onClick="self.document.clear();self.close()">') sourcewin.document.write('<P><P><P><P><P><P></FORM>') sourcewin.document.write('</CENTER></BODY></HTML>') sourcewin.document.close() } // End --> </SCRIPT> </HEAD> <frameset cols="50%,50%" onLoad="parent.myTable.setValues(this.form);parent.drawTable(parent.myTable)"> <frame src="table-maker-left.html" name="info"> <frame src="javascript:void(0)" name="tableframe" marginwidth="4"> </frameset> </html> <!-- STEP TWO: Add to the BODY of your table-maker-left.html --> <html> <head> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function init() { with (document) { tform.alignment.value="left" tform.align.value="left" tform.calign.value="left" tform.cvalign.value="center" } } function clearit(form) { form.alignment.value = "left" form.align.value="left" form.border.value = 1 form.cellspacing.value = 1 form.cellpadding.value = 1 form.numrows.selectedIndex = 0 form.numcols.selectedIndex = 1 form.calign.value = '' form.cvalign.value = '' } function isNum(entry) { var str = entry.value; for (var i = 0; i < str.length; i++) { var ch = str.substring(i, i + 1) if ((ch < "0" \|\| "9" < ch) && ch != '.') { alert("You must enter a number.") entry.value=0 entry.focus() entry.select() } } } // End --> </SCRIPT> </head> <body onLoad="init()" bgcolor="#ffffff"> <center><table border=1><form name="tform"> <tr align=center> <td><input type="reset" name="clear" value="Reset to Defaults" onClick="clearit(this.form)"> <td>Alignment:<br> <input type="radio" name="align" value="left" onClick="document.tform.alignment.value=this.value" checked>Left <input type="radio" name="align" value="center" onClick="document.tform.alignment.value=this.value">Center <input type="radio" name="align" value="right" onClick="document.tform.alignment.value=this.value">Right <input type="hidden" name="alignment" value="left"> <tr align=center> <td colspan=2>Border Width (in Pixels): <input name="border" value="1" size="3" onChange="isNum(this)" value=1> <br> <input type="radio" name="br" value="0" onClick="tform.border.value=0">0 <input type="radio" name="br" value="1" onClick="tform.border.value=1" checked>1 <input type="radio" name="br" value="2" onClick="tform.border.value=2">2 <input type="radio" name="br" value="5" onClick="tform.border.value=5">5 <input type="radio" name="br" value="10" onClick="tform.border.value=10">10 <input type="radio" name="br" value="15" onClick="tform.border.value=15">15 <tr> <td>Cellpadding:<input name="cellpadding" size=3 value=1 onChange="isNum(this)"> <td>Cellspacing:<input name="cellspacing" size=3 value=1 onChange="isNum(this)"> <tr align=center> <td>Rows:<br><select name="numrows"> <option selected>1 <option>2 <option>3 <option>4 <option>5 </select> <td>Cols:<br><select name="numcols"> <option>1 <option selected>2 <option>3 <option>4 <option>5 </select> <tr> <td>HORIZONTAL ALIGNMENT (cells):<br> <input type="radio" name="calign" value="left" onClick="document.tform.calign.value=this.value" checked>Left <input type="radio" name="calign" value="center"onClick="document.tform.calign.value=this.value">Center <input type="radio" name="calign" value="right" onClick="document.tform.calign.value=this.value">Right <td>VERTICAL ALIGNMENT (cells):<BR> <input type="radio" name="cvalign" value="top" onClick="document.tform.cvalign.value=this.value">Top <input type="radio" name="cvalign" value="center" onClick="document.tform.cvalign.value=this.value" checked>Center <input type="radio" name="cvalign" value="bottom" onClick="document.tform.cvalign.value=this.value">Bottom <tr align=center> <td colspan=2><input type="button" name="drawtable" value="Draw this table!" onClick="parent.myTable.setValues(this.form);parent.drawTable(parent.myTable)"> </tr> <tr> <td colspan=2>The following features correspond to bottom frame:</TD> </tr> <tr align=center> <td colspan=2><input type="button" value="See HTML code for table!" onClick="parent.showSource()"> </tr> <tr align=center> <td colspan=2><input type="button" value="View table values" onClick="alert(parent.dumpProps(parent.myTable,'myTable'))"> </tr> </table> </form></table></center> </body> </html> <p><center> <font face="arial, helvetica" size="-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </center><p> <!-- Script Size: 8.35 KB -->