RolePlay onLine RPoL Logo

, welcome to Technical Discussions

17:36, 28th March 2024 (GMT+0)

Easy Tables and Grids Tutorial (Peer Review Requested)

Posted by horus
horus
member, 693 posts
Wayfarer of the
Western Wastes
Mon 22 Apr 2019
at 09:39
  • msg #1

Easy Tables and Grids Tutorial (Peer Review Requested)

**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:



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.
horus
member, 694 posts
Wayfarer of the
Western Wastes
Mon 22 Apr 2019
at 09:40
  • msg #2

ESSENTIAL CODE ELEMENTS

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:

Cell 1Cell 2Cell 3

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:

Header 1Header 2Header 3

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:

Header 1Header 2Header 3

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:

HeaderHeaderHeader
Cell 1Cell 2Cell 3

and...

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


Would appear the very same:

HeaderHeaderHeader
Cell 1Cell 2Cell 3

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.

HeaderHeaderHeader
Cell 1Cell 2Cell 3

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:

HeaderHeaderHeader
Cell 1Cell 2Cell 3

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:

HeaderHeaderHeader
Cell 1Cell 2Cell 3

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.
horus
member, 695 posts
Wayfarer of the
Western Wastes
Mon 22 Apr 2019
at 09:48
  • msg #3

SIMPLE GRIDS

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.
horus
member, 696 posts
Wayfarer of the
Western Wastes
Mon 22 Apr 2019
at 09:57
  • msg #4

TABLE FORMATTING ELEMENTS

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:

HeaderHeaderHeader
Cell 1Cell 2Cell 3

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:

 123456
1   *  
2* *   
3**  * 

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.
horus
member, 697 posts
Wayfarer of the
Western Wastes
Mon 22 Apr 2019
at 10:14
  • msg #5

GRIDS USING SMALLER SQUARES

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

 abc
1xqZ1
2A1B2C3
3   

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:


Grid SizeNo. of Normal CharactersNo. of Small CharactersSmallCap Characters
1Two charactersStill Two CharactersSometimes only ONE UPPER, two lower
2Three CharactersThree UPPER, four lower Three UPPER, four lower
3Four CharactersFour UPPER, five lowerFour UPPER, five lower
4Five Characters Five UPPER, six lower Five UPPER, six lower
5Six UPPER, seven lowerSeven UPPER, nine lower Six UPPER, eight lower

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.
horus
member, 698 posts
Wayfarer of the
Western Wastes
Mon 22 Apr 2019
at 10:22
  • msg #6

GRIDS USING LARGER SQUARES

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:

 12345
1RNBKQ
2PPPPP
3     
4     
5     

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.
horus
member, 699 posts
Wayfarer of the
Western Wastes
Mon 22 Apr 2019
at 10:35
  • msg #7

INTERMEDIATE LEVEL TECHNIQUES

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:

Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4

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:

Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4

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 |

Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 330% Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 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.
horus
member, 700 posts
Wayfarer of the
Western Wastes
Mon 22 Apr 2019
at 10:38
  • msg #8

SPANNING COLUMNS

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:

Column AColumn BColumn CColumn D
Cell 1Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-4
Cell 3-1Cell 3-2Cell 3-3

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:

Column AColumn BColumn CColumn D
Cell 1Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-4
Cell 3-1Cell 3-2Cell 3-3


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.
horus
member, 703 posts
Wayfarer of the
Western Wastes
Tue 23 Apr 2019
at 00:39
  • msg #9

Combined Formats and Spacing

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:

Column AColumn BColumn CColumn D
^ Cell 1Cell 3Cell 4
Cell 2-1^2 Cell 2-2Cell 2-4 
Cell 3-1Cell 3-2^ Cell 3-3

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.
horus
member, 714 posts
Wayfarer of the
Western Wastes
Sun 5 May 2019
at 07:02
  • msg #10

Spanning Rows in a Single Column

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 |


Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 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...


Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
 Cell 2-2Cell 2-3Cell 2-4
 Cell 3-2Cell 3-3Cell 3-4

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...

Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-2Cell 2-3Cell 2-4
Cell 3-2Cell 3-3Cell 3-4

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 |


Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-2Cell 2-3Cell 2-4
Cell 3-3Cell 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...


Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-2Cell 2-4
Cell 3-3Cell 3-4

{WARNING!  Work-around Alert!  See notes at the bottom of this example, please.}

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.)

