• Problems

    This line enable URL Rewriting . It must be enabled via the RewriteEngine directive! and if your .htaccess file is going to use rewrite rules, you should always include this line. Otherwise, you can’t be sure if its enabled or not. The string “on” is case insensitive.

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! 

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>




<!-- Begin
var myTable = new tableObj('','Default',1,1,1,1,2,'','');

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+ '>' +(j*i)+ '</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 +(j*i)+ 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.info.tform);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 the next code into 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>

No comments:

Post a Comment