SheerPower® 4GL
A Guide to the SheerPower Language
Previous Contents Index

9.4.5 Table Tags

9.4.5.1 TABLE

<table>...</table>

The TABLE tag creates a table of columns and rows.

Example 9-46 <table >... </table > tag 

  info_form$ = '<form>' 
  info_form$ = info_form$ + '<table>'  
  info_form$ = info_form$ + '<tr><td>Please enter<br> your age:' 
  info_form$ = info_form$ + '<td><input type=text name=age size=6>' 
  info_form$ = info_form$ + '<td>Please enter<br> your height:' 
  info_form$ = info_form$ + '<td><input type=text name=height size=6>' 
  info_form$ = info_form$ + '<td>Please enter<br> your weight:' 
  info_form$ = info_form$ + '<td><input type=text name=weight size=6>'  
  info_form$ = info_form$ + '</tr>' 
  info_form$ = info_form$ + '</table>' 
  info_form$ = info_form$ + '</form>' 
  input dialogbox info_form$: data$ 
  end

TABLE TAG ATTRIBUTES

Table 9-7 TABLE Tag Attributes
Attribute Function
align left, right, center
width sets how wide the table can be
border causes the table to be drawn with a border
border= number draws the table with a border number pixels thick
cellpadding= number separates the cell borders and the text with a padding of number pixels
cellspacing= number separates cells with a gutter of number pixels
bgcolor= colorname sets the background colour for the entire table
bordercolor= colorname sets the border colour for the entire table
bordercolorlight= colorname sets the border highlight colour for the entire table
bordercolordark= colorname sets the border shadow colour for the entire table
valign sets the vertical alignment for the entire table. "valign" is TOP or BOTTOM
nowrap prevents word wrap within table entries

Example 9-47 <table > tag attributes 

  form$ = '<form>' 
  form$ = form$ + '<table cellpadding=20>'  
  form$ = form$ + '<tr><td>This table' 
  form$ = form$ + '<td>illustrates' 
  form$ = form$ + '<td>cellpadding!' 
  form$ = form$ + '</tr></table><p>' 
  form$ = form$ + '<table valign=top><tr><td>' 
  form$ = form$ + 'This<br>table<br>illustrates<br>valign!' 
  form$ = form$ + '<td><input type=text size=5 name=blank>' 
  form$ = form$ + '</tr></table><p>' 
  form$ = form$ + '<table border=2 cellspacing=15 align=right nowrap>'  
  form$ = form$ + '<tr><td>And this table' 
  form$ = form$ + '<td>illustrates cellspacing, nowrap, ' 
  form$ = form$ + '<td>border, and align!' 
  form$ = form$ + '</tr></table><p>' 
  form$ = form$ + '<table border=2 bgcolor=blue bordercolor=red>'  
  form$ = form$ + '<tr><td>This table' 
  form$ = form$ + '<td>illustrates' 
  form$ = form$ + '<td>bgcolor and bordercolor!' 
  form$ = form$ + '</tr></table><p>' 
  form$ = form$ + '<table border=2 bordercolorlight=green bordercolordark=black width=500>'  
  form$ = form$ + '<tr><td>And this table' 
  form$ = form$ + '<td>illustrates width,' 
  form$ = form$ + '<td>border, bordercolorlight and bordercolordark!' 
  form$ = form$ + '</tr></table>' 
  form$ = form$ + '</form>' 
  input dialogbox form$: data$ 
  end

9.4.5.2 TABLE HEADER

<th>...</th>

Valid only in a table row, the TABLE HEADER tag defines a header cell. The header is usually in bold text.

An optional sort attribute causes the table column defined by the table header to be sortable by the end user. When the table is presented to the end user, there will be a clickable diamond beside the table header. Clicking once on the diamond toggles the column between ascending and descending order.

Example 9-48 <th >... </th > tag 

  form$ = '<form>' 
  form$ = form$ + '<table align=center border=2>'  
  form$ = form$ + '<tr><th sort>Name</th>' 
  form$ = form$ + '<th sort>Age</th>' 
  form$ = form$ + '<th sort>City</th>' 
  form$ = form$ + '<tr><td>Jeremy' 
  form$ = form$ + '<td>42' 
  form$ = form$ + '<td>New York</tr>' 
  form$ = form$ + '<tr><td>Amber' 
  form$ = form$ + '<td>32' 
  form$ = form$ + '<td>Boulder</tr>'    
  form$ = form$ + '<tr><td>Miguel' 
  form$ = form$ + '<td>37' 
  form$ = form$ + '<td>San Diego</tr>'   
  form$ = form$ + '</table>' 
  form$ = form$ + '</form>' 
  input dialogbox form$: data$ 
  end

9.4.5.3 TABLE ROW

<tr>...</tr>

Valid only in a table, the TABLE ROW tag defines a row of cells that are defined with <td> tags.

Example 9-49 <tr >... </tr > tag 

  form$ = '<form>' 
  form$ = form$ + '<table border=2>'  
  form$ = form$ + '<tr><td>This is' 
  form$ = form$ + '<td>one row of' 
  form$ = form$ + '<td>cells in a table!' 
  form$ = form$ + '</tr>' 
  form$ = form$ + '</table>' 
  form$ = form$ + '</form>' 
  input dialogbox form$: data$ 
  end

TABLE ROW TAG ATTRIBUTES

Table 9-8 TABLE ROW Tag Attributes
Attribute Function
align alignment of the text within the table cell (left, right, center)
valign alignment of the text within the table cell (top, middle, bottom)
bgcolor= colorname sets the background colour for the table row
bordercolor= colorname sets the border colour for the table row
bordercolorlight= colorname sets the border highlight colour for the table row
bordercolordark= colorname sets the border shadow colour for the table row

9.4.5.4 TABLE DATA

<td>

Valid only in a table row tag, the TABLE DATA tag defines a table cell.

Example 9-50 <td > tag 

  form$ = '<form>' 
  form$ = form$ + '<table border=2>'  
  form$ = form$ + '<tr><td>Table data...' 
  form$ = form$ + '<td>More table data....' 
  form$ = form$ + '<td>And more table data!' 
  form$ = form$ + '</tr>' 
  form$ = form$ + '</table>' 
  form$ = form$ + '</form>' 
  input dialogbox form$: data$ 
  end

TABLE DATA TAG ATTRIBUTES

Table 9-9 TABLE DATA Tag Attributes
Attribute Function
colspan= number the number of columns this cell occupies
rowspan= number the number of rows this cell occupies
nowrap prevents word wrap within the cell
align alignment of the text within the table cell (left, right, center)
valign alignment of the text within the table cell (top, middle, bottom)
bgcolor= colorname sets the background colour for the table cell
bordercolor= colorname sets the border colour for the table cell
bordercolorlight= colorname sets the border highlight colour for the table cell
bordercolordark= colorname sets the border shadow colour for the table cell

9.5 Inserting Variable Data into a Form

To insert string variable string data into a form:

Example 9-51 Inserting String Variable Data into a Form 

  a$ = '1.000' 
  form$ = form$ + '<form>Enter Length in Meters:' + 
  '<input name=one size=10 type=text value=' + quote$(a$) + '></form>' 
   input dialogbox form$: ans$

To insert numeric variable data into a form:

Example 9-52 Inserting Numeric Variable Data into a Form 

  cash_amt = 123.45 
  form$ = form$ + '<form>Enter Dollar Amount:' + 
  '<input name=one size=10 type=text value=' + quote$(str$(cash_amt)) + '></form>' 
  input dialogbox form$: ans$

Previous Next Contents Index