Column AColumn BColumn CColumn DE
Cell 1Cell 2Cell 3Cell 4 
Cell 2-2Cell 2-4 
Cell 3-3 

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.
horus
member, 715 posts
Wayfarer of the
Western Wastes
Sun 5 May 2019
at 07:06
  • msg #11

Combining Column and Row Spans

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 |


Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 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 |


Column AColumn BColumn CColumn D
Cell 1Cell 3Cell 4
Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 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 |


Column AColumn BColumn CColumn D
Cell 1Cell 3Cell 4
Cell 2-3Cell 2-4
Cell 2-1Cell 2-2 
Cell 3-1Cell 3-2Cell 3-3Cell 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.


Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4

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 |


Column AColumn BColumn CColumn DColumn EColumn F
Cell 1Cell 2Cell 3Cell 4  
Cell 2-1Cell 2-2Cell 2-3Cell 2-4 
Cell 3-1Cell 3-2Cell 3-3Cell 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.
horus
member, 716 posts
Wayfarer of the
Western Wastes
Sun 5 May 2019
at 07:15
  • msg #12

Advanced Techniques, Part One - Using the Newline

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:

Column AColumn BColumn CColumn D
Cell 1Cell 3Cell 4
Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4

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 |

Column AColumn BColumn CColumn D
This text is definitely
too long to fit on one line...
Cell 3Cell 4
Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 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 |

Column AColumn BColumn CColumn D
This text is definitely
too long to fit on one line...
Cell 3Cell 4
Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 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:

Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-2Cell 2-3Cell 2-4
Cell 3-2Cell 3-3Cell 3-4

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 |

Column AColumn BColumn CColumn D
123456789ABCDEF
ABCDEFGHIJKLMNOP
qrstuvwxyzabcde
Cell 2Cell 3Cell 4
Cell 2-2Cell 2-3Cell 2-4
Cell 3-2Cell 3-3Cell 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:

Column AColumn BColumn CColumn D

Cell 1
Cell 3Cell 4
Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4

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:

Column AColumn BColumn CColumn D
Cell 1

Cell 3Cell 4
Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4

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.
horus
member, 717 posts
Wayfarer of the
Western Wastes
Sun 5 May 2019
at 07:16
  • msg #13

Advanced Techniques, Part Two - Using Non-breaking Spaces

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:

Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
  Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4

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:

Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
       Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4
(previous table shown here below for reference...)
Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
  Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4

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.
horus
member, 720 posts
Wayfarer of the
Western Wastes
Mon 6 May 2019
at 05:37
  • msg #14

Advanced Techniques, Part Three - Displaying Pipes in Cells

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%-------|
|          |          |          |


Header 1Header 2Header 3
   

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” |          |


Header 1Header 2Header 3
 ifconfig | 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.
horus
member, 733 posts
Wayfarer of the
Western Wastes
Tue 14 May 2019
at 16:43
  • msg #15

Advanced Techniques, Part Four - Constraining Widths w/HTML

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:

Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4

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:


Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4

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:


Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4


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:



Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4



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.


Example:  Wrapping an Easy Table in HTML
Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4
Just a silly example, nothing more


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>



Example:  Wrapping an Easy Table in HTML
|!! Column A | Column B | Column C | Column D |100%
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4
Just a silly example, nothing more


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:


Example:  Wrapping an Easy Table in HTML

Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4
Just a silly example, nothing more


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.
horus
member, 734 posts
Wayfarer of the
Western Wastes
Tue 14 May 2019
at 16:46
  • msg #16

Advanced Techniques, Part Five - Side-by-Side Tables w/HTML

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>



  {1st Easy Table Here}

  {2nd Easy Table Here}


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:


Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4


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

Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4

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:


  {1st Easy Table Here}

  {2nd Easy Table Here}

  {3rd Easy Table Here}


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.
horus
member, 735 posts
Wayfarer of the
Western Wastes
Sun 19 May 2019
at 21:00
  • msg #17

Advanced Techniques, Part Six - An Example Character Sheet

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:



Classic TRAVELLER Character Record



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:


Classic TRAVELLER Character Record

GAME DATA
Player:horusGM:{GM Name here}Creation Date:17 May 2019


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:


Classic TRAVELLER Character Record

