Table Maker Tutorial
In this tutorial we will use veefu to create an internet-ready html page with a table that is filled in
from the contents of a text file. In Figure 1 we have a simple page with the head and tail sections
clearly marked and a basic table in the body. You can make pages as fancy and complicated as
you want, this one though simple serves as a good demonstrator. To make the table display the
contents of our file we first copy out the head and tail sections by opening the html source.
from the contents of a text file. In Figure 1 we have a simple page with the head and tail sections
clearly marked and a basic table in the body. You can make pages as fancy and complicated as
you want, this one though simple serves as a good demonstrator. To make the table display the
contents of our file we first copy out the head and tail sections by opening the html source.
In Internet Explorer click "Page->View Source" in FireFox Select
"View->Page Source". Whichever browser or editor you use, you should
see a screen like Figure 2. The 'head' of the file is the section highlighted
in blue, everything from the first line <!DOCTYPE html PUBLIC.... to
<tbody>. Depending on which editor was used to create the page, the
exact text may vary, but what you really want is everything from the
beginning of the file up to but not including the first occurrence of
<tr><td>. Highlight that and copy it to a file called head.txt using notepad
or some other text editor.
"View->Page Source". Whichever browser or editor you use, you should
see a screen like Figure 2. The 'head' of the file is the section highlighted
in blue, everything from the first line <!DOCTYPE html PUBLIC.... to
<tbody>. Depending on which editor was used to create the page, the
exact text may vary, but what you really want is everything from the
beginning of the file up to but not including the first occurrence of
<tr><td>. Highlight that and copy it to a file called head.txt using notepad
or some other text editor.
Figure 1
The tail section is everything from </tbody>
to the end, </html>. Highlight that and copy
it to a file named tail.txt. Again the exact
text may vary and what you want here is
everything after the last occurrence of
</td></tr>. The </td> closes a cell and </tr>
closes a row and the last time these two
appear in a table signals the end of the
table.
to the end, </html>. Highlight that and copy
it to a file named tail.txt. Again the exact
text may vary and what you want here is
everything after the last occurrence of
</td></tr>. The </td> closes a cell and </tr>
closes a row and the last time these two
appear in a table signals the end of the
table.
Figure 2
Load the file into the column tool
We've got the head and tail of the resultant
file, now we need to build the body. The
cells of html tables are just strings of
characters sandwiched between <td> and
</td> delimiters. The easiest way to pad grid
style data in veefu is with the columns tool.
From the veefu screen click the button
on the top tool bar. The screen should look
like figure 3.
file, now we need to build the body. The
cells of html tables are just strings of
characters sandwiched between <td> and
</td> delimiters. The easiest way to pad grid
style data in veefu is with the columns tool.
From the veefu screen click the button
on the top tool bar. The screen should look
like figure 3.
The file itself is shown in figure 4 and
contains a fictional list of female governors
and their 'First Dudes' along with a numerical
field that could represent a salary. Note: the
low value for the Governor of Illinois
obviously does not count gubernatorial
windfalls originating from sale of
transportation licences and open Senate
seats.
contains a fictional list of female governors
and their 'First Dudes' along with a numerical
field that could represent a salary. Note: the
low value for the Governor of Illinois
obviously does not count gubernatorial
windfalls originating from sale of
transportation licences and open Senate
seats.
Figure 3
Figure 4
Figure 5
Open the file by clicking 'Add File' and selecting the file from the
browser dialog. The 'Files' section should look like figure 5.
browser dialog. The 'Files' section should look like figure 5.
To make the table text we just add the <tr></tr> and <td></td>
sets as in figure 6. For this example we are tableizing
columns 2, 1and 3; last name, first name, state abbreviation.
'Left' and 'Right' denote the strings that are placed to the left
and right of each of the column elements. The <tr> in Col 1
opens a row, the <td> in the left and </td> in the right of each
Col opens and closes a table element and the </tr> in Col 3
closes the row.
sets as in figure 6. For this example we are tableizing
columns 2, 1and 3; last name, first name, state abbreviation.
'Left' and 'Right' denote the strings that are placed to the left
and right of each of the column elements. The <tr> in Col 1
opens a row, the <td> in the left and </td> in the right of each
Col opens and closes a table element and the </tr> in Col 3
closes the row.
Figure 6
Click the run button . The
results should look like figure 7.
The left side shows the 'In' pipe, in
this case the raw file. The right
side shows the 'Out' pipe. This is
the html code that makes our table.
results should look like figure 7.
The left side shows the 'In' pipe, in
this case the raw file. The right
side shows the 'Out' pipe. This is
the html code that makes our table.
Figure 7
Assemble the parts and save
with the File Tool
Click the icon to bring up the file tool. It
should look like figure 8. Next click the 'Add
File' button to add the page header file that
we saved earlier. Next enter the word 'stdin'
in the second row of the Files list. Finally
add the tail file from before as the third entry
to the Files list. The list should look like
figure 9.
should look like figure 8. Next click the 'Add
File' button to add the page header file that
we saved earlier. Next enter the word 'stdin'
in the second row of the Files list. Finally
add the tail file from before as the third entry
to the Files list. The list should look like
figure 9.
Figure 8
Figure 9
Set a valid filename in the 'Save As File
Name' text box like 'myTable.html' and hit
the run button. You should get a screen
that looks like figure 10.
Name' text box like 'myTable.html' and hit
the run button. You should get a screen
that looks like figure 10.
Figure 10
Use a browser to
open myTable.html. It
It should look like
figure 11. Now you
can save the script
and whenever you
run it, the file
myTable.html will be
updated with the
contents of your
source file. (sort.txt
in this example)
open myTable.html. It
It should look like
figure 11. Now you
can save the script
and whenever you
run it, the file
myTable.html will be
updated with the
contents of your
source file. (sort.txt
in this example)
Figure 11
And that's it.
This tutorial has explained the steps in
excruciating detail. It's really a lot easier than
it seems and of course you don't have to just
use a file as is before you tableize it. You can
sort, match, translate, truncate etc before you
pipe it into this table making script.
This tutorial has explained the steps in
excruciating detail. It's really a lot easier than
it seems and of course you don't have to just
use a file as is before you tableize it. You can
sort, match, translate, truncate etc before you
pipe it into this table making script.
| Download Now |