Custom VASL Play Aids

Michael R

Minor Hero
Staff member
Moderator
Joined
Feb 4, 2003
Messages
4,622
Reaction score
4,162
Location
La Belle Province
First name
Michael
Country
llCanada
Group:
Dumb question here. Trying to copy/paste HTML into a blank label, and right-click does not work. I can paste with right-click ok into a blank Word doc but not into the field on the label. What am I missing here? I am using the latest versions of VASSAL and VASL as far as I know. I am mucking about off-line, though if that makes a difference.

Thanks!
Online vs offline should make no difference. I never tried to paste without using shortcut keys: COMMAND+V on a Mac.
 

ExNavyDoc

Recruit
Joined
Dec 20, 2015
Messages
7
Reaction score
2
Location
PA
Country
llUnited States
Online vs offline should make no difference. I never tried to paste without using shortcut keys: COMMAND+V on a Mac.
Well, that worked....<Slaps forehead> Duh. I rarely use keyboard shortcuts; I use the mouse to drive everything.

Thanks!
 

LaFajita

Member
Joined
Feb 24, 2010
Messages
307
Reaction score
17
Location
Montross, VA
Country
llUnited States
Maybe you all can help me with something...
I'm attempting to build a table in which the first line of the column has two cells, and the second line (and any following lines) has four columns.

How do you work this piece of magic? I have not been able to figure this out.

In case you'd like a visual, what I'm attempting is the German Purchase Tables for WO10 - All Across The Merderet. I am familiar with terms like TD, TR, and their closing statements, and have built several tables where there is no change in the number of columns in a line. I'm not sure what to do with changing the number of columns inside a table. Can you help?
 

veron

Member
Joined
Jun 22, 2015
Messages
288
Reaction score
41
Location
Finland
Country
llFinland
IIRC, you need html tag also (begin and end), do you have those?
 

LaFajita

Member
Joined
Feb 24, 2010
Messages
307
Reaction score
17
Location
Montross, VA
Country
llUnited States
IIRC, you need html tag also (begin and end), do you have those?
Yes, I do. I use <html><body> unless I want to center script; then I use <center>. It is primitive, but effective.

My question centers around the use of COLSPAN. Is it necessary? Where do I put it in order to change the number of columns in a line from 2 to 4.
 

Penthau

Recruit
Joined
Oct 26, 2012
Messages
11
Reaction score
0
Location
Durham, NC
Country
llUnited States
The other thing you can do, in addition to row and column spanning, is nesting tables. You can put a table in the cell of another table and it is independent of the outer table. For instance, you could have a 3x3 outer table and in a cell of it put a 2x2 table. It can get confusing if you nest too deep and the spacing and padding can throw off the appearance, but back in the day that was the best way to layout a page.
 

esparver73

Member
Joined
Jul 5, 2010
Messages
435
Reaction score
32
Location
Catalonia
Country
llLuxembourg
Maybe you all can help me with something...
I'm attempting to build a table in which the first line of the column has two cells, and the second line (and any following lines) has four columns.

How do you work this piece of magic? I have not been able to figure this out.

In case you'd like a visual, what I'm attempting is the German Purchase Tables for WO10 - All Across The Merderet. I am familiar with terms like TD, TR, and their closing statements, and have built several tables where there is no change in the number of columns in a line. I'm not sure what to do with changing the number of columns inside a table. Can you help?
Hi, I'm using tables now for all my PBEM games.
For example, I'm using this one for 26 Tanks in the street (by a cropped map to compare its size).



If you see something that you could use from these tables I could paste the HTML code.
Cheers,
 

von Marwitz

Forum Guru
Joined
Nov 25, 2010
Messages
14,358
Reaction score
10,207
Location
Kraut Corner
Country
llUkraine
Never hurts to have the HTML-code to your picture/table posted here.

It might be a starting point for some to build their own custom thingies and a place to just 'grab it as is' for others.

von Marwitz
 

esparver73

Member
Joined
Jul 5, 2010
Messages
435
Reaction score
32
Location
Catalonia
Country
llLuxembourg
Never hurts to have the HTML-code to your picture/table posted here.

It might be a starting point for some to build their own custom thingies and a place to just 'grab it as is' for others.

von Marwitz
Yes, you're right. Other people coming here could use it for their games.
Here it is:

