**This topic is best viewed at 1280 X 800 resolution or greater.**

This topic is a tutorial on Easy Tables and Grids.  This was written up by me per requests starting about message no. 245 in the topic linked below:

link to a message in another game

NOTE:  I decided to post what I have so far since this is blossoming into something of an undertaking.  I started from the "bare metal" basics.

UPDATE - 26 May 2019:  New section on variable column width HTML wrapper tables added.  Commitment made to add a second character sheet example using this method.

I welcome feedback and any insights in rMail, please.  Let's not clutter this topic with commentary just yet, please.

The tutorial, as it stands presently, consists of the following sections:

• ESSENTIAL CODE ELEMENTS - the symbols used to create simple tables and how to use them
• SIMPLE GRIDS - shows the basic grid square symbols and how to form grids using them.
• TABLE FORMATTING ELEMENTS - lists the symbols used to mark up the various formats that can be used in tables and grids.
• GRIDS USING SMALLER SQUARES - how to create grids using squares smaller than the default size.  Also covers the effects of too much data in a square.
• GRIDS USING LARGER SQUARES - how to create grids using squares larger than the default size.
• INTERMEDIATE LEVEL TECHNIQUES - introduces more complex tables using the basic code elements already introduced, adding examples of column spans.
• SPANNING COLUMNS - explores how to design tables with cells that span more than one column.
• COMBINED FORMATS AND SPACING - examines use of white space and effects it can have on formatting commands in an Easy Table.
• SPANNING ROWS IN A SINGLE COLUMN - explores how basic row spans work.
• COMBINING ROW AND COLUMN SPANS - putting column and row spans together in your tables.
• ADVANCED TECHNIQUES:  PART ONE - how to use \n (the newline escape sequence) to break lines of text within a cell or span of cells.
• ADVANCED TECHNIQUES:  PART TWO - how to use   to pad and indent text within a cell.
• ADVANCED TECHNIQUES:  PART THREE - how to use | to display a pipe symbol ( | ) within a table cell or grid square without affecting the table code's output.
• ADVANCED TECHNIQUES:  PART FOUR - explores using an HTML wrapper table to constrain an Easy Table or Grid to a physical (pixel) width.
• ADVANCED TECHNIQUES:  PART FIVE - extends the previous section to use more complex HTML wrapper tables to display Easy Tables/Grids in a side-by-side format.
• ADVANCED TECHNIQUES:  PART SIX - explores using an HTML wrapper table to constrain an Easy Table or Grid to a physical (pixel) width.
• ADVANCED TECHNIQUES:  PART SEVEN - A brief exploration of a new technique involving variable width columns in an HTML Wrapper Table (Thank you, Escribblings.).
• ADVANCED TECHNIQUES:  PART EIGHT - Another rather over-tricked character sheet creation example using the variable width columns technique introduced in Part Seven.
• ADVANCED TECHNIQUES:  PART NINE -  A new technique using an HTML wrapper to vary border widths for tables and grids, including not displaying them at all.

Some Style Notes:

Code Examples:  These will be shown in Monotype font since this lines up neatly and makes it clear what is example code in the text.  Whether or not you use Monotype in your own code, it will still work the same way.

Use of White Space:  I use white space where it may not strictly be needed just to keep things neat and easier to read.  There are places where white space is a bad thing.  These will be pointed out as they occur in the topics of this tutorial, along with examples of what happens if a stray white space does occur where it should not.

Coding Style  In my own Easy Tables & Grids, I try to code for ease of use, readability, and maintainability.  I also tend to build stuff that can be modular and cut/copy/paste reusable.  For this reason, I do not always code stuff in the briefest way possible.

---

I am now working on the Advanced Sections of this tutorial, and welcome any feedback, especially as new methods and practices are discovered, tested, and published.
This message was last edited by the user at 09:43, Fri 26 July 2019.

ESSENTIAL CODE ELEMENTS FOR EASY TABLES:

RETURN TO THE TOP
GO TO THE NEXT SECTION

For making Easy Tables, there are two symbols used to form the most basic table elements:

  |  (pipe)
  -  (minus or hyphen)

How these are combined govern how tables appear in a message.  To create a basic table with one row of three cells, your code should look something like:

| Cell 1 | Cell 2 | Cell 3 |
|

The pipe symbol on the second line acts to trigger the system to display this code as a table.  This trigger is necessary for a table with only one row to display properly.  This example will appear in a post or other RPoL document as:


Here's how it looks without the pipe in the second row:

| Cell 1 | Cell 2 | Cell 3 |

HEADERS:

Since tables usually run across multiple columns and rows, and can use headers to identify data in cells below them, now would be a good time to build a simple table with some headers:

| Header 1 | Header 2 | Header 3 |
|-

would appear as:


Note in the above example that the |- is enough to trigger the entire line above it to be displayed in header format:  a colored background with bold print center aligned.  The default colors for the font and background vary per the theme  settings in User Preferences.  This means someone else may not see the same colors as the creator of a particular table does.

Trailing (end-of-line) pipe symbols are optional.  Thus:

| Header 1 | Header 2 | Header 3   <-- Note no pipe symbol to end the line!
|-

should produce the same output as the above:


One could actually use just these two symbols to build a useful table:


| Header | Header | Header |
|--------|--------|--------|
| Cell 1 | Cell 2 | Cell 3 |

would appear as:


and...

| Header | Header | Header |
|-
| Cell 1 | Cell 2 | Cell 3 |

Would appear the very same:


Note that no trailing line with a pipe symbol is required for multi-row tables such as these.  The trigger is already present with the creation of the second row.

This table could also be coded without white space as:

|Header|Header|Header|   <--Note there is no white space in this row.
|-                          (at least none that is not part of the data...)
|Cell 1|Cell 2|Cell 3|   <--Nor is there any in this row.


which looks the same as the previous two examples.

SETTING COLUMN WIDTHS:

One might wonder why would it profit to include all those extra characters if |- gets the job done?  There is an alternate format:

| Header | Header | Header |50%
|50%-----|30%-----|20%-----|
| Cell 1 | Cell 2 | Cell 3 |

which causes the individual columns to be set to widths which are percentages of the overall table width (which, in this instance is also constrained to a percentage of the message frame width).  This yields:


General rules for setting column widths as percentages of table width:

