Xpounded Table Diagram to HTML

A simple use of Notepad, Javascript(, and VBScript)

Below you will find the Xpounded notepad table diagram to HTML script. With it you can design HTML tables with content placeholders using Notepad. Once you have the design you want, use our 'Notepad Table Diagram to HTML' script to automatically create the HTML for your table. The script is easy to use, automatically handling both colsapns and rowspans.

To Use: Design a table in notepad, browse to it and open it into the textarea.
Requires MSComDlg (CommonDialog control)

Things you can do...
Un-comment the browse section to browse to your table defs.

Save the script into a script file and include file drag and drop functionality.

Make an automation to replace the content holder with actual content from a seperate file.

(Target System: XP/2003/2000, IE6, WSH 5.6, with Common Dialog Control)

Save this file as npDiagramer.html Mention Us

Select All

<HTML>
<HEAD>
<TITLE>
Xpounded Notepad Table Diagram to HTML
</TITLE>
<STYLE>

</STYLE>
<script language="vbscript">
' VBS is used here only for the Browse Feature.
Function readFile(path)
	Dim f
	Set f = fso.OpenTextFile(path, 1)
	readFile = f.ReadAll
	f.Close
	Set f = Nothing
End Function
Sub saveFile(path,sContent)
	Dim result
	Set result = fso.createTextFile(path,True)
	result.Write sContent
	result.Close
	Set result = Nothing
End Sub
Function openDialog(sPath,sFilter)
	Dim oCDlg, sFile
	Const OFN_EXPLORER = &H80000
	Const OFN_LONGNAMES = &H200000
	Set oCDlg = CreateObject("MSComDlg.CommonDialog")
	sFile = String(260, Chr(0))
	With oCDlg
		.Flags = OFN_EXPLORER Or OFN_LONGNAMES
		.MaxFileSize = 260
		.InitDir = sPath
		If sFilter <> "" Then
			.Filter = sFilter
		Else
			.Filter = "All Files (*.*)|*.*"
		End If
		.ShowOpen
		sFile = .FileName
		If sFile <>"" Then
			sReturn = sFile
		End If
	End With
	Set oCDlg = nothing
	openDialog = sReturn
End Function

'BROWSE INSTRUCTIONS:
'To use the browse feature you must uncomment the following lines 
'	and comment the first two lines in the Sub browse_onclick.
'	browse requires MSComDlg (common dialog).
'Dim fso, desktop, WshShell
'set WshShell = CreateObject("WScript.Shell")
'desktop = WshShell.SpecialFolders("Desktop")
'set WshShell = Nothing
'Set fso = createObject("Scripting.FileSystemObject")
Sub browse_onclick
	msgbox "download and comment out this line and the next to use this feature."
	Exit Sub
	'See the BROWSE INSTRUCTIONS above

Dim sfile
	sfile=openDialog(desktop,"Text Only|*.txt")
	if sfile<>"" then
		results.value=makeTable(readFile(sfile))
		'results.value=readFile(sfile)
	end if
End Sub
</script>

<SCRIPT Language="JavaScript">
// Notepad (NP) Table Deffinition (Table Def) Diagrams
//
// NP Table Def (NPTD) is designed to utilize content placeholders.
// NPTD creates HTML from diagrams that can be created in notepad.
// Use content placeholders (variable aplha-num text) to indicate
// 	which cell holds what information. After the HTML is created
// 	you can either repalce the content plcaeholders with the actual 
//	content manually, or through automation.
//
// The NP Table Def language uses the chars " - ", and " | " as identifiers.
// The char "|" is reserved.
// Definitions.
// DEF: Hashed Line: A Hased line is any line that contains the char "-".
// DEF: Row: A Row is any line that contains the deliminator char "|".
// Rules.
// RULE 1: All lines must be the same length.
// RULE 2: Empty (or Blank) lines are not allowed.
// RULE 3: The fist and last lines of a Table Def are dashed Lines ("--...").
// RULE 4: Cells are bounded above and below by dashed lines.
// RULE 5: Cells are bounded on the right and left by the "|" char
// RULE 6: All lines terminate in a hard-return (crlf).
// RULE 7: Redundant lines are allowed, but will be ignored.
// RULE 8: All Chars not "-", "|", or crlf are considered content placeholder.
// crlf == carage-return + line-feed. javascript:"\r\n"