GAME DATA
Player:horusGM:{GM Name here}Creation Date:17 May 2019
UPP:PERSONAL DATA & HISTORY
STRName:Alexandra Louise Jamison, Fleet Admiral, IRN, ret., Dame of the Order of the Imperial Sunburst
6Noble Title(s):Dame of The Order of the Imperial Sunburst
DEXMilitary Rank:Fleet Admiral, Imperial Royal Navy, RetiredBirth Date:30 Oct 1164
8Age Mods:NoneBirthworld:Regina, Regina Sub, Spinward Marches Sector, Imperium
ENDSERVICE HISTORY:
AService:Imperial NavyBranch:Naval IntelligenceRetired?Yes/No
INTTerms Served:6Discharged:Elixabeth, District 268, Spinward Marches Sector
AFinal Rank:Fleet Admiral, Imperial Royal Navy, RetiredRetirement Pay:Cr 1,000,000
EDUSPECIAL ASSIGNMENTS:
9Pre-bombardment recon of Glamdring, Nov 1182, Logistical planning for Operation Exeter, others CLASSIFIED
SST 
BAWARDS AND DECORATIONS:
PSIKnight's Cross with Oak Leaf Cluster, Imperial Sunburst for Valor, Glimmerdrift Expeditionary Medal
**Order of Denbigh, Expert Sharpshooter Badge, Dist. Flying Cross w Oak Leaf Cluster, Order of the Purple Heart.


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:


Classic TRAVELLER Character Record

GAME DATA
Player:horusGM:{GM Name here}Creation Date:17 May 2019
UPP:PERSONAL DATA & HISTORY
STRName:Alexandra Louise Jamison, Fleet Admiral, IRN, ret., Dame of the Order of the Imperial Sunburst
6Noble Title(s):Dame of The Order of the Imperial Sunburst
DEXMilitary Rank:Fleet Admiral, Imperial Royal Navy, RetiredBirth Date:30 Oct 1164
8Age Mods:NoneBirthworld:Regina, Regina Sub, Spinward Marches Sector, Imperium
ENDSERVICE HISTORY:
AService:Imperial NavyBranch:Naval IntelligenceRetired?Yes/No
INTTerms Served:6Discharged:Elixabeth, District 268, Spinward Marches Sector
AFinal Rank:Fleet Admiral, Imperial Royal Navy, RetiredRetirement Pay:Cr 1,000,000
EDUSPECIAL ASSIGNMENTS:
9Pre-bombardment recon of Glamdring, Nov 1182, Logistical planning for Operation Exeter, others CLASSIFIED
SST 
BAWARDS AND DECORATIONS:
PSIKnight's Cross with Oak Leaf Cluster, Imperial Sunburst for Valor, Glimmerdrift Expeditionary Medal
**Order of Denbigh, Expert Sharpshooter Badge, Dist. Flying Cross w Oak Leaf Cluster, Order of the Purple Heart.

EQUIPMENT QUALIFICATIONS:
Equipment:Level:Equipment:Level:Equipment:Level:Equipment:Level:
{Equip here}{Lv}{Equip here}{Lv}{Equip here}{Lv}{Equip here}{Lv}
{Equip here}{Lv}{Equip here}{Lv}{Equip here}{Lv}{Equip here}{Lv}
{Equip here}{Lv}{Equip here}{Lv}{Equip here}{Lv}{Equip here}{Lv}
{Equip here}{Lv}{Equip here}{Lv}{Equip here}{Lv}{Equip here}{Lv}
SKILL INVENTORY:
PRIMARY SKILL:SECONDARY SKILL:
{Skill here}{Lv}{Skill here}{Lv}
ADDITIONAL SKILLS:
{Skill here}{Lv}{Skill here}{Lv}
{Skill here}{Lv}{Skill here}{Lv}
{Skill here}{Lv}{Skill here}{Lv}
{Skill here}{Lv}{Skill here}{Lv}
{Skill here}{Lv}{Skill here}{Lv}
{Skill here}{Lv}{Skill here}{Lv}
{Skill here}{Lv}{Skill here}{Lv}
{Skill here}{Lv}{Skill here}{Lv}
{Skill here}{Lv}{Skill here}{Lv}
{Skill here}{Lv}{Skill here}{Lv}
{Skill here}{Lv}{Skill here}{Lv}
{Skill here}{Lv}{Skill here}{Lv}
Preferred Weapon:Dragunov SVD Rifle
Preferred Blade:Muramasa Katana
Travellers' Aid Member?Yes/NoChapter:Inhalt Chapter, Regina, Regina, Spinward Marches
PSIONICS:
WARNING:  Data concerning a sophont's psionic ability is confidential medical information, and may not be released without the individual's consent.
Date of Test:12 May 1168PSI:6Trained?Yes/NoDate Completed:Not Applicable
PSIONIC TALENTS:
{Talent here}{Lv}{Talent here}{Lv}
{Talent here}{Lv}{Talent here}{Lv}
{Talent here}{Lv}{Talent here}{Lv}
{Talent here}{Lv}{Talent here}{Lv}
{Talent here}{Lv}{Talent here}{Lv}
{Talent here}{Lv}{Talent here}{Lv}
{Talent here}{Lv}{Talent here}{Lv}
{Talent here}{Lv}{Talent here}{Lv}
NOTES AND REMARKS:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
EQUIPMENT & PERSONAL EFFECTS
  
  
  
  
  
  
  
  
  
  
  
  
  


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.
horus
member, 758 posts
Wayfarer of the
Western Wastes
Mon 27 May 2019
at 00:26
  • msg #18

