What does 'hkTableFromLines' do?
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.
Options
- Number of Columns. (3)
- Table Attributes. (Default = border="1" cellpadding="5" cellspacing="0" summary="")
- Sort Mode. (Default = A-Z)
- Show Item Number. (Default = true)
- Add Column Separator Cells. (Default = true)
- Beautify Tags. (Default = true)
- Cell Format. (Default = {{TEXT}})
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.
Calling the plug-in
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.
Option 1: Number of Columns
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!
Option 2: Table Attributes
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.
Option 3: Sort Mode
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".
Option 4: Show Item Number
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
Option 5: Add Column Separator Cells
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.
Option 6: Beautify Tags
Default Value: true (i.e. 'on'). This add line returns and whitespace padding in the source code to aid code ligibility
Option 7: Cell Format
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.
- {{TEXT_ORIGINAL}}. This is the text exactly as typed into your original selected lines of text
- {{TEXT}}. The escapes various characters for web use: & becomes &, <, becomes <, > becomes >, " becomes ", ' becomes '.
- {{ITEM_NO}}. This simply inserts the serial number as used in option #4 above into the cell text/code at the position indicated.
Example
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. |
Can you edit/customize this plug-in?
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.
Can I use this code in Javascript in a live web page?
Yes. An example of how to do this can be found here.
Your feedback is appreciated
Have questions? Feel free to post them on the HTML-Kit Support Forums.