• If fuller control of overall table width is desired, first specify a percentage value at the end of the first line of table code.  This sets the overall table width as a percentage of the message frame's width.
• Whether an overall table width is specified or not, the total of column width percentages specified should add up to 100% (of the table's constrained width).

Note that if the overall table width is not specified, the coder has no control over what width is displayed:

| Header | Header | Header |
|-50%----|-30%----|-20%----|
| Cell 1 | Cell 2 | Cell 3 |

yields:


As a working theory, this width appears to be governed by the size of the least width needed to properly display the contents of the longest data string in narrowest column. I haven't experimented that far with it yet, so it's just a theory.

In the next section we explore how to make simple grids.

RETURN TO THE TOP
GO TO THE NEXT SECTION
This message was last edited by the user at 21:08, Sun 19 May 2019.

SIMPLE GRIDS:

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

A minimal grid box consists of the following:


+--+
|  |
+--+

Note that + symbols are used to set the boundaries of a grid, and that at least two - symbols are needed for the grid to properly display:


Just to illustrate, using one - instead of two:

+-+
| |
+-+

yields:

+-+
| |
+-+

which does not look anything like the previous grid box.

To build a larger grid with more squares, proceed as shown below:

+--+
| | | | | | | | |
| | | | | | | | |
| | | | | | | | |
| | | | | | | | |
| | | | | | | | |
+--+

or, eliminating white space:

+--+
|||||||||
|||||||||
|||||||||
|||||||||
|||||||||
+--+

Both of these will yield:


More interesting grid boxes can be produced by adding formatting symbols.  We will explore this in a later topic, after these symbols are introduced.

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 21:12, Sun 19 May 2019.

TABLE FORMATTING ELEMENTS

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

The basic elements, ( + - and | ) already discussed can be used to create cells, header cells, and grids as already shown.

The following symbols may be used within tables and grids to specify formatting or other attributes by cell or by row.  These must occur right after the pipe symbol that forms the left-hand boundary of a cell:

• !   denotes a header cell
• !!  denotes the rest of the row from that point and to the right are header cells.
• =   denotes a shaded cell (one with the same background as a header cell)
• ^   indicates the content of a cell should be aligned centered within it.
• >   indicates the content of a cell should be aligned to the right side of it.
• <   indicates the content of a cell should be aligned to the left side of it.
• C   where C is a whole number, indicates a cell should span that many columns in the table
• C.R where C and R are digits separated by a period or full stop, indicates a cell will span C columns and R rows.
• W%  where W is a whole number from 1 to 99, indicates the cell (and, thus, its column) width as a percentage of the table's overall width.

If W% is specified at the end of the first row of a table, it constrains the entire table to the specified percentage of frame or screen width.

NOTE:  A width constrained in this way will vary depending on the display and video settings of the system on which it is being viewed.  Much further on we will discuss how to constrain a table to a specified number of pixels, which gives greater control over how a table is viewed by different systems.

Example:

| Header | Header | Header |50%
|--------|--------|--------|
| Cell 1 | Cell 2 | Cell 3 |

would display as:


FORMATTING GRID SQUARES:

The formatting characters already discussed can also be used within grid squares without any effect on the size of the squares with one notable exception:  the symbol !! which makes the rest of a table row into header cells does not work the same way in a grid!

From this it seems the best style to pursue with regard to grids is to format squares in a grid individually.  It would also seem wise to avoid any cell or row spanning, or width constraints (of the type C, C.R, or W%) when using grids as they have their own unique size formatting, as will be seen in later topics.

Grids with squares of this default size can be extended indefinitely and given headers and other formatting as shown below:

+--+
|  |!1 |!2 |!3 |!4 |!5 |!6 |
|!1|   |   |   | * |   |   |
|!2| <Rose>*</Rose> |   |=* |   |   |   |
|!3| * | <Aqua>*</Aqua> |   |   | <Red>*</Red> |   |
+--+

Would yield:


This possibly has uses as a sort of star map?  The above grid was "drawn" in text first, then allowed to extend as formatting characters were added.  Experimentation has shown that the practical limit for non-formatting text in a given grid square of this size is three characters or possibly four <small> characters, depending on which characters.

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 21:14, Sun 19 May 2019.

GRIDS USING SMALLER SQUARES:

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

To make a smaller grid square than in the previous examples, try:

+-1-+
|   |
+---+

which yields:


This small grid can be extended by adding additional lines:

+-1-+
| | | | |
| | | | |
| | | | |
| | | | |
+---+

yields:


More rows of | and more | in each row will extend this grid indefinitely.

Note in the previous example the top and bottom rows only need the minimum of symbols to act as boundaries for the entire grid.

Small grid squares may contain brief headers and up to two characters of (non-formatting) data:


+-1-+
|  |!a|!b |!c  |
|!1|x |q  |Z1  |
|!2|A1|=B2|=C3 |
|!3|  |   |    |
+---+

yields


Note that using !! in the first cell to format that row as headers does not work as one might expect in a grid.  Use the method shown above to create a header row for any grids you create.

There are some rules that should be observed:

1.) Whitespace:  No spaces should precede formatting characters or intervene in them within a cell.  Spaces which trail a formatting character are ignored, as are those which trail the last non-space data character.

2.) Data Length:  As noted earlier, small grid squares can only house two characters of actual data (that not used to format the square).  Going beyond this will cause cells containing such data to expand to fit the data with possibly unexpected/undesirable effects.  Even using the <small> formatting attribute is of no avail.  Here's a table:


Please Note:  This table is a result of experimentation using two displays, one at 1920 X 1080 resolution, and the other at 1600 X 900.  These results would seem to indicate that display resolution is not a factor here.

The next section will deal with the creation of grids with larger squares.

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 00:18, Mon 26 Aug 2019.

GRIDS USING LARGER SQUARES:

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

Just as:

+-1-+
|   |
+---+

yields:


so using a larger number produces larger squares:


+-2-+
|   |
+---+

yields:


Which is the same as the default size (for those who like to know such stuff).  We'll take a shortcut from here to size 5.


+-5-+
|   |
+---+

yields:


This is the largest grid square an Easy Grid can produce.  Extending a grid of a particular size follows much the same rules as any other grids already discussed.  Here we use size 3 squares with ! and = formatting of individual squares to simulate part of a chess board:

+-3-+
|   |!1 |!2 |!3 |!4 |!5 |
|!1 |=R | N |=B | K |=Q |
|!2 | P |=P | P |=P | P |
|!3 |=  |   |=  |   |=  |
|!4 |   |=  |   |=  |   |
|!5 |=  |   |=  |   |=  |
+---+

yields:


All this has been done just using the basic symbols  already introduced.  In the next section, we deal with tables that use column and row spanning and other more intermediate level techniques.

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 02:46, Mon 27 May 2019.

INTERMEDIATE LEVEL TECHNIQUES:

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

So far we've covered use of the basic formatting symbols well enough for all practical purposes.  The items we haven't covered yet are:

• C   where C is a whole number, indicates a cell should span that many columns in the table
• C.R where C and R are digits separated by a period (full stop), indicates a cell will span C columns and R rows.
• W%  where W is a whole number from 1 to 99, indicates the cell (and, thus, its column) width as a percentage of the table's overall width.

SETTING COLUMN WIDTHS, PART TWO:

Let's start with a fairly basic table (constrained to 60% of the frame's width for easier viewing):


|!! Column A | Column B | Column C | Column D |60%
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |


