§ 5 - Techniques and Tutorials§ 5.1 - Use of HTML Table Built-insWarning: The comma after each table component is not optional. If you don't use a comma as shown, any complex cell content or styles within the table, rows, headers or cells will cause mayhem. Just use the comma. Every time. Trust me on this. Again: The options are... optional. The commas are not.
As with HTML itself, tables are managed with table, row, header cell and table cell concepts. Attributes for these may be supplied if desired. While the syntax may seem obvious and perhaps even trite at first, the examples that follow will demonstrate the considerable power of this methodology. First, the built-ins themselves: Individual Components: ---------------------- [table (table options),RowsCells] [row (row options),Cells] [header (header options),Content] [cell (cell options),Content] General Form: ------------- [table ,[row ,[header ,content][header ,content]]] [table ,[row ,[cell ,content][cell ,content]]] Actual Example: --------------- [table border="1", [row ,[header ,name][header ,age]] [row ,[cell ,Ben][cell ,16]] [row ,[cell ,Deb][cell ,18]] ] <table border="1"> <tr><th>name</th><th>age</th></tr> <tr><td>Ben</td><td>16</td></tr> <tr><td>Deb</td><td>18</td></tr> </table> Using [style] , [split] and [parm] you can conveniently pre-define part or all of a table format. For instance, if you are using a two-cell per row table, you could do the following and then your table can be done more simply, allowing use of multiple rows: [style myrow [split [b]],[row ,[cell ,[parm 0]][cell ,[parm 1]]]] [table , {myrow joe,larry} {myrow freida,sheila} ] <table> <tr><td>joe</td><td>larry</td></tr> <tr><td>freida</td><td>sheila</td></tr> </table> Using [t] , you can apply a specific treatment to a list. We can use this to good effect to generate variable length table rows (HTML wants all the rows to be the same length, though, so keep that in mind for this example: [style onecell [cell ,[b]]] [style vc [t wrap=onecell,[b]]] [table border="1", [row ,{vc 1,2,3,4}] [row ,{vc A,B,C,D}] ] <table border="1"> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>A</td><td>B</td><td>C</td><td>D</td></tr> </table> And do we really need to specify the row every time? No: [style onecell [cell ,[b]]] [style vr [row ,[t wrap=onecell,[b]]]] [table border="1", {vr 1,2,3,4} {vr A,B,C,D} ] <table border="1"> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>A</td><td>B</td><td>C</td><td>D</td></tr> </table> You can use styles to change the built-in table operators to minimalist versions of themselves, too: [style t [table [b]]] [style r [row [b]]] [style h [header [b]]] [style c [cell [b]]] {t ,{r ,{c ,first}{c ,second}}} <table>,<tr><td>first</td><td>second</td></tr></table> That one left it up to you to add cell options. But if you don't need options, you can put that in the styles too: [style t [table ,[b]]] [style r [row ,[b]]] [style h [header ,[b]]] [style c [cell ,[b]]] {t {r {c first}{c second}}} <table><tr><td>first</td><td>second</td></tr></table> Or, if you have a consistent option set you want applied: [style t [table ,[b]]] [style r [row ,[b]]] [style h [header ,[b]]] [style c [cell width="50",[b]]] {t {r {c first}{c second}} {r {c large}{c small}} {r {c left}{c right}} } <table> <tr><td width="50">first</td><td width="50">second</td></tr> <tr><td width="50">large</td><td width="50">small</td></tr> <tr><td width="50">left</td><td width="50">right</td></tr> </table> Here's a fun one. We'll do a row style that counts rows and automatically alternates row colors: [local count 0] [style counter [local count [add [v count] 1]]] [style altcolor [even [v count] #ddddff][odd [v count] #ddffdd]] [style t [table ,[b]]] [style r {counter}[row bgcolor="{altcolor}",[cell [v count]][b]]] [style h [header ,[b]]] [style c [cell width="50",[b]]] {t {r {c 1}{c 2}} {r {c a}{c b}} {r {c I}{c II}} } <table> <tr bgcolor="#ddffdd"><td>1</td><td width="50">1</td><td width="50">2</td></tr> <tr bgcolor="#ddddff"><td>2</td><td width="50">a</td><td width="50">b</td></tr> <tr bgcolor="#ddffdd"><td>3</td><td width="50">I</td><td width="50">II</td></tr> </table> Lastly, here's a combination of the above, plus automatic row length courtesy of the [t] built-in: [local count 0] [style widcell [cell width="25",[b]]] [style vx {r [t wrap=widcell,[b]]}] [style counter [local count [add [v count] 1]]] [style altcolor [even [v count] #ddddff][odd [v count] #ddffdd]] [style t [table border="1",[b]]] [style r {counter}[row bgcolor="{altcolor}",[cell [v count]][b]]] [style h [header ,[b]]] [style c [cell width="50",[b]]] {t {vx I,II,III,IV,V} {vx X,XX,XXX,XL,L} {vx C,CC,CCC,CD,D} } <table border="1"> <tr bgcolor="#ddffdd"><td>1</td><td width="25">I</td><td width="25">II</td><td width="25">III</td><td width="25">IV</td><td width="25">V</td></tr> <tr bgcolor="#ddddff"><td>2</td><td width="25">X</td><td width="25">XX</td><td width="25">XXX</td><td width="25">XL</td><td width="25">L</td></tr> <tr bgcolor="#ddffdd"><td>3</td><td width="25">C</td><td width="25">CC</td><td width="25">CCC</td><td width="25">CD</td><td width="25">D</td></tr> </table> Now to embed this code in the page: [local count 0] {t {vx I,II,III,IV,V} {vx X,XX,XXX,XL,L} {vx C,CC,CCC,CD,D} } Here it is:
Other built-ins used here: [add] , [even] , [local] , [odd] , [parm] , [style] and [t]
Keyboard Navigation
, Previous Page . Next Page t TOC i Index |