// Multiple Deffinition Files (MDF)
// You can have more than 1 definition in a file.
// To use a definition in a MDF it must be immediatly surrounded by the following 
// sequence of chars: "_use_" + crlf
// That is, "_use_" followed by crlf 
// See the example below.

// Note: In Notepad (or a textarea) the crlf is not-visible (crlf is the result of 
//	   using the <RETURN> key).
//	   When using variables to hold a TabelDef the crlf is visible as 
//	   "\r\n", or vbcrlf.

// Samples (the following diagrams could stored in individual text files).
// When stored in text files, the quotes and the chars "\r\n' should not be included.

s2 = 		"-------------------------------------------\r\n"
 	+	"|              [links header]             |\r\n"
 	+	"-------------------------------------------\r\n"
 	+	"| [a] | [b]  |  [c]  |  [d]  | [e] |  [f] |\r\n"
 	+	"-------------------------------------------\r\n"
 	+	"|[section 1] |    [section 2]      |[sec3]|\r\n"
 	+	"|            |                     |      |\r\n"
 	+	"-------------------------------------------\r\n"
 	+	"|               [information]             |\r\n"
 	+	"-------------------------------------------\r\n"

s3 = 		"---------------------------\r\n"
  	+ 	"| [logo] |     [banner]   |\r\n"
  	+ 	"---------------------------\r\n"
 	+	"| [menu] |[cont1]|[cont2] |\r\n"
 	+	"|        |       |        |\r\n"
 	+	"---------|       |---------\r\n"
 	+	"|  [a]   |       |   [b]  |\r\n"
 	+	"---------------------------\r\n"
 	+	"|  [c]           |   [d]  |\r\n"
 	+	"|                |---------\r\n"
 	+	"|                |   [e]  |\r\n"
 	+	"---------------------------\r\n"
 	+	"|        [footer]         |\r\n"
 	+	"---------------------------"

+	"\r\n"

+	"_use_\r\n"
	+	"------------------------------------------------------\r\n"
  	+ 	"| [logo1]|     [banner1]  | [logo2]|     [banner2]   |\r\n"
  	+ 	"------------------------------------------------------\r\n"
 	+	"| [menu] |[cont1]|[cont2] | [really big pic]         |\r\n"
 	+	"|        |       |        |                          |\r\n"
 	+	"---------|       |--------|                          |\r\n"
 	+	"|  [a]   |       |   [b]  |                          |\r\n"
 	+	"--------------------------|                          |\r\n"
 	+	"|  [c]           |   [d]  |                          |\r\n"
 	+	"|                |------------------------------------\r\n"
 	+	"|                |   [e]  |   [f]  |  [g]   |  [h]   |\r\n"
 	+	"-----------------------------------|        |---------\r\n"
 	+ 	"|   [i]  |  [j]  |  [k]            |        |  [l]   |\r\n"
 	+ 	"------------------------------------------------------\r\n"
 	+	"|        [footer]                                    |\r\n"
 	+	"------------------------------------------------------\r\n"
	+     "_use_\r\n"

+	"\r\n"

