These elements can be used to create bars and boxes, both with and
without borders.  These components are constructed from the more
fundamental table elements: 'table', 'row' and 'cell'.
| Source #1: [% PROCESS html/rgb %]
[% WRAPPER html/bar 
	col=rgb.rose 
	width="50%" 
%]
  [%- FOREACH word = ['Hello', 'World'] %]
  <td width="50%">[% word %]</td>
  [%- END %]
[% END %] | 
| HTML Output #1: 
<table border="0" bgcolor="#f08080" width="50%"><tr bgcolor="#f08080">
  <td width="50%">Hello</td>
  <td width="50%">World</td>
</tr>
</table> | 
| Output #1: 
    
 | 
| 
 | 
| Source #2: [% INCLUDE html/box 
    col     = rgb.lilac
    pad     = 4
    content = 'Hello World'
 %]
 | 
| HTML Output #2: <table border="0" bgcolor="#9797ff" cellpadding="4"><tr><td>Hello World</td>
</tr>
</table>
 | 
| Output #2: 
     | 
| 
 | 
| Source #3: [% WRAPPER html/box 
     col   = rgb.bud
     width = '100%'
     align = 'right'
     pad   = 4
%]
<font color="[% rgb.white %]"><b>Hello World</b></font>
[% END %]
 | 
| HTML Output #3: <table border="0" bgcolor="#66aa66" width="100%" cellpadding="4"><tr
align="right"><td align="right">
<font color="#ffffff"><b>Hello World</b></font>
</td>
</tr>
</table>
 | 
| Output #3: 
     | 
| 
 | 
| Source #4: [% INCLUDE html/edgebox 
     content = "The Cat Sat on the Mat"
%]
 | 
| HTML Output #4: <table border="0" bgcolor="#000000" cellpadding="2"
cellspacing="0"><tr><td><table border="0" bgcolor="#ffffff" cellspacing="0"><tr
bgcolor="#ffffff">
<td>
The Cat Sat on the Mat
</td>
</tr>
</table></td>
</tr>
</table>
 | 
| Output #4: 
     | 
| Source #5: [% INCLUDE html/edgebox 
     border  = 1
     pad     = 4
     width   = '50%'
     content = "The Cat Sat on the Mat"
%]
 | 
| Output #5: 
     | 
| 
 | 
| Source #6: [% INCLUDE html/edgebox 
     edge    = rgb.blue.dark
     fill    = rgb.grey.light
     pad     = 4
     width   = '50%'
     align   = 'right'
     content = "The Dog Sat on the Log"
%]
 | 
| Output #6: 
     | 
| 
 | 
| Source #7: [% WRAPPER html/edgebox 
     edge    = rgb.green.dark
     fill    = rgb.green.light
     border  = 1
     pad     = 4
     width   = '100%'
     align   = 'center'
%]
The Fish Lay on the Dish
[% END %]
 | 
| Output #7: 
     | 
| 
 | 
| Source #8: [% WRAPPER html/edgebar 
     edge    = rgb.green.dark
     fill    = rgb.green.light
     border  = 1
     pad     = 4
     width   = '100%'
%]
<td>Foo</td> <td>Bar</td> <td>Baz</td>
[% END %]
 | 
| Output #8: 
     | 
| 
 | 
| Source #9: [% WRAPPER html/edgebar 
     edge    = rgb.lavender.dark
     fill    = rgb.lavender.light
     border  = 2
     pad     = 4
     width   = '100%'
%]
<td align="left">Left Side</td>
<td align="right">Right Side</td>
[% END %]
 | 
| Output #9: 
     | 
| 
 | 
| Source #10: <div align="center">
[% WRAPPER html/edge
     edge    = rgb.lavender.dark
     fill    = rgb.lavender.light
     border  = 2
     pad     = 4
     width   = '80%'
%]
<tr>
  <td align="right">One</td>
  <td align="left">Two</td>
</tr>
<tr>
  <td align="right">Three</td>
  <td align="left">Four</td>
</tr>
[% END %]
</div>
 | 
| Output #10: 
     | 
| 
 | 
| Source #11: <div align="center">
[% WRAPPER html/edgebox
     edge    = rgb.grey50
     fill    = rgb.grey75
     border  = 1
     pad     = 6
     width   = '50%'
%]
<h2>Abstract Factory</h2>
<h3>Intent</h3>
<ul>
  Provide an interface for creating families of 
  related or dependant objects without specifying
  their concrete classes.
</ul>
<h3>Also Known As</h3>
<ul>
  Kit
</ul>
<h3>Motivation</h3>
<ul>
  Consider a user interface toolkit that supports
  multiple look-and-feel standards, . . .
</ul>
[% END %]
</div>
 | 
| Output #11: 
     
| 
| Abstract FactoryIntent
  Provide an interface for creating families of 
  related or dependant objects without specifying
  their concrete classes.
 Also Known AsMotivation
  Consider a user interface toolkit that supports
  multiple look-and-feel standards, . . .
 | 
 | 
 |