Advanced Techniques, Part 7 - Using Variable Columns in HTML

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:

20%
ABCD
10%20%30%40%
LeftCenterDefaultRight
30%
ABCD
10%20%30%40%
LeftCenterDefaultRight
50%
ABCD
10%20%30%40%
LeftCenterDefaultRight


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.
horus
member, 774 posts
Wayfarer of the
Western Wastes
Fri 7 Jun 2019
at 06:10
  • msg #19

Advanced Techniques, Part 8 - Using Variable Columns in HTML

<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>



Col. A

Col. B

Col. C


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):


UPP
STR6
DEX8
END8
INTA
EDU9
SOCB
PSI**
 
CREDITS:
1,000,000
 
 
 
Retired Pay
1,000,000
Terms:6
Retired:Yes
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Classic Traveller Character Record Sheet
GAME DATA:
Player:{Player's Name here}
Referee:{Referee's Name here}
Date Created:{Creation Date here}
PERSONAL DATA & HISTORY:
Name:Alexandra Louise Jamison
Noble Title:Dame of the Order of the Imperial Sunburst
Military Rank:Fleet Admiral, Imperial Royal Navy, retired
Birth World:Spinward Marches, Regina Subsector, Regina
Date of Birth30 October 1164
Age Mods.:None
SERVICE HISTORY:
Service:Imperial Royal Navy
Branch:Naval Intelligence
Discharged:Spinward Marches, District 268, Elixabeth
Final Rank:Fleet Admiral, Imperial Royal Navy, retired

SPECIAL ASSIGNMENTS:
1Pre-bombardment recon of Glamdring, Nov. 1182
2Logistical planning and support for Operation Exeter
3{All Other Assignments CLASSIFIED.}
4 
5 
AWARDS & DECORATIONS:
1Knight's Cross with Oak Leaf Cluster
2Order of The Imperial Sunburst for Valor
3Glimmerdrift Reaches Expeditionary Medal
4Order of Denbigh
5Order of the Purple Heart
6Distinguished Flying Cross with Oak Leaf Cluster
7Expert Sharpshooter Badge

PSIONICS:
 
WARNING:  Data concerning a sophont's psionic ability is confidential information, and may not be released without the individual's consent.
Date Tested:PSI:Trained?Date Completed:
{Date here}0YES / No{Date here}

PSIONIC TALENTS:
Psionic Talent:Level:
Telepathy0
Clairvoyance0
Telekinesis0
Awareness0
Teleportation0
Special0

NOTES & REMARKS:
 
 
 
 
 
 
 
 
 
 
 
 
 

EQUIPMENT QUALIFICATIONS:
{Equipment here} 
{Equipment here} 
{Equipment here} 
{Equipment here} 
{Equipment here} 
{Equipment here} 
{Equipment here} 
{Equipment here} 
{Equipment here} 
{Equipment here} 

SKILLS INVENTORY:
 
Primary Skill:
{Skill here} 
Secondary Skill:
{Skill here} 
Additional Skills:
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 
{Skill here} 

PERSONAL EFFECTS & RESOURCES:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


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.
horus
member, 824 posts
Wayfarer of the
Western Wastes
Fri 26 Jul 2019
at 09:17
  • msg #20

Advanced Techniques, Part 9 - Variable Border Widths

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.


Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4


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:


Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4


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:


Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4


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:


Column AColumn BColumn CColumn D
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4


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.
Sign In