/////////////////////////////////////////////////////////////////////////////////////
///////////// HTML Tables from Notepad Diagrams
////////////
/////////// rdspons 
////////// Copyright Xpounded 2005
/////////
var colmarks
var rowmarks
function rawTableDef(s){
	//Takes a Notepad table design and splits the diagram so it can
	// create a table with Cap-Alpha 'A' and above entries that
	// uniformly (and homogeneously) fill the td areas, keeping 
	// the tables design structure unaltered.  
	var tdcntr=1
	var newlines=[]
	colmarks=[]
	rowmarks=[]
	newlines[0]=""
	var lines=s.split("\r\n")
	for(var i=1;i<lines.length;i++){
		rowmarks[i]=1
	}
	for(var i=1;i<lines[1].length;i++){
		colmarks[i]=1
	}
	for(var i=0;i<lines.length;i++){
		newlines[i]=""
		for(var j=0;j<lines[i].length;j++){
			if(lines[i].substr(j,1)=="|"){
				if(lines[i-1].substr(j,1)=="-"){
					tdcntr++
				}
			}
			if(lines[i].substr(j,1)=="-"){
				newlines[i]+="-"+""
				rowmarks[i]=0
			}
			else{
				if(lines[i].substr(j,1)=="|"){
					newlines[i]+="|"+""
					colmarks[j]=0
				}
				else{
					if(lines[i-1].substr(j,1)=="-"){
						newlines[i]+=String.fromCharCode(tdcntr+63)+""
					}
					else{
						newlines[i]+=newlines[i-1].substr(j,1)
					}
				}
			}
		}
	}
	return newlines
}
var colmarker=""
var rowmarker=""
function makeColMarker(){
	//Creates a string that holds the tables column seperation posistions
	makeRowMarker()
	colmarker=""
	var cntr=0
	for(var i=0;i<colmarks.length;i++){
		if(colmarks[i]==0){
			colmarker+="0"+""
			cntr++
		}
		else{
			colmarker+=cntr+""
		}
	}
}
function makeRowMarker(){
	//Creates a string that holds the tables row seperation posistions
	rowmarker=""
	var cntr=0
	for(var i=0;i<rowmarks.length;i++){
		if(rowmarks[i]==0){
			rowmarker+="0"+""
			cntr++
		}
		else{
			rowmarker+=cntr+""
		}
	}
}
function colMarkerDiagram(s){
	//creates a table fills each td area with the td's cooresponding colmarker number
	//the table structure is kept intact
	var cntr
	var newlines=[]
	var lines=s.split("\r\n")
	for(var i=0;i<lines.length;i++){
		newlines[i]=""
		cntr=0
		for(var j=0;j<lines[i].length;j++){
			if(lines[i].substr(j,1)=="|"){
				cntr=colmarker.substr(j+1,1)+""
				newlines[i]+="0"+""
			}
			else{
				if(lines[i].substr(j,1)=="-"){
					newlines[i]+="0"+""
				}
				else{
					newlines[i]+=cntr+""
				}
			}	
		}
	}
	return newlines
}
function rowMarkerDiagram(s){
	//creates a table fills each td area with the td's cooresponding rowmarker number

//the table structure is kept intact
	var cntr
	var newlines=[]
	var lines=s.split("\r\n")
	for(var i=0;i<lines.length;i++){
		newlines[i]=""
	}
	for(var j=0;j<lines[0].length;j++){
		cntr=0
		for(var i=0;i<lines.length;i++){
			if(lines[i].substr(j,1)=="-"){
				cntr=rowmarker.substr(i+1,1)+""
				newlines[i]+="0"+""
			}
			else{
				if(lines[i].substr(j,1)=="|"){
					newlines[i]+="0"+""
				}
				else{
					newlines[i]+=cntr+""
				}
			}	
		}
	}
	return newlines
}
function npDiagramToHTML(s){
  try{
	// takes a notepad table diagram and creates the HTML that will
	// reproduce it.
	// The html will include the content from the first line of the
	// diagram. This effect can be used to indicate content placeholders.
	try{				//Added for muliple deffinitions in the same file

n=s.indexOf("_use_")
		if(n>-1){
			s=s.split("_use_\r\n")
		}
		if(s[1].length>0){
			s=s[1]
		}
	}
	catch(e){}
	rawTableDef(s)
	makeColMarker()
	markers=colMarkerDiagram(s)				//td area col marks
	markers2=rowMarkerDiagram(s)				//td area row marks
	var ret="<table border=\"1\" width=\"100%\">\r\n"
	var lines=s.split("\r\n")
	var mat=[]
	var newrow=0
	for(var i=0;i<lines.length;i++){
		mat[i]=[]
		for(var j=0;j<lines[i].length;j++){
			mat[i][j]=0
		}
	}
	var newtable=1
	var newrow=0
	var cont=""
	for(var i=1;i<lines.length;i++){
		for(j=0;j<lines[i].length;j++){
			if(lines[i-1].substr(j,1)=="-"){
				newrow=1
				break
			}
		}
		if(newrow==1){
			if(newtable==0){
				ret+="\t</tr>\r\n\t<tr>\r\n"
			}
			if(newtable==1){
				ret+="\t<tr>\r\n"
			}
		}
		newrow=0
		newtable=0
		for(var j=0;j<lines[i].length;j++){
			if(lines[i].substr(j,1)=="|"){cont=""}
			else{
				if(lines[i].substr(j,1)=="-"){cont=""}
				else{
					if(mat[i][j]==0){
						var spaceCnt=0
						for(var k=j;k<lines[i].length;k++){
							if(lines[i].substr(k,1)=="|"){
								break
							}
							newchr=lines[i].substr(k,1)
							if(newchr==" "){
								spaceCnt++
							}
							else{
								spaceCnt=0
							}
							if(spaceCnt<2){
								cont+=newchr
							}
						}
						ret+="\t\t<td"
						mark=markers[i].substr(j,1)
						spancol=0
						spanrow=0
						for(var k=j;k<markers[i].length;k++){
							if(markers[i].substr(k,1)==mark){
								spantest1=colmarker.substr(k,1)-markers[i].substr(k,1)
								if(spantest1>0){
									spancol=spantest1+1
								}
								mat[i][k]=1
								mark2=markers2[i].substr(j,1)
								for(var l=i+1;l<markers2.length;l++){
									if(markers2[l].substr(k,1)==mark2){
										spantest2=rowmarker.substr(l,1)-markers2[l].substr(k,1)
										if(spantest2>0){
											spanrow=spantest2+1
										}
										mat[l][k]=1
									}
									else{
										break
									}
								}
							}
							else{
								break
							}
						}
						if(spancol>0){
							ret+=" colspan='"+spancol+"'"
						}

if(spanrow>0){
							ret+=" rowspan='"+spanrow+"'"
						}
						ret+=">"+cont+"</td>\r\n"
					}
				}
			}
		}
	}
	ret+="\t</tr>\r\n</table>\r\n"
  }
  catch(e){
	alert("Make sure you are using a valid NPTD source diagram")
	ret="The diagram is un-parseable in this version."
  }
	return ret
}
//\\\\\\\
//\\\\\\\\ Copyright Xpounded 2005
//\\\\\\\\\ rdspons 
//\\\\\\\\\\
//\\\\\\\\\\\ HTML Tables from Notepad Diagrams
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