HTML:
<HTML>
<BODY>
<!-- List of nationality colors -->
<!-- German #ABCAE9 -->
<!-- British #EFD19F -->
<!-- USA #B5BD00 -->
<!-- Russian #B58500 -->
<!-- Italian #A7A8AA -->
<!-- Allied Minor #A2E4B8 -->
<!-- Axis Minor #43B02A -->
<!-- Japanese #FDDA24 -->
<!-- French #71C5E8 -->
<!-- Finnish #D0D3D4 -->
<!-- Chinese #71D5F8 -->
<TABLE BGCOLOR=#ABCAE9 bordercolor=grey BORDER=1 CELLPADDING=4 CELLSPACING=0>
<TR>
     <TD HEIGHT=64 BGCOLOR=#FFFFFF WIDTH=128 rowspan=2 colspan=2 ALIGN=CENTER>Phase<BR>Wheel</TD>
     <TD HEIGHT=64 ALIGN=CENTER COLSPAN=9><h4>26 Tanks in the street<br>Bardenberg, Germany<br>11 October 1944</h4></TD>
     <TD HEIGHT=64 BGCOLOR=#FFFFFF WIDTH=128 rowspan=2 colspan=2>
          <DIV align=center>
          <TABLE BORDER=1 CELLPADDING = 2 width="100%" height="100%">
               <TR>
                    <TD></TD>
                    <TD>ELR</TD>
                <TD>SAN</TD>
               </TR>
               <TR>
                    <TD ALIGN=CENTER>German</TD>
                    <TD ALIGN=CENTER>3</TD>
                <TD ALIGN=CENTER>3</TD>
               </TR>
               <TR>
                    <TD ALIGN=CENTER>American</TD>
                    <TD ALIGN=CENTER>4</TD>
                <TD ALIGN=CENTER>4</TD>
               </TR>
          </TABLE>
          </DIV>
     </TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER>Compass</TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER>Wind</TD>  
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER>German Casualties</TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER>American Casualties</TD>
    <TD BGCOLOR=#FFFFFF HEIGHT=64 WIDTH=320 ALIGN=LEFT VALIGN=TOP COLSPAN=2 ROWSPAN=5>
         <FONT SIZE=3>VICTORY CONDITIONS</FONT><BR>
         German win by controlling 8 or more buildings, plus turn of Jabos.<BR><!-- Add/Delete where applicable -->
         <BR>
         <FONT SIZE=3>SPECIAL RULES</FONT><BR>
         1. Wet. Mild breeze from west.
        2. Starting German column.
        3. Americans can have 3-6 BAZ
        4. American Air Support, 3x’44 FB only on vehicles
        5. PzIV have Schuerzen<BR>
     </TD>
</TR>
<TR>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>1</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>2<sup>a</sup></h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>3</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>4</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>5</h4></TD>
    <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>6</h4></TD>
    <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>7</h4></TD>
    <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>8</h4></TD>
    <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>9<sup>0.5</sup></h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER>EC</TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER></TD>
</TR>
</TABLE>
<TABLE BGCOLOR=#F0F0F0 bordercolor=grey BORDER=1 CELLPADDING=4 CELLSPACING=0>
<TR>
    <TD HEIGHT=64 BGCOLOR=#FFFFFF WIDTH=128 rowspan=2 colspan=2 ALIGN=CENTER>Victory<BR>Points</TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>00</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>10</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>20</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>30</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>40</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>50</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>60</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>70</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>80</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>90</h4></TD>
</TR>
<TR>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>0</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>1</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>2</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>3</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>4</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>5</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>6</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>7</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>8</h4></TD>
     <TD HEIGHT=64 WIDTH=64 ALIGN=CENTER><h4>9</h4></TD>
</TR>
</TABLE>
</BODY>
</HTML>
 

LaFajita

Member
Joined
Feb 24, 2010
Messages
307
Reaction score
17
Location
Montross, VA
Country
llUnited States
A Note to all who tried to help me with my "colspan" problem:
I finally figured out what I was doing wrong and corrected my problem -- as it turns out, I misunderstood the "colspan" function -- and only needed a whole week to figure it out.
If I knew how to link to this page, I could show you my solution.
Thx, again!
 

clubby

Elder Member
Joined
Dec 27, 2015
Messages
2,412
Reaction score
642
Location
CA
Country
llUnited States
Just cut and paste your code into an HTML box like Von Marwitz did above.
 

Rooster2k

Member
Joined
Mar 26, 2018
Messages
128
Reaction score
46
Location
Buffalo NY
First name
Mike
Country
llUnited States
This one gives a nice little box with all your info in it

<html> <div style="width:300px;height:auto;div
width: 300px;
border:5px solid Black;
padding: 10px;
margin: 10px;
"> <p style="color:black;background-color:red;"> VICTORY CONDITIONS:<br/>
<hr/> ENTER TEXT <br/>
<br/> <p style="color:black;background-color:silver;"> SPECIAL SCENARIO RULES:<br/>
<hr/> <font size=3> ❶ </font> ENTER TEXT <br/>
<br /> <font size=3> ❷ </font> ENTER TEXT <br/>
<br /> <font size=3> ❸ </font> ENTER TEXT <br/>
<br /> <font size=3> ❹ </font> ENTER TEXT <br/>
<br /> <font size=3> ❺ </font> ENTER TEXT <br/>
<br /> <font size=3> ❻ </font> ENTER TEXT <br/>
<br /> <font size=3> ❼ </font> ENTER TEXT <br/>
<br /> <font size=3> ❽ </font> ENTER TEXT <br/>
<br /> <p style="color:black;background-color:green;"> HOUSE RULES:<br/>
<hr/> <font size=3> ❶ </font> The IIFT with CTC is in effect. <br/>
<br /> <font size=3> ❷ </font> An honor system is used instead of temporarily
revealing concealed units for verification purposes.<br/>
<br/> </div> </html>
 

Pacman Ghost