which yields:


Now let's use our W% form to alter the column widths for this table:


|!!  Column A   |    Column B |    Column C |    Column D |60%
|30% Cell 1     |20% Cell 2   |20% Cell 3   |30% Cell 4   |
|    Cell 2-1   |    Cell 2-2 |    Cell 2-3 |    Cell 2-4 |
|    Cell 3-1   |    Cell 3-2 |    Cell 3-3 |    Cell 3-4 |


yields:


Note that the total of the various percentages used in each column must add up to 100%, not the 60% to which the entire table is constrained.  That's because the columns are sized as percentages of the overall table size.  Note also that this method of setting column widths is exactly equivalent to the one shown earlier which uses the divider line (|W1%-------|W2%-------|, etc) form shown earlier.

The whitespace in the second and third rows is there just to keep the code neat - it is ignored in the processing of those cells.

Remember:  Spaces in the wrong places, e.g., in front of cell formatting code, can have undesirable effects.


|!!  Column A   |    Column B |    Column C |    Column D |60%
|30% Cell 1     |20% Cell 2   |20% Cell 3   | 30% Cell 4  |   <--Note the space
|    Cell 2-1   |    Cell 2-2 |    Cell 2-3 |    Cell 2-4 |      before "30%".
|    Cell 3-1   |    Cell 3-2 |    Cell 3-3 |    Cell 3-4 |


The formatting characters 30% have been ignored, so why is the column still the same width?  It is because the other three columns were still formatted (to a total of 70% of the table's width, so there was only 30% left.

Note the 30% is now plain text, since there is a preceding space, and it is now displayed as part of the cell contents - there's the undesired effect.

As a matter of style, omitting the last column's width formatting might still work, but will contribute to a less maintainable table going forward.  It would be better to expend the few extra keystrokes to actually specify all columns' widths.  That way "feature creep" should not break the table as it changes.

This basic table will be modified to include cells that span columns in the next section.

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 02:47, Mon 27 May 2019.

INTERMEDIATE TECHNIQUES PART TWO:  SPANNING COLUMNS:

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

Now we will modify this such that the first cell of Row 1 spans two columns, the second cell of Row 2 spans two columns, and the third cell of Row 3 spans two columns, thusly:


|!! Column A | Column B | Column C  | Column D |60%
|2 Cell 1               | Cell 3    | Cell 4   |
| Cell 2-1   |2 Cell 2-2            |  Cell 2-4|
| Cell 3-1   | Cell 3-2 |2 Cell 3-3            |


which yields:


If we want this to look a little "prettier" (and, yes, that's subjective), we might try:


|!! Column A | Column B  | Column C   | Column D |60%
|^2 Cell 1               | Cell 3     | Cell 4   |
| Cell 2-1   |^2 Cell 2-2             | Cell 2-4 |
| Cell 3-1   | Cell 3-2  |^2 Cell 3-3            |


Which will look like this:

---

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 02:48, Mon 27 May 2019.

COMBINED FORMATS AND SPACING:

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

When code combines formatting characters in a cell, it matters not which tag comes first, but there must not be any leading or trailing space between the formatting characters, or the format will not be displayed as intended.  To demonstrate:


|!! Column A | Column B   | Column C    | Column D |60%
|2 ^ Cell 1               | Cell 3      | Cell 4      |  <--intervening space in Cell 1.
| Cell 2-1   | ^2 Cell 2-2              | Cell 2-4    |  <--leading space in Cell 2-2.
| Cell 3-1   | Cell 3-2   |2 ^ Cell 3-3               |  <--intervening space in Cell 3-3.


will yield:


Note the appearance is not as intended previously.  Note especially row two, where there is a leading space in Cell 2-2.  This has caused ALL of the formatting characters to be ignored. Neither the alignment nor the column span is displayed, resulting in an empty "extra cell" in this row.  Spaces in the wrong places can wreak havoc in your table code.  They should be among the first things looked for when debugging a wonky table.

In the next section, we will demonstrate how to code for both column and row spans in cells.

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 02:49, Mon 27 May 2019.

SPANNING ROWS IN A SINGLE COLUMN:

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

Starting with our basic table:

|!! Column A | Column B | Column C | Column D |60%
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |


Let's attempt a row span of three rows in Cell 1.  We will use = and ^ formatting to emphasize spanned cells going forward:


|!! Column A | Column B | Column C | Column D |60%
|=1.3^ Cell 1| Cell 2   | Cell 3   | Cell 4   |
|            | Cell 2-2 | Cell 2-3 | Cell 2-4 |  <--Note empty cells
|            | Cell 3-2 | Cell 3-3 | Cell 3-4 |  <-- in rows 2 and 3...



It would appear the empty cells in Column A rows 2 and 3 (excluding the header row) were pushed to the right instead of being pushed down as one might have expected.  We can keep our columns lined up in the code with whitespace, but those extra | (pipe) symbols have to go!


|!! Column A | Column B | Column C | Column D |60%
|=1.3^ Cell 1| Cell 2   | Cell 3   | Cell 4   |
             | Cell 2-2 | Cell 2-3 | Cell 2-4 |  <-- Now note | missing at left
             | Cell 3-2 | Cell 3-3 | Cell 3-4 |  <-- in rows 2 and 3...


This brings us to two basic rules for using row spans:

• When using row spans, extra | symbols in the spanned area should be eliminated to prevent forming unwanted cells.  (Whitespace may be used so long as no extra pipe symbols are included.)
• Unwanted cells left under a row span will be forced into the columns to the right in the same row, with undesirable consequences for most tables.

Let's go farther.  Adding a span of two rows in Cell 2-2:

|!! Column A | Column B      | Column C | Column D |60%
|1.3^ Cell 1 | Cell 2        | Cell 3   | Cell 4   |
             |=1.2^ Cell 2-2 | Cell 2-3 | Cell 2-4 |
                             | Cell 3-3 | Cell 3-4 |


As before, we eliminated the unused cells which we will be spanning.   All appears well.  Going onward, let's add a span of two rows to Cell 3:

|!! Column A | Column B    | Column C   | Column D |60%
|1.3^ Cell 1 | Cell 2      |=1.2^ Cell 3| Cell 4   |
             |1.2^ Cell 2-2|            | Cell 2-4 |  <--Note Cell 2-3 eliminated
                           | Cell 3-3   | Cell 3-4 |     and whitespace added...




Finally let's add a span of two rows to Cell 2-4.  Proceed as shown:

|!! Column A | Column B    | Column C   | Column D      |E|60%
|1.3^ Cell 1 | Cell 2      |1.2^ Cell 3 | Cell 4        | |
             |1.2^ Cell 2-2|1.2=^         Cell 2-4      | |  <--Whitespace here...
                           | Cell 3-3   |                    <--No right-hand pipe here!
                                                                (This would create
                                                                 an empty cell.)


So far, the only way I've seen to make row spans in Column D successful is to have another "null" row after it.  Whether the flaw exists in the parser or the goofy guy doing the coding (me!) is beyond my present ability to determine with any confidence.  It's sort of gnarly, but it works better than anything I've yet tried.

Our next section will cover how to combine column and row spans, and what to look out for when attempting those ultimate combo moves.

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 02:50, Mon 27 May 2019.

COMBINING COLUMN AND ROW SPANS:

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

So far we've covered basic spans of more than one column or more than one row.  If we combine both of these spans, we must still account for how the rest of the cells in the table might move:

Again, we start with our basic table:

|!! Column A | Column B | Column C | Column D |60%
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |


From here, let's do a 2.2 combined span (two rows and two columns) in Cell 1.  We will use = and ^ formatting going forward to emphasize spanned cells:

|!! Column A | Column B | Column C | Column D |60%
|=2.2^ Cell 1           | Cell 3   | Cell 4   |
                        | Cell 2-3 | Cell 2-4 |  <-- Don't forget to omit the | that starts this row!
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |


If we had desired to preserve the data in the original Cells 2-1 & 2-2 a new row would need to be created:

|!! Column A | Column B | Column C | Column D |60%
|=2.2^ Cell 1           | Cell 3   | Cell 4   |
                        | Cell 2-3 | Cell 2-4 |
| Cell 2-1   | Cell 2-2 |2.1                  |  <-- New Row Three created...
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |


There are other ways to do this, of course.  Bear in mind the rules we developed in the preceding section, and all should go well.  If it does not, take a look at your table as it is, and at your source.  Somewhere a pipe symbol or a space where it shouldn't be will usually be the source of your trouble

Let's next take our original table and do a 2.2 span starting in cell 2-2:

|!! Column A | Column B | Column C | Column D |60%
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   |=2.2^ Cell 2-2       | Cell 2-3 | Cell 2-4 |
| Cell 3-1                         | Cell 3-2 | Cell 3-3 | Cell 3-4 |

Note above @ ^ the omitted pipe symbol.


This code allowed the data to be pushed right, creating extra columns.  If desired, extra headers could be created to accommodate this data better, but the width constraint may need to be adjusted to contain it all properly:

|!! Column A | Column B | Column C | Column D | Column E | Column F |60%
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   |=2.2^ Cell 2-2       | Cell 2-3 | Cell 2-4 |
| Cell 3-1                         | Cell 3-2 | Cell 3-3 | Cell 3-4 |


Notice, please, that our columns are becoming more narrow as we add two more within the 60% constraint previously set.  Note also that creating two more header columns also created empty cells beneath them in rows 1 and 2.  This is normal behavior for Easy Tables.

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 02:59, Mon 27 May 2019.

ADVANCED TECHNIQUES, PART ONE

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

Here we begin to capture some of the techniques discussed in various places about how to do certain things.  Rather than get too much into the history, let us focus on doing.  (I will, of course, try to give proper attribution for these techniques.)

USING ESCAPE SEQUENCES AND/OR ISO CODES IN TEXT:

An escape sequence is a combination of characters representing a character code that is normally not printable, or executes a control function.  An example that springs to mind immediately is:

\n - This represents a newline (aka CRLF or Carriage Return/Line Feed).

From what I can see, the escape sequences used here on RPoL appear similar to those supported by ANSI C, but I can't yet definitely prove it.  That aside, \n was first suggested by jase as a way to inject a line break into text in a cell.

Here's an example:  We start with a variation of our basic table previously used:


We'll replace the text in Cell 1 with something rather long...

|!! Column A | Column B | Column C | Column D |60%
|=2.2^ This text is definitely\ntoo long to fit on one line...| Cell 3   | Cell 4   |
                              | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |

---

Here's a slight twist on this to illustrate a possibly related point:

|!! Column A | Column B | Column C | Column D |60%
|=2.2^ This text is definitely \n too long to fit on one line...| Cell 3   | Cell 4   |
                              | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |


Note how spaces included to set off the \n did not affect the formatting of the text.  From this, we can conclude that adding a space either side to make clearer where this sequence occurs would be good coding style.

---

A final example on this topic, just to prove it can be done, will start with a variant of a much earlier example's table:


Here we insert longer text into Cell 1 using two \n sequences to get two line breaks:

|!! Column A | Column B | Column C | Column D |60%
|=1.3 123456789ABCDEF \n ABCDEFGHIJKLMNOP \n qrstuvwxyzabcde| Cell 2   | Cell 3   | Cell 4   |
             | Cell 2-2 | Cell 2-3 | Cell 2-4 |
             | Cell 3-2 | Cell 3-3 | Cell 3-4 |


So... as general rules:

• Use one less \n than one has rows of cell space to fill with text.  There is one known exception to this, which we will cover below.
• Gauge carefully how much text to permit in a line (see below...)

NOTE:  In the above example, using much more data than would fit resulted in some odd padding of the cell's width.  This, in turn, robbed space from other columns.  This unintended effect should be accounted for in any Easy Table design.
In each individual case, some experimentation may be needful to gain full control over a table's intended layout.  Frequent use of the Preview/delay post feature of the editor will make this easier.  Work with the longest line of text first, and be mindful that CAPITALS will take more room than lower case letters.

The \n sequence can also be used to "top justify" or "bottom justify" a single line in a row-spanned cell, depending on where one places them.  Center justify is the default vertical alignment, so no use of \n is needed to accomplish that.

Examples:

Bottom Aligned Text:

|!! Column A | Column B | Column C | Column D |60%
|=2.2^ \nCell 1         | Cell 3   | Cell 4   |
                        | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |

yields the "centered bottom aligned" text in the spanned Cell 1:


Top Aligned Text:

|!! Column A | Column B | Column C | Column D |60%
|=2.2^ Cell 1 \n \n     | Cell 3   | Cell 4   |    <-- NOTE:  two \n are used!
                        | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |

yields the "centered top aligned" text in the spanned Cell 1:


This seems to break the "one less rule" stated above.

NOTE:  While further experimentation with other control and escape sequences may turn up other useful methods, those have yet to come to my notice.

Our next section deals with using the ISO character code &nbsp.

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 19:57, Fri 16 Aug 2019.

ADVANCED TECHNIQUES, PART TWO:  USING &nbsp;

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

Characters not appearing in the "regular alphanumeric character" set are represented in HTML (and, hence, in RuBB Code so far as I can tell) as Character Entities (abbreviated here as CE). These entities take one of two possible formats:

1. by name, as, for example, &nbsp;, or
   
2. by numeric value, as &#160;      (Note the semicolon at the end is required in either case!)

Both of these CE refer to the non-breaking space.

A good list of the Character Entities in use on RPoL can be found at:  Character Entities List from Heaven - Gaming Resources

Note that using &name; format is generally preferable to &#numeric format;, since the numeric codes on which the latter are based may be interpreted differently depending on which character map a particular system or browser is using.  (Note also that I'm not exactly sure why this is.)

A non-breaking space (aka a hard space or fixed space) is a space character that prevents an automatic line break from occurring at its position.

In HTML (and in RuBB Code) it also prevents consecutive spaces from being collapsed into a single space.  For this reason, it can be useful (as noted by LoreGuard) for indenting and other formatting of data text within cells of a table.  Here's an example:

|!! Column A           | Column B | Column C | Column D |60%
| Cell 1               | Cell 2   | Cell 3   | Cell 4   |
| &nbsp&nbspCell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |    <-- Two hard spaces
| Cell 3-1             | Cell 3-2 | Cell 3-3 | Cell 3-4 |        in Cell 2-1.

this yields:


Care should be taken not to go overboard with this method, else one risks unintended effects:

|!! Column A           | Column B | Column C | Column D |60%
| Cell 1               | Cell 2   | Cell 3   | Cell 4   |
| &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspCell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1             | Cell 3-2 | Cell 3-3 | Cell 3-4 |

this yields:

(previous table shown here below for reference...)

Note the difference in width of Column 1 caused by inserting seven(!) hard spaces as opposed to two of them.  This kind of thing can creep into your tables and cause much head-scratching.  Minimal use of &nbsp to achieve the desired effect without any undesired effects is the way to go here.

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 03:06, Mon 27 May 2019.

DISPLAYING PIPE SYMBOLS INSIDE CELLS OR SPANS:

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

For whatever reason, one might someday wish to display a pipe symbol inside a cell or span without having it affect the containing cell's or table's output.  This can be accomplished by using the Character Entity (CE) &#124;

NOTE:  this is a numeric format CE, and may not produce the same output on all systems or browsers!  It is advised that, when using this technique in a table or grid for one of your games, you ask your players if they are seeing the same thing you are.

NOTE TWO:  The semicolon at the end is required for numeric CE to process correctly!  The correct format for any numeric CE is:  &#(number); where (number) is the character code for that CE.

Let's build a simple table:

| Header 1 | Header 2 | Header 3 |60%
|25%-------|50%-------|25%-------|
|          |          |          |


Now say we had some obscure computer commands in the cell beneath Header 2:

| Header 1 | Header 2                      | Header 3 |60%
|25%-------|50%----------------------------|25%-------|
|          | ifconfig &#124; grep –w “RUN” |          |



Now the Red Clearance Troubleshooters in your Paranoia game can actually see the pipe (used for I/O redirection) in this command that is part of your fiendish puzzle they are so busily engaged in solving (without it creating a new cell in the table!).

A tip o'the hat to Skald for this one!

RETURN TO THE TOP
GOTO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 03:06, Mon 27 May 2019.

CONSTRAINING EASY TABLES BY USING HTML:

RETURN TO THE TOP
GO TO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

The basic concepts behind this section were first mentioned by Escribblings in RPoL Development in the topic on Easy Tables and Grids

The normal way to constrain a table's width in Easy Tables is to use W% at the end of the first line, as shown in the example below:

|!! Column A | Column B | Column C | Column D |60%
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |

which yields:


This technique has certain limitations:

• The W% specification only limits the table to a percentage of frame or message window size.  This size will vary with screen size and resolution.
• Cells in tables so specified will vary in size as the table varies.  This can cause odd wrapping and padding artifacts that can cause unintended effects for an entire table.

To overcome this problem, nest the Easy Table inside an HTML table wrapper.  The wrapper takes the form:

<table width=600><tr><td>
  {insert Easy Table/Grid here}
</td></tr></table>

 as shown in the examples below:

<table width=600><tr><td>                           <-- NO SPACES between width,
|!! Column A | Column B | Column C | Column D |100%     the equal sign, and the
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |         specified width in pixels!
| Cell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |
</td></tr></table>

which displays as:


This will display as the same physical width (the same number of pixels) regardless of frame or display size.

NOTE:  the W% constraint at the end of the Easy Table's header line is changed here from 60% to 100% to ensure this small table will be stretched to fill the width setting used in the HTML wrapper table.  Here's how it looks without the 100% constraint:

<table width=600><tr><td>
|!! Column A | Column B | Column C | Column D |
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |
</td></tr></table>

which displays as:



To experiment with how this will look on different displays, unmaximize your browser window and vary its width.  There will come a point at which the HTML wrapped table's right edge will disappear from view, making it needful to scroll horizontally to see the rest of the table .  This will vary with how many pixels a given display has.  For this reason it is not wise to specify a WIDTH= value that is too high for the intended viewers' systems.

Note:  Using CTRL-PLUS and CTRL-MINUS to zoom the view in a browser will affect the viewed size of an HTML width= constrained table, but in proportion to everything else that gets zoomed.

NOTE ALSO:  The HTML tags must not start on the same line as any part of the Easy Table!  Also note that whitespace rules for HTML are different from those for Easy Tables.

<table width=600><tr><td>

|!! Column A | Column B | Column C | Column D |100%
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |

</td></tr></table>

which has a single blank line between the HTML and the Easy Table at each end, displays as shown below:



This whitespace can be put to use (with certain limitations):


<table width=600><tr><td>
Example:  Wrapping an Easy Table in HTML
|!! Column A | Column B | Column C | Column D |100%
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |
<center>Just a silly example, nothing more</center>
</td></tr></table>


So long as the title text is not centered or otherwise justified by HTML tags, no extra whitespace is needed.



Note that if the title text is placed within <center></center> tags, then a blank line beneath it is required!  Failing to do this will cause a formatting error in the header:


<table width=600><tr><td>
<center>Example:  Wrapping an Easy Table in HTML</center>
|!! Column A | Column B | Column C | Column D |100%
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |
<center>Just a silly example, nothing more</center>
</td></tr></table>




To correct this, simply add a blank line underneath the title text:


<table width=600><tr><td>
<center>Example:  Wrapping an Easy Table in HTML</center>

|!! Column A | Column B | Column C | Column D |100%
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |
<center>Just a silly example, nothing more</center>
</td></tr></table>


This displays as:



There is, for some reason, no need to add whitespace between the Easy Table's end and the start of the text at the bottom of the HTML table.  This likely has something to do with how Easy Tables are parsed by the RPoL system.

In the next section we will explore nesting Easy Tables side-by-side inside a more complex HTML Table.


RETURN TO THE TOP
GO TO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

---

This section also previews some enhanced navigation links... tell me what ya think!
This message was last edited by the user at 03:46, Mon 27 May 2019.

SIDE-BY-SIDE EASY TABLES IN AN HTML WRAPPER

RETURN TO THE TOP
GO TO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

This technique is another contribution from Escribblings first described here.  Let's first consider an example similar to the one posted there.  The HTML "wrapper" table now takes the form:

<table width=600><tr><td>
  {1st Easy Table Here}
</td><td>
  {2nd Easy Table Here}
</td></tr></table>




Comparing this to the example in the previous section will illustrate the width relationships to scale:


<table width=600><tr><td>
|!! Column A | Column B | Column C | Column D |100%
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |
</td></tr></table>

which displays as:



Comparing to an unconstrained Easy Table (one with no W% constraint or HTML width= pixel constraint):


This concept can be extended.  See the example below:

<table width=600><tr><td>
  {1st Easy Table Here}
</td><td>
  {2nd Easy Table Here}
</td><td>
  {3rd Easy Table Here}
</td></tr></table>


yields:



As of this writing, there is no way I know of to use width= parameters to specify cell widths or column widths (using <td width=100> or <colgroup><col width=200>, for example).

Fortunately, once total table width is constrained, Easy Tables may be constructed within those limits which can specify column widths.

RETURN TO THE TOP
GO TO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 20:55, Sun 19 May 2019.

CHARACTER SHEET CREATION EXAMPLE:

RETURN TO THE TOP
GO TO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

In this section, we will walk through building a Classic Traveller character sheet using some of these techniques.  This character will be something of an "Honor Harrington" simply for testing purposes.  You'll see what I mean...

First, set up an HTML wrapper table of the form:

<table width=800><tr><td>

</td></tr></table>

Next, we will insert a title line:

<table width=800><tr><td>
<center><b><i><large>Classic TRAVELLER Character Record</large></i></b></center>

</td></tr></table>

So our character sheet thus far looks like:



The first part of our Easy Table will contain a preamble with such things as the Player's Name, GM's Name, Date of Creation, and so forth (note the added blank line under the title below):

<table width=800><tr><td>
<center><b><i><large>Classic TRAVELLER Character Record</large></i></b></center>

|20= <center><b><i>GAME DATA</i></b></center> |100%
|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|
|2 <i>Player:</i> |4 horus |2 <i>GM:</i> |4 {GM Name here}|4 <i>Creation Date:</i>|4 17 May 2019|
</td></tr></table>

I did a little planning ahead with the "divider row", setting up twenty cells of 5% width each.  This allows some creative use of column spanning later to vary column widths as needed.  Here's how it looks so far:



Next, we will add the Personal Data section.

<table width=800><tr><td>
<center><b><i><large>Classic TRAVELLER Character Record</large></i></b></center>

|20= <center><b><i>GAME DATA</i></b></center> |100%
|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|
|2 <i>Player:</i> |4 horus |2 <i>GM:</i> |4 {GM Name here}|4 <i>Creation Date:</i>|4 17 May 2019|
|=^1 <b><i>UPP:</i></b>   |19=^ <b><i>PERSONAL DATA & HISTORY</i></b> |
|1^ <i>STR</i> |2 <i>Name:</i> |17 Alexandra Louise Jamison, Fleet Admiral, IRN, ret., Dame of the Order of the Imperial Sunburst |
|1^ 6                     |4= <i>Noble Title(s):</i> |=15  Dame of The Order of the Imperial Sunburst|
|1^ <i>DEX</i> |4 <i>Military Rank:</i> |8 Fleet Admiral, Imperial Royal Navy, Retired   |3 <i>Birth Date:</i> |4 30 Oct 1164 |
|1^ 8                     |2 <i>Age Mods:</i> |2 None |3 <i>Birthworld:</i> |12 Regina, Regina Sub, Spinward Marches Sector, Imperium |
|1^ <i>END</i> |19^= <i><b>SERVICE HISTORY:</b></i> |
|1^ A                     |2 <i>Service:</i> |5 Imperial Navy |2 <i>Branch:</i> |5 Naval Intelligence |2 <i>Retired?</i> |3 Yes/No |
|1^ <i>INT</i> |4 <i>Terms Served:</i> |1^ 6|2 <i>Discharged:</i> |12 Elixabeth, District 268, Spinward Marches Sector |
|1^ A                     |3 <i>Final Rank:</i> |9 Fleet Admiral, Imperial Royal Navy, Retired   |3 <i>Retirement Pay:</i> |4 <s>C</s>r 1,000,000 |
|1^ <i>EDU</i> |19^= <i><b>SPECIAL ASSIGNMENTS:</b></i> |
|1^ 9                     |19 Pre-bombardment recon of Glamdring, Nov 1182, Logistical planning for Operation Exeter, others CLASSIFIED |
|1^ <i>SST</i> |19  |
|1^ B                     |19^= <i><b>AWARDS AND DECORATIONS:</b></i> |
|1^ <i>PSI</i> |19 Knight's Cross with Oak Leaf Cluster, Imperial Sunburst for Valor, Glimmerdrift Expeditionary Medal|
|1^ **                    |19 Order of Denbigh, Expert Sharpshooter Badge, Dist. Flying Cross w Oak Leaf Cluster, Order of the Purple Heart.|
</td></tr></table>

Which looks something like this:



Adding the Second Half of the Charcter Sheet

As I was working on the rest of this sheet, I began to notice cell widths were jumping around a bit, making things uneven and ragged looking.  To correct this, I injected a blank line, and restarted the table on the line for EQUIPMENT QUALIFICATIONS with a new 100% value at the end of that row.  I still had to make adjustments and preview (a whole lot!) while building this.  Here's what the completed character sheet's code looks like:

<table width=800><tr><td>
<center><b><i><large>Classic TRAVELLER Character Record</large></i></b></center>

|20= <center><b><i>GAME DATA</i></b></center> |100%
|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|
|2 <i>Player:</i> |4 horus |2 <i>GM:</i> |4 {GM Name here}|4 <i>Creation Date:</i>|4 17 May 2019|
|=^1 <b><i>UPP:</i></b> |19=^ <b><i>PERSONAL DATA & HISTORY</i></b> |
|1^ <i>STR</i> |2 <i>Name:</i> |17 Alexandra Louise Jamison, Fleet Admiral, IRN, ret., Dame of the Order of the Imperial Sunburst |
|1^ 6                     |4= <i>Noble Title(s):</i> |=15  Dame of The Order of the Imperial Sunburst|
|1^ <i>DEX</i> |4 <i>Military Rank:</i> |8 Fleet Admiral, Imperial Royal Navy, Retired   |3 <i>Birth Date:</i> |4 30 Oct 1164 |
|1^ 8                     |2 <i>Age Mods:</i> |2 None |3 <i>Birthworld:</i> |12 Regina, Regina Sub, Spinward Marches Sector, Imperium |
|1^ <i>END</i> |19^= <i><b>SERVICE HISTORY:</b></i> |
|1^ A                     |2 <i>Service:</i> |5 Imperial Navy |2 <i>Branch:</i> |5 Naval Intelligence |2 <i>Retired?</i> |3 Yes/No |
|1^ <i>INT</i> |4 <i>Terms Served:</i> |1^ 6|2 <i>Discharged:</i> |12 Elixabeth, District 268, Spinward Marches Sector |
|1^ A                     |3 <i>Final Rank:</i> |9 Fleet Admiral, Imperial Royal Navy, Retired   |3 <i>Retirement Pay:</i> |4 <s>C</s>r 1,000,000 |
|1^ <i>EDU</i> |19^= <i><b>SPECIAL ASSIGNMENTS:</b></i> |
|1^ 9                     |19 Pre-bombardment recon of Glamdring, Nov 1182, Logistical planning for Operation Exeter, others CLASSIFIED |
|1^ <i>SST</i> |19  |
|1^ B                     |19^= <i><b>AWARDS AND DECORATIONS:</b></i> |
|1^ <i>PSI</i> |19 Knight's Cross with Oak Leaf Cluster, Imperial Sunburst for Valor, Glimmerdrift Expeditionary Medal|
|1^ **                    |19 Order of Denbigh, Expert Sharpshooter Badge, Dist. Flying Cross w Oak Leaf Cluster, Order of the Purple Heart.|

|=^20 <b><i>EQUIPMENT QUALIFICATIONS:</i></b> |100%
|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|-5%-|
|4^ <i>Equipment:</i> |1^ <i>Level:</i> |4^ <i>Equipment:</i> |1^ <i>Level:</i> |4^ <i>Equipment:</i> |1^ <i>Level:</i> |4^ <i>Equipment:</i> |1^ <i>Level:</i> |
|4 {Equip here} |1 {Lv} |4 {Equip here} |1 {Lv} |4 {Equip here} |1 {Lv} |4 {Equip here} |1 {Lv} |
|4 {Equip here} |1 {Lv} |4 {Equip here} |1 {Lv} |4 {Equip here} |1 {Lv} |4 {Equip here} |1 {Lv} |
|4 {Equip here} |1 {Lv} |4 {Equip here} |1 {Lv} |4 {Equip here} |1 {Lv} |4 {Equip here} |1 {Lv} |
|4 {Equip here} |1 {Lv} |4 {Equip here} |1 {Lv} |4 {Equip here} |1 {Lv} |4 {Equip here} |1 {Lv} |
|20=^ <i><b>SKILL INVENTORY:</b></i> |
|10^ <i>PRIMARY SKILL:</i>     |10^ <i>SECONDARY SKILL:</i>  |
|9 {Skill here} |1 {Lv} |9 {Skill here}|1 {Lv} |
|20=^ <b><i>ADDITIONAL SKILLS:</i></b> |
|9 {Skill here} |1 {Lv} |9 {Skill here}|1 {Lv} |
|9 {Skill here} |1 {Lv} |9 {Skill here}|1 {Lv} |
|9 {Skill here} |1 {Lv} |9 {Skill here}|1 {Lv} |
|9 {Skill here} |1 {Lv} |9 {Skill here}|1 {Lv} |
|9 {Skill here} |1 {Lv} |9 {Skill here}|1 {Lv} |
|9 {Skill here} |1 {Lv} |9 {Skill here}|1 {Lv} |
|9 {Skill here} |1 {Lv} |9 {Skill here}|1 {Lv} |
|9 {Skill here} |1 {Lv} |9 {Skill here}|1 {Lv} |
|9 {Skill here} |1 {Lv} |9 {Skill here}|1 {Lv} |
|9 {Skill here} |1 {Lv} |9 {Skill here}|1 {Lv} |
|9 {Skill here} |1 {Lv} |9 {Skill here}|1 {Lv} |
|9 {Skill here} |1 {Lv} |9 {Skill here}|1 {Lv} |
|5 <i>Preferred Weapon:</i>       |15 Dragunov SVD Rifle    |
|5 <i>Preferred Blade:</i>        |15 Muramasa Katana       |
|5 <i>Travellers' Aid Member?</i> |2 Yes/No |2 <i>Chapter:</i> |11 Inhalt Chapter, Regina, Regina, Spinward Marches |
|20^= <i><b>PSIONICS:</b></i> |
|20 <small><i>WARNING:  Data concerning a sophont's psionic ability is confidential medical information, and may not be released without the individual's consent.</i></small> |
|3 <i>Date of Test:</i> |4 12 May 1168 |1 <i>PSI:</i> |1 6 |2 <i>Trained?</i> |1 Yes/No |4 <i>Date Completed:</i> |4 Not Applicable |
|20=^ <i><b>PSIONIC TALENTS:</b></i> |
|9 {Talent here} |1 {Lv} |9 {Talent here}|1 {Lv} |
|9 {Talent here} |1 {Lv} |9 {Talent here}|1 {Lv} |
|9 {Talent here} |1 {Lv} |9 {Talent here}|1 {Lv} |
|9 {Talent here} |1 {Lv} |9 {Talent here}|1 {Lv} |
|9 {Talent here} |1 {Lv} |9 {Talent here}|1 {Lv} |
|9 {Talent here} |1 {Lv} |9 {Talent here}|1 {Lv} |
|9 {Talent here} |1 {Lv} |9 {Talent here}|1 {Lv} |
|9 {Talent here} |1 {Lv} |9 {Talent here}|1 {Lv} |
|=^20 <b><i>NOTES AND REMARKS:</i></b> |
|20 |
|20 |
|20 |
|20 |
|20 |
|20 |
|20 |
|20 |
|20 |
|20 |
|20 |
|20 |
|20 |
|20 |
|20 |
|20 |
|20=^ <i><b>EQUIPMENT & PERSONAL EFFECTS</b></i> |
|10 |10 |
|10 |10 |
|10 |10 |
|10 |10 |
|10 |10 |
|10 |10 |
|10 |10 |
|10 |10 |
|10 |10 |
|10 |10 |
|10 |10 |
|10 |10 |
|10 |10 |
</td></tr></table>

which yields:



The next section will cover a new twist on the side-by-side technique of the previous section.

RETURN TO THE TOP
GO TO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 02:25, Mon 27 May 2019.

ADVANCED TECHNIQUES, PART SEVEN:  USING VARIABLE WIDTH COLUMNS IN HTML

RETURN TO THE TOP
GO TO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This is a variation of the side-by-side technique I could not get working the first time I tried it.  Thankfully, Escribblings could show me how:

(Cribbing unashamedly from Escribblings's rMail to me:)

---

<table width=800>
<tr>
<td width=20%><b>20%</b>
| A      | B      | C       | D
|<10%----|^20%----|30%------|>40%----|100%
| 10%    | 20%    | 30%     | 40%
| Left   | Center | Default | Right
</td>
<td width=30%><b>30%</b>
| A      | B      | C       |^ D
|<10%----|^20%----|30%------|>40%----|100%
| 10%    | 20%    | 30%     | 40%
| Left   | Center | Default | Right
</td>
<td width=50%><b>50%</b>
| A      | B      | C       | D
|<10%----|^20%----|30%------|>40%----|100%
| 10%    | 20%    | 30%     | 40%
| Left   | Center | Default | Right
</td>
</tr>
</table>

---

This code yields a table that looks like:



Let's break this down:

As can be seen, the table construct as a whole is constrained by <table width=800> to an overall width of 800 pixels.

The column widths are set as percentages of the overall width:

<td width=20%> to </td>
<td width=30%> to </td>
<td width=50%> to </td>

where the td in the tag stands for "table division"

SOME <td> TAG STRANGENESS:

From my own readings on the subject, the <td width=xxx> construct is deprecated in HTML 4.0 and later, and while <td width=xx%> (width expressed as a percentage of overall table width) works here on RPoL, <td width=xx> (as a width expressed in pixels) does not.

BUILDING THE EASY TABLES IN EACH TABLE DIVISION:

Each table division holds a separate Easy Table, so it is needful to constrain the width on the first line of each Easy Table to 100% of each HTML table division's width to ensure the Easy Table sizes properly to fill each division.


SO WHAT'S THE POINT OF DOING THIS?

One advantage of this approach is that it gives greater control over how a table construct is laid out.  Another is that the code for the various table divisions can be narrower, more readable, and easier to edit without breaking things.

Another advantage is that it facilitates the construction of sidebars in a table to allow for marginal notes, comments, etc. on a sheet.

In the next section, we will build another character sheet using this method to contrast it with the previous character sheet built in Part Six.

RETURN TO THE TOP
GO TO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 02:27, Mon 27 May 2019.

<quote Chief Tinker>
A VARIABLE COLUMN WIDTH CHARACTER SHEET EXAMPLE:

RETURN TO THE TOP
GO TO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

To contrast with the previous example, we will explore the design and construction of a variable column width HTML-wrapped character sheet, again for Traveller.

To set up the basic HTML wrapper structure, we first need to know what overall width and the number and widths of the various columns we wish to use.  Since most computers and tablets in use on RPoL can display at least 1024 X 600 pixels or better, I am here using an overall width of 800 pixels, which should display without too many problems on most systems.

I wish to divide this width into three columns:  a left-hand column of 15% of the overall width, a middle column of 50% width, and a right-hand column of 35%.  The wrapper table will appear something like:

<table width=800>
    <tr>
        <td width=15%>
            <b>Col. A</b>
        </td>
        <td width=50%>
            <b>Col. B</b>
        </td>
            <td width=35%>
        <b>Col. C</b>
        </td>
    </tr>
</table>



The indenting style I've used here is pretty much standard for HTML and is only for reference. We have labeled the columns A, B, & C solely for identification purposes.  These labels will be deleted as we go forward with the rest of the design.

Here's what the actual code for this looks like (without indenting).

<table width=800>
<tr><td width=15%>
<b>Col. A</b>
</td><td width=50%>
<b>Col. B</b>
</td><td width=35%>
<b>Col. C</b>
</td></tr>
</table>

My intent in this design is to use Column A for numeric data like Characteristics, etc., use Column B for Historical and Service Data, and Use Column C for Skills, Proficiencies, and Equipment.  The table code for Column A is shown below:

<table width=800>
<tr><td width=15%>
|2.1=^ <i><b>UPP</b></i>       |100%
|70%=^ <i>STR</i>    |30%^ 6   |
|70%=^ <i>DEX</i>    |30%^ 8   |
|70%=^ <i>END</i>    |30%^ 8   |
|70%=^ <i>INT</i>    |30%^ A   |
|70%=^ <i>EDU</i>    |30%^ 9   |
|70%=^ <i>SOC</i>    |30%^ B   |
|70%=^ <i>PSI</i>    |30%^ **  |
|2.1                           |
|2.1=^ <b><i>CREDITS:</i></b>  |
|2.1> 1,000,000                |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1! <i>Retired Pay</i>       |
|2.1> 1,000,000                |
|70%= <i>Terms:</i>  |30%^ 6   |
|70%= <i>Retired:</i>|30%^ Yes |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
|2.1                           |
</td><td width=50%>
<b> Column B</b>
</td><td width=35%>
<b> Column C</b>
</td></tr></table>

The blank lines are placeholders which may be spanned or left as-is, depending on how the final design looks.  I may add artwork after the final design is done, I don't really know yet.

Here's the completed character sheet (please quote to see the code):



Once again, I've used the rather over-tricked character used for the previous example. I figure a character this experienced might break a character sheet.

I have refrained from using headings in Column A for data in Column B, as these may not always align correctly.  I find this sheet a whole lot easier to read and to edit.

Tweaks I might make:  Adding artwork, spanning some rows in Column A, maybe shifting some data for Psionics to Column A.

Tell me what you think in rMail, please.

RETURN TO THE TOP
GO TO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last updated by the user at 09:22, Fri 26 July 2019.

CREATING EASY TABLES & GRIDS WITH VARYING BORDER WIDTHS

RETURN TO THE TOP
GO TO THE PREVIOUS SECTION
GO TO THE NEXT SECTION

A new technique using an HTML Wrapper has come to light.  Something like:

<table border="0" width="600">
<tr>
<td>
|!! Column A | Column B | Column C | Column D |100%
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |
</td>
</tr>
</table>

Will yield a table or grid with borders set to a zero thickness, effectively rendering them invisible.



Replacing border="0" in the above with border="1", border="2", or border="3" will cause borders to be expressed as thin, thicker, or thickest.

<table border="1" width="600">
<tr>
<td>
|!! Column A | Column B | Column C | Column D |100%
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |
</td>
</tr>
</table>

will yield:



which shows us that "1" is the default width for borders in an Easy Table.

Similarly:

<table border="2" width="600">
<tr>
<td>
|!! Column A | Column B | Column C | Column D |100%
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |
</td>
</tr>
</table>

gives us:



and

<table border="3" width="600">
<tr>
<td>
|!! Column A | Column B | Column C | Column D |100%
| Cell 1     | Cell 2   | Cell 3   | Cell 4   |
| Cell 2-1   | Cell 2-2 | Cell 2-3 | Cell 2-4 |
| Cell 3-1   | Cell 3-2 | Cell 3-3 | Cell 3-4 |
</td>
</tr>
</table>

displays as:



Just for completeness, let's see what that looks like for grids.

<table border="3" width="280">
<tr>
<td>
+--+
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
+--+
</td>
</tr>
</table>

looks like this:



Source:  jase in the RPoL Development thread about the responsive site, in Message no. 187 (link below).

link to a message in another game

This was in response to some back and forth between Imladir and me about Easy Table/Grid defaults.

This technique is still new enough that more research and experimentation is likely going to happen.  Watch this space!

RETURN TO THE TOP
GO TO THE PREVIOUS SECTION
GO TO THE NEXT SECTION
This message was last edited by the user at 09:48, Fri 26 July 2019.