NP Table Def (NPTD) is designed to utilize <u>content placeholders</u>.
 NPTD creates <font color="red" size="+2">HTML from diagrams</font> that can be created in <font size="+2">notepad</font>.
 Use <u>content placeholders</u> (variable aplha-num text) to indicate
 	which cell holds what information. After the HTML is created
 	you can either replce the content plcaeholders with the actual 
	content manually, or through <i>automation</i>.

The NP Table Def language uses the chars <font color="navy" size="+2">" - "</font>, and <font color="navy" size="+2">" | "</font> as identifiers.
 The char <font color="navy" size="+2">"|"</font> is reserved.
<font color="blue">
 <font size="+1" color="red">Definitions</font>.
 DEF: Hashed Line: A Hased line is any line that contains the char "-".
 DEF: Row: A Row is any line that contains the deliminator char "|".
 <font size="+1" color="red">Rules</font>.
 RULE 1: All lines must be the same length.
 RULE 2: Empty (or Blank) lines are not allowed.
 RULE 3: The fist and last lines of a Table Def are dashed Lines ("--...").
 RULE 4: Cells are bounded above and below by dashed lines.
 RULE 5: Cells are bounded on the right and left by the "|" char
 RULE 6: All lines terminate in a hard-return (crlf).
 RULE 7: Redundant lines are allowed, but will be ignored.
 RULE 8: All Chars not "-", "|", or crlf are considered content placeholder.
 crlf == carage-return + line-feed. javascript:"\r\n"
</font>
 Multiple Deffinition Files (MDF)
 You can have more than 1 definition in a file.
 To use a definition in a MDF it must be immediatly surrounded by the following 
 sequence of chars: "_use_" + crlf
 That is, "_use_" followed by crlf 
 See the example below.

Note: In Notepad (or a textarea) the crlf is not-visible (crlf is the result of 
	   using the <RETURN> key).
	   When using variables to hold a TabelDef the crlf is visible as 
	   "\r\n", or vbcrlf.
</pre>
</div>
<center>
<h1>Notepad Table Deffinition Diagrams</h1>
>textarea id="results" rows="18" cols="80"></textarea>
<br>
<button id="browse">Browse</button>
<button onclick="parse()">Make HTML</button>
<button onclick="show(1)">Example 1</button>
<button onclick="show(2)">Example 2</button>
<button onclick="show(3)">Example 3</button>
<button onclick="show(4)">Example 4</button>
</center>
</BODY>
</HTML>

View HTML

- Copyright 2004 Xpounded -
All JS code developed by Xpounded is developed in RHSCoder.
All VBS code developed by Xpounded is developed in VBS QuickDev IDE, or RHSCoder.
Privacy Statement
Feedback