Senior Member
Joined
Feb 25, 2017
Messages
590
Reaction score
298
Location
A maze of twisty little passages, all alike
Country
llAustralia
A little late to the party :), but I wrote an article for View From The Trenches #101 on this topic, and there's a version online here, with lots of examples and screenshots.

I'm getting a bit sick of maintaining all the templates manually, so I'm going to write a little program soon that manages everything, and automatically generates HTML snippets from (user-defined) templates.
 

Steed

Member
Joined
Jan 28, 2007
Messages
213
Reaction score
174
Location
Naugatuck, CT
First name
Walter
Country
llUnited States
Firstly thanks to all who have contributed to this thread. Having fun learning HTML and CSS and making useful(?) tables/charts. But I have a question concerning border-collapse.

Is there a problem with vasl implementing it? I'm trying to make a thin border around a table but the borders around the data won't collapse into one. They stay separated. I've taken the code for my table and tried it online and it works perfectly but when I paste it into a label in vasl it won't. I've copied and pasted the code from Rooster2K above and the borders are collapsed online but in vasl they are separated.

Sorry got confused about which one I had tried. The code was from Vasl Play Aids on GitHub. Online the borders are collapsed but in VASL it's seperated.

EDIT: I'm able to get the "thin border" I'm looking for by deleting the border settings, setting table {background color to black} and the td and th { background color to whatever color }. It works. But if anyone can tell me what I'm doing wrong it would be appreciated.
 
Last edited:

Pacman Ghost

Senior Member
Joined
Feb 25, 2017
Messages
590
Reaction score
298
Location
A maze of twisty little passages, all alike
Country
llAustralia
Is there a problem with vasl implementing it? I'm trying to make a thin border around a table but the borders around the data won't collapse into one.
I'm guessing you mean that each table cell is getting its own border, and it looks like lots of small boxes in a grid, but you want a single border around the whole table...? Yeah, some HTML renderers are funny like that :rolleyes:

Try this:
Code:
<table border=1> ... </table>
or this:
Code:
<table style="border: 1px solid black;"> ... </table>
 

Steed

Member
Joined
Jan 28, 2007
Messages
213
Reaction score
174
Location
Naugatuck, CT
First name
Walter
Country
llUnited States
I'm guessing you mean that each table cell is getting its own border, and it looks like lots of small boxes in a grid, but you want a single border around the whole table...? Yeah, some HTML renderers are funny like that :rolleyes:
Exactly.

I believe I tried those suggestions but I could be wrong. I will try them.

Thank you.
 

Steed

Member
Joined
Jan 28, 2007
Messages
213
Reaction score
174
Location
Naugatuck, CT
First name
Walter
Country
llUnited States
I'm guessing you mean that each table cell is getting its own border, and it looks like lots of small boxes in a grid, but you want a single border around the whole table...? Yeah, some HTML renderers are funny like that :rolleyes:

Try this:
Code:
<table border=1> ... </table>
or this:
Code:
<table style="border: 1px solid black;"> ... </table>
I just tried your suggestions.

The <table border=1> puts a "raised" border around the table and by making the table background color black the border is black.

The <table style="border: 1px solid black;"> ( I actually put it in the table{} in the <style>....</style> section ) does put a border around the table, not the headers/data. I put border: 1px solid black; in the th{} and td{} and I get the thin border around each of the headers/data. But they're separated. I put border-collapse: collapse; in the table{} but they stay separated. I've gone online to
https://www.w3schools.com/cssref/pr_border-collapse.asp
to make sure I'm doing it correctly. I've copied/pasted my code into they're example (the "try it yourself") and it works perfectly! Nice thin borders around everything and they are collapsed. But in VASL's labels they are seperated... It has to be something in VASL or, more likely, my computer.

Thanks for helping.
 

Steed

Member
Joined
Jan 28, 2007
Messages
213
Reaction score
174
Location
Naugatuck, CT
First name
Walter
Country
llUnited States
For the heck of it here is the code with the border: 1px solid black;....... It's Russian Activation Chart for SASL.

<html>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
th {
border: 1px solid black;
background-color: #EA9012;
text-align: center;
}
td {
border: 1px solid black;
background-color: #EDAE54;
text-align: center;
}
</style>

<table>
<thead>
<th colspan="2" color="red"><b>R1:ACTIVATION CHECK (AC) (5.1)</b></th>
<tr>
<th>FRIENDLY within</th>
<th>Final IFT DRM</th>
</tr>
</thead>
<body>
<tr>
<td>8 hexes (INF only)</td>
<td> &le -2</td>
</tr>
<tr>
<td>6 hexes (INF only)</td>
<td> &le -1</td>
</tr>
<tr>
<td>4 hexes (INF only)</td>
<td> &le 0</td>
</tr>
<tr>
<td>3 hexes (INF, UnArm Veh)</td>
<td> &le 1</td>
</tr>
<tr>
<td>2 hexes (INF, UnArm Veh, CE_AFV)</td>
<td> &le 2</td>
</tr>
<tr>
<td>Adjacent</td>
<td>Automatic</td>
</tr>
</body>
</table>
</html>
 
Top