Post by CampKohler on Sept 26, 2013 15:09:42 GMT -8
How to make tables in posts
THIS TOPIC IS UNDER CONSTRUCTION as of 28 June.
A: General:
A table is a framework to hold text and other content in boxes, which can be stacked both vertically and horizontally. A table makes it easier for the reader to make sense of multiple pieces of data that have some common aspects. The author encloses the data in UBBC tags and the forum draws the boxes and stacks them.
Tables can be placed anywhere in a post and need not be symmetrical, that is, you could have more columns in one row than another (but it might not look good).
B:
From time to time, you should save the text of your post to an off-forum place in case ProBoards servers die:
1. On the post to be backed up, click Modify to open the edit dialog box
2. Highlight the text in the box ([Ctrl-a])
3. Copy it to the Windows clipboard ([Ctrl-c])
4. Paste it to a Notepad/Wordpad/Word file ([Ctrl-v]) with word wrap turned off.
5. Save the file as a text (.txt) file (vs. .rtf, .doc, etc.)
For the above method to save everything, all of the text must be that which can be typed on the keyboard by using single keystrokes with the exception of the use of [Shift] and [Caps Lock] keys. Don't enter any characters that require the use of the [Alt] key, widgets or other tricks, because the saving program won't accept them in a simple paste.
To do a restore, open the saved file and reverse the process, pasting the text back into the forum dialog box.
Method of Creating and Entering
Normally, a topic message (whether an OP or a reply) is typed into the dialog box that results from clicking the Create Thread or Reply buttons. Later the content may be revised within the dialog box produced by use of the Edit button. In other words, all entry was done using the features of the forum. Now, because of the action of the v5 forum software, it is easier to do this offline.
To create a table, type into a simple text editor and paste the results into a forum message dialog box:
1. Open a MS Notepad (or other equivalent text editor program) to a blank page.
2. Enter the markup for the table.
3. Turn off word wrap (if used) and save the file as a .txt file to some off-forum device as a backup and to eliminate any formatting.
4. Select the file's entire text ([Ctrl-A]).
4. Copy the text to the clipboard ([Ctrl-C]).
5. Paste the clipboard to a forum blank message dialog box ([Ctrl-V]).
6. Click Save Changes to save the message content.
7. Press [F5} to refresh the screen and view the message.
To revise the table, edit the .txt file instead of the forum message and paste the revised file into the message:
1. Open the .txt file containing the table markup with a text editor.
2. Make the necessary changes.
3. Save the revised .txt file as a backup.
4. Click the Edit button on the message to be revised to open the dialog box.
5. Select the entire message [Ctrl-A].
6. Press [Delete] to delete the entire message.
7. Open the .txt file with the editor.
8. Select the entire text ([Ctrl-A]).
8. Copy the file to the clipboard ([Ctrl-C]).
9. Paste the clipboard to the blank message dialog box ([Ctrl-V}).
10. Click Save Changes to save the revised message content.
11. Press [F5} to refresh the screen and view the revised message.
Code boxes show the UBBC markup that are behind the examples which follow them.
B: Constructing a table:
A table is formed by enclosing your data text in UBBC tags within the table's elements of rows, columns and the table as a whole.
1. A table is enclosed in [table] tags:
2. A row in the table is enclosed within table row [tr] tags:
3. A row of the table consists of one or more data items, which, when stacked vertically become the columns of the table. They are enclosed within table data [td] tags:
4. All of the above elements, when combined, form a table.
Example:
5. Multiple data items may be strung together to form rows:
Example:
6. Multiple rows may be stacked vertically to form columns:
Example:
7. By stringing and stacking, the table takes it's familiar form:
Example:
That is all there is to the basic table. Next we will discuss exceptions and tweaking appearances.
C: Extraneous material between table elements is ignored:
Whitespace—spaces & lines—between tags is ignored, as well as extraneous text.
1. Vertical whitespace
Example:
2. Vertical extraneous text:
Example:
3. Horizontal whitespace - This code has five spaces between the [td] tags; only two are visible here, but all five are present in the code and the example:
Example:
4. Horizontal extraneous text
Example:
D: How to embed author comments in a table:
The above extraneous text behavior could be used to the author's advantage by allowing inclusion of comments in the table that will be invisible to the reader. To ensure that these comments never get confused with actual table text by the author, good practice is to prefix such comments with "Comment:":
Example:
E: How to insert space between elements of a table:
1. Rows - To put space between rows, insert almost-empty rows. Note a truly empty row&#mdash;no data items or empty data items—is ignored and does nothing; the row must include at least one data item containing at least one character. The HTML zero width-non-joiner-character—typed zwnj;—is ideal for this purpose, because it does nothing, is invisible but does dispel emptiness.
Example:
The resulting space is a full-height row, so it may not be visually pleasing. Another technique is to increase the size of an existing row, which will be covered later.
2. Columns - To put space between columns, insert an empty data item in the row. A truly empty data item works fine.
Example:
Putting whitespace at the end of a data item is usually sufficient for good visual separation between columns, so inserting empty columns is not necessary. This technique will be covered later.
F: Headers:
A header is a row like any other row (typically Row 1) containing the names of the columns to act as labels for the reader.
Example:
To improve readability, the header may be treated with font effects.
1. Bolding - Enclose the text in [b] tags within each data item:
Example:
2. Underlining - enclose the text within [u] tags:
Example:
3. A combination of the 1 & 2, above:
Example:
Opinion: The underline looks best, because the line separates the header text from the data of the table.
G: How to control spacing (horizontal whitespace):
1. For a table of a single row, the space for data items expands and shrinks with the size of the item; the table box conforms to the data.
Example:
2. For a table of multiple rows, all of the rows of the column expand to the width consumed by the widest data item, that is, the entire column will be as wide as the widest item.
Example:
3. To exert positive control over column widths, the data items of the header row are used to set the column widths; they are set so that they are always wider than those of the other rows. They are adjusted by varying the number of text characters in each item in such a way that it will not disturb the labels. This is done by using the underline character to add width to an underlined label.
Example:
By adding or subtracting underlines from one side or the other of the header label, the label can be positioned laterally within the header as desired, independently of the rest of the table:
Example:
H: Font effects within data items:
Forum font effects can be used inside data items.
Example:
More about this is available here: proboards.com/user-guide/posting/styling
I: Links in data items:
1. Links are created by enclosing a site's URL within the [url] tags.
Example:
2. URLs may be abbreviated a bit if room within a row is at a premium.
Example:
Try them; they all work. CAUTION: Removing the www will not usually make a difference, but it is up to the Website; rarely, some will not work without it.
3. There is no way to hide the URL as in an HTML anchor tag. However it's visibility can be reduced by making the background color the same as the font and by reducing the font size.
Example:
[/color][/size][/a][/td][/tr]
[/table]
J:
MORE TOMORROW
Backup file: HFW_tables_YYYYMMDD.txt
THIS TOPIC IS UNDER CONSTRUCTION as of 28 June.
A: General:
A table is a framework to hold text and other content in boxes, which can be stacked both vertically and horizontally. A table makes it easier for the reader to make sense of multiple pieces of data that have some common aspects. The author encloses the data in UBBC tags and the forum draws the boxes and stacks them.
Tables can be placed anywhere in a post and need not be symmetrical, that is, you could have more columns in one row than another (but it might not look good).
B:
From time to time, you should save the text of your post to an off-forum place in case ProBoards servers die:
1. On the post to be backed up, click Modify to open the edit dialog box
2. Highlight the text in the box ([Ctrl-a])
3. Copy it to the Windows clipboard ([Ctrl-c])
4. Paste it to a Notepad/Wordpad/Word file ([Ctrl-v]) with word wrap turned off.
5. Save the file as a text (.txt) file (vs. .rtf, .doc, etc.)
For the above method to save everything, all of the text must be that which can be typed on the keyboard by using single keystrokes with the exception of the use of [Shift] and [Caps Lock] keys. Don't enter any characters that require the use of the [Alt] key, widgets or other tricks, because the saving program won't accept them in a simple paste.
To do a restore, open the saved file and reverse the process, pasting the text back into the forum dialog box.
Method of Creating and Entering
Normally, a topic message (whether an OP or a reply) is typed into the dialog box that results from clicking the Create Thread or Reply buttons. Later the content may be revised within the dialog box produced by use of the Edit button. In other words, all entry was done using the features of the forum. Now, because of the action of the v5 forum software, it is easier to do this offline.
To create a table, type into a simple text editor and paste the results into a forum message dialog box:
1. Open a MS Notepad (or other equivalent text editor program) to a blank page.
2. Enter the markup for the table.
3. Turn off word wrap (if used) and save the file as a .txt file to some off-forum device as a backup and to eliminate any formatting.
4. Select the file's entire text ([Ctrl-A]).
4. Copy the text to the clipboard ([Ctrl-C]).
5. Paste the clipboard to a forum blank message dialog box ([Ctrl-V]).
6. Click Save Changes to save the message content.
7. Press [F5} to refresh the screen and view the message.
To revise the table, edit the .txt file instead of the forum message and paste the revised file into the message:
1. Open the .txt file containing the table markup with a text editor.
2. Make the necessary changes.
3. Save the revised .txt file as a backup.
4. Click the Edit button on the message to be revised to open the dialog box.
5. Select the entire message [Ctrl-A].
6. Press [Delete] to delete the entire message.
7. Open the .txt file with the editor.
8. Select the entire text ([Ctrl-A]).
8. Copy the file to the clipboard ([Ctrl-C]).
9. Paste the clipboard to the blank message dialog box ([Ctrl-V}).
10. Click Save Changes to save the revised message content.
11. Press [F5} to refresh the screen and view the revised message.
Code boxes show the UBBC markup that are behind the examples which follow them.
B: Constructing a table:
A table is formed by enclosing your data text in UBBC tags within the table's elements of rows, columns and the table as a whole.
1. A table is enclosed in [table] tags:
[table]
The body of the table goes here.
[/table]
2. A row in the table is enclosed within table row [tr] tags:
[table]
[tr]<---A row of the table goes here--->[/tr]
[/table]
3. A row of the table consists of one or more data items, which, when stacked vertically become the columns of the table. They are enclosed within table data [td] tags:
[table]
[tr][td]<---A column data item goes here--->[/td][/tr]
[/table]
4. All of the above elements, when combined, form a table.
Example:
| This is a minimal table. |
5. Multiple data items may be strung together to form rows:
[table]
[tr][td]Column 1[/td][td]Column 2[/td][td]Column 3[/td][/tr]
[/table]
Example:
| Column 1 | Column 2 | Column 3 |
6. Multiple rows may be stacked vertically to form columns:
[table]
[tr][td]Row 1[/td][/tr]
[tr][td]Row 2[/td][/tr]
[tr][td]Row 3[/td][/tr]
[/table]
Example:
| Row 1 |
| Row 2 |
| Row 3 |
7. By stringing and stacking, the table takes it's familiar form:
[table]
[tr][td]Row 1, Column 1[/td][td]Row 1, Column 2[/td][td]Row 1, Column 3[/td][/tr]
[tr][td]Row 2, Column 1[/td][td]Row 2, Column 2[/td][td]Row 2, Column 3[/td][/tr]
[tr][td]Row 3, Column 1[/td][td]Row 3, Column 2[/td][td]Row 3, Column 3[/td][/tr]
[/table]
Example:
| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
| Row 3, Column 1 | Row 3, Column 2 | Row 3, Column 3 |
That is all there is to the basic table. Next we will discuss exceptions and tweaking appearances.
C: Extraneous material between table elements is ignored:
Whitespace—spaces & lines—between tags is ignored, as well as extraneous text.
1. Vertical whitespace
[table]
[tr][td]Row 1, before the whitespace[/td][/tr]
[tr][td]Row 2, after the whitespace[/td][/tr]
[/table]
Example:
| Row 1, before the whitespace |
| Row 2, after the whitespace |
2. Vertical extraneous text:
[table]
[tr][td]Row 1, before extraneous text[/td][/tr]
This is extraneous text
[tr][td]Row 2, after extraneous text[/td][/tr]
[/table]
Example:
| Row 1, before extraneous text |
| Row 2, after extraneous text |
3. Horizontal whitespace - This code has five spaces between the [td] tags; only two are visible here, but all five are present in the code and the example:
[table]
[tr][td]Column 1, before the whitespace[/td] [td]Column 2, after the whitespace[/td][/tr]
[/table]
Example:
| Column 1, before the whitespace | Column 2, after the whitespace |
4. Horizontal extraneous text
[table]
[tr][td]Column 1, before the extraneous text[/td]Extraneous text[td]Column 2, after the extraneous text[/td][/tr]
[/table]
Example:
| Column 1, before the extraneous text | Column 2, after the extraneous text |
D: How to embed author comments in a table:
The above extraneous text behavior could be used to the author's advantage by allowing inclusion of comments in the table that will be invisible to the reader. To ensure that these comments never get confused with actual table text by the author, good practice is to prefix such comments with "Comment:":
[table]
[tr][td]Row 1, Column 1[/td]Comment: This is a comment about Row 1, Column 1[td]Row 1, Column 2[/td]Comment: This is a comment about Row 1, Column 2[/tr]
Comment: This is a comment about Row 1.
[tr][td]Row 2, Column 1[/td]Comment: This is a comment about Row 2, Column 1[td]Row 2, Column 2[/td][/tr]
Comment: This is a comment about Row 2.
[/table]
Example:
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
E: How to insert space between elements of a table:
1. Rows - To put space between rows, insert almost-empty rows. Note a truly empty row&#mdash;no data items or empty data items—is ignored and does nothing; the row must include at least one data item containing at least one character. The HTML zero width-non-joiner-character—typed zwnj;—is ideal for this purpose, because it does nothing, is invisible but does dispel emptiness.
[table]
[tr][td]Row 1[/td][/tr]
[tr][td][/td][/tr]
[tr][td]Row 2[/td][/tr]
[/table]
Example:
| Row 1 |
| |
| Row 2 |
The resulting space is a full-height row, so it may not be visually pleasing. Another technique is to increase the size of an existing row, which will be covered later.
2. Columns - To put space between columns, insert an empty data item in the row. A truly empty data item works fine.
[table]
[tr][td]Column 1[/td][td][/td][td]Column 2[/td][/tr]
[/table]
Example:
| Column 1 | Column 2 |
Putting whitespace at the end of a data item is usually sufficient for good visual separation between columns, so inserting empty columns is not necessary. This technique will be covered later.
F: Headers:
A header is a row like any other row (typically Row 1) containing the names of the columns to act as labels for the reader.
[table]
[tr][td]Animal[/td][td]Breed[/td][/tr]
[tr][td]Dog[/td][td]Poodle[/td][/tr]
[tr][td]Cat[/td][td]Tabby[/td][/tr]
[/table]
Example:
| Animal | Breed |
| Dog | Poodle |
| Cat | Tabby |
To improve readability, the header may be treated with font effects.
1. Bolding - Enclose the text in [b] tags within each data item:
[table]
[tr][td][b]Animal[/b][/td][td][b]Breed[/b][/td][/tr]
[tr][td]Dog[/td][td]Poodle[/td][/tr]
[tr][td]Cat[/td][td]Tabby[/td][/tr]
[/table]
Example:
| Animal | Breed |
| Dog | Poodle |
| Cat | Tabby |
2. Underlining - enclose the text within [u] tags:
[table]
[tr][td][u]Animal[/u][/td][td][u]Breed[/u][/td][/tr]
[tr][td]Dog[/td][td]Poodle[/td][/tr]
[tr][td]Cat[/td][td]Tabby[/td][/tr]
[/table]
Example:
| Animal | Breed |
| Dog | Poodle |
| Cat | Tabby |
3. A combination of the 1 & 2, above:
[table]
[tr][td][u][b]Animal[/b][/u][/td][td][u][b]Breed[/b][/u][/td][/tr]
[tr][td]Dog[/td][td]Poodle[/td][/tr]
[tr][td]Cat[/td][td]Tabby[/td][/tr]
[/table]
Example:
| Animal | Breed |
| Dog | Poodle |
| Cat | Tabby |
Opinion: The underline looks best, because the line separates the header text from the data of the table.
G: How to control spacing (horizontal whitespace):
1. For a table of a single row, the space for data items expands and shrinks with the size of the item; the table box conforms to the data.
[table]
[tr][td]Small[/td][td]L---a---r---g---e[/td][/tr]
[table]
Example:
| Small | L---a---r---g---e |
2. For a table of multiple rows, all of the rows of the column expand to the width consumed by the widest data item, that is, the entire column will be as wide as the widest item.
[table]
[tr][td]Small[/td][td]Small[/td][td]Small[/td][td]Small[/td][td]Small[/td][/tr]
[tr][td]Small[/td][td]Medium[/td][td]Small[/td][td]Small[/td][td]Small[/td][/tr]
[tr][td]Small[/td][td]Small[/td][td]L--a--r--g--e[/td][td]Small[/td][td]Small[/td][/tr]
[tr][td]Small[/td][td]Small[/td][td]Small[/td][td]Small[/td][td]J---u---m---b---o[/td][/tr]
[/table]
Example:
| Small | Small | Small | Small | Small |
| Small | Medium | Small | Small | Small |
| Small | Small | L--a--r--g--e | Small | Small |
| Small | Small | Small | Small | J---u---m---b---o |
3. To exert positive control over column widths, the data items of the header row are used to set the column widths; they are set so that they are always wider than those of the other rows. They are adjusted by varying the number of text characters in each item in such a way that it will not disturb the labels. This is done by using the underline character to add width to an underlined label.
[table]
[tr][td]_[u]Hdr 1[/u]_[/td][td]__[u]Hdr 2[/u]__[/td][td]____[u]Hdr 3____[/u][/td][td]______[u]Hdr 4[/u]______[/td][td]_[u]Hdr 5[/u]_[/td][/tr]
[tr][td]Small[/td][td]Small[/td][td]Small[/td][td]Small[/td][td]Small[/td][/tr]
[tr][td]Small[/td][td]Medium[/td][td]Small[/td][td]Small[/td][td]Small[/td][/tr]
[tr][td]Small[/td][td]Small[/td][td]L--a--r--g--e[/td][td]Small[/td][td]Small[/td][/tr]
[tr][td]Small[/td][td]Small[/td][td]Small[/td][td]J---u---m---b---o[/td][td]Small[/td][/tr]
[/table]
Example:
| _Hdr 1_ | __Hdr 2__ | ____Hdr 3____ | ______Hdr 4______ | _Hdr 5_ |
| Small | Small | Small | Small | Small |
| Small | Medium | Small | Small | Small |
| Small | Small | L--a--r--g--e | Small | Small |
| Small | Small | Small | J---u---m---b---o | Small |
By adding or subtracting underlines from one side or the other of the header label, the label can be positioned laterally within the header as desired, independently of the rest of the table:
[table]
[tr][td][u]Left Label[/u]______[/td][td]___[u]Center Label[/u]___[/td][td]______[u]Right Label[/u][/td][/tr]
[tr][td]Data 1[/td][td]Data 2[/td][td]Data 3[/td][/tr]
[/table]
Example:
| Left Label______ | ___Center Label___ | ______Right Label |
| Data 1 | Data 2 | Data 3 |
H: Font effects within data items:
Forum font effects can be used inside data items.
[table]
[tr][td][u]Underline[/u][/td][td][b]Bold[/b][/td][td][i]Italics[/i][/td][td][size=1]Size[/size][/td][td][color=red]Color[/color][/td][td]Super[sup]Superscript[/sup][/td][td]Sub[sub]Subcript[/sub][/td][td][s]Strikeout[/s][/td][td][tt]Teletype[/tt][/td][[td][move]Marquee[/move][/td][/tr]
[/table]
Example:
| Underline | Bold | Italics | Size | Color | SuperSuperscript | SubSubcript | Teletype |
More about this is available here: proboards.com/user-guide/posting/styling
I: Links in data items:
1. Links are created by enclosing a site's URL within the [url] tags.
[table]
[tr][td][url]http://www.youtube.com/watch?v=ctJJrBw7e-c[/url]
[/table]
Example:
2. URLs may be abbreviated a bit if room within a row is at a premium.
[table]
[tr][td]This link is normal:[/td][/tr]
[tr][td][url]http://www.youtube.com/watch?v=ctJJrBw7e-c[/url][/td][/tr]
[tr][td]This link has had the protocol (http://) omitted:[/td][/tr]
[tr][td][url]www.youtube.com/watch?v=ctJJrBw7e-c[/url][/td][/tr]
[tr][td]This link has had the www omitted:[/td][/tr]
[tr][td][url]youtube.com/watch?v=ctJJrBw7e-c[/url][/td][/tr]
[/table]
Example:
| This link is normal: |
| www.youtube.com/watch?v=ctJJrBw7e-c |
| This link has had the protocol (http://) omitted: |
| www.youtube.com/watch?v=ctJJrBw7e-c |
| This link has had the www omitted: |
| youtube.com/watch?v=ctJJrBw7e-c |
Try them; they all work. CAUTION: Removing the www will not usually make a difference, but it is up to the Website; rarely, some will not work without it.
3. There is no way to hide the URL as in an HTML anchor tag. However it's visibility can be reduced by making the background color the same as the font and by reducing the font size.
[table]
[tr][td][size=1][color=white][url]youtube.com/watch?v=ctJJrBw7e-c[/color][/size][/url][/td][/tr]
[/table]
Example:
| [a href="youtube.com/watch?v=ctJJrBw7e-c"]youtube.com/watch?v=ctJJrBw7e-c |
[/table]
J:
MORE TOMORROW
Backup file: HFW_tables_YYYYMMDD.txt
