The hkTableFromLines plugin works on the current selection and turns each line into the entry in a table and offers a series of visual and code formatting options. The options will be described in more detail later in this article. Although this article assumes that the plugin is running with the top-to-bottom magazine-style mode enabled, all documented options apply to both modes.
So, what problem does this plug-in solve? In normal, 'hand' written HTML the flow of code runs from top to bottom. This process affects the way data appears in a table as rows are written first and then the columns.
Take a list of numbers, "One" through to "Nine" and make a three column table. If we write the numbers in order in each cell as the code is written sequentially we get this:
One | Two | Three |
Four | Five | Six |
Seven | Eight | Nine |
Notice the flow of list runs across the page, by row, as in normal written text. However, people are more often used to reading data list in tables that are laid out 'magazine' style, where the flow is down the columns, like so:
One | Four | Seven |
Two | Five | Eight |
Three | Six | Nine |
The problem for the HTML author is that the second style is far more bother to write than the first, as you create the table cells in code in a different order to the listed data. The hkTableFromLines solves this by doing all the maths for you! It also offer a few more clever options to help out the HTML-Kit user.
In the following examples we will use the following list of 7 names, in non-alphanumeric order: Curly, Moe, Larry, Harpo, Chico, Zeppo, Groucho.
The effect is this:
1. | Chico | 4. | Harpo | 7. | Zeppo | ||
2. | Curly | 5. | Larry | ||||
3. | Groucho | 6. | Moe |
The effect is better shown when the table's border attribute is set to "1":
1. | Chico | 4. | Harpo | 7. | Zeppo | ||
2. | Curly | 5. | Larry | ||||
3. | Groucho | 6. | Moe |
Here is the source code:
Unused cells are automatically populated with an character to ensure the table borders render correctly around unused cells.
When installed, this icon is added to the 'Tools' toolbar:
Alternatively, use the menu sequence: "Actions / Tools / hkTableFromLines."
On being called you are shown the plug-in's setting panel. It is shown below with default settings but after first use it stores the last used settings, which can be handy if your usual settings are not the defaults.
Default Value: 2 (columns). This option sets the number of data columns you with the plug-in to create To set this you can either use the spinner (control at the right of this input box (see image above) or simply type in the number you want. There are no limits you can set any integer (whole number) from 1 to - whatever!
Default Value: (string) border="0" cellpadding="5" cellspacing="0" summary="". This option allows to set any of the allowable attributes that a <table> element may use, saving you the bother of having to enter these after the plug-in has been run. You can for instance apply a style (e.g. class="tableText"). Instead of adding attributes you may delete all the default text and simple have a plain <table> tag.
Default Value: A-Z. There are 3 choices selected from a drop-down:
This option allows you to alpha-numerically sort (A-Z), reverse sort (Z-A) or not sort all (none) the selected lines of text. Again, this is a time saver. You can paste an in a sorted list to your HTML-Kit page and run the plug-in and have the list sorted for you.
The sort is the basic AZ sort and thus sorts words starting in upper case before lower case; thus "curly, moe, larry, Moe, Curly, Larry" sorts to "Curly, curly, Larry, larry, Moe, moe". Neither does the sort support true number indexing; numbers "1, 2, 3, 10, 100, 4, 35" sort as "1, 10, 100, 2, 3, 35, 4".
Default Value: true (i.e. 'on'). When turned on this option adds an extra column before each data column with the sequential number of the data cell. This is much more easily understood by looking at the 'default' sample further above where the table border has have been set to "1". Much clearer than words.
Use of this option
Default Value: true (i.e. 'on'). This adds a 'padding' column after each data column is written. This is much more easily understood by looking at the 'default' sample further above where the table border has have been set to "1". Much clearer than words.
Default Value: true (i.e. 'on'). This add line returns and whitespace padding in the source code to aid code ligibility
Default value: string {{TEXT}}. This option allows you to alter the visible or code portion of each table cell. Note that when you select this line in the plug-in's input dialog, you get some useful information about the {{}} placeholders in the dialog's status bar.
An example including these 3 text placeholders is shown below (clicking the links should produce a JavaScript alert. The code string used is <a href="#" onClick="alert('{{TEXT_ORIG}}'); return false;">{{TEXT}}</a>. This is Item {{ITEM_NO}}. (Table border set at '1' for clarity).
Chico. This is Item 1. | Harpo. This is Item 4. | Zeppo. This is Item 7. |
Curly. This is Item 2. | Larry. This is Item 5. | |
Groucho. This is Item 3. | Moe. This is Item 6. |
Yes. The plug-in is the file "C:\Program Files\Chami\HTML-Kit\Plugins\hkTableFromLines.hks". Before editing the plug-in you are advised to back up the file. The plug-in was written in hkScript, HTML-Kit's own scripting language, which for the less experienced coder looks quite similar to JavaScript. If you can read JS, you should certainly be able to understand how the main functions does its work. If you mess up, uninstall and re-install the plug-in. To edit the file, open it using HTML-Kit or Notepad.
Yes. An example of how to do this can be found here.
Have questions? Feel free to post them on the HTML-Kit Support Forums.