Getting Started6:Organizing with Tables

[kino]

Tables are used to present information in a way that makes it easy to understand, compare, or search. In Curl, a table is made up of cells arrangedin rows and columns. The cells have attributes that you can set, such as the background color and borders. You can also set attributes on an entire row or column, as well as the entire table.


Creating a Table
You can place content in tables by using the table, row, and cell text formats. The table text format is defined in the following manner: a table contains one or more rows, and a row contains one or more cells.


Since a table is composed of rows, and rows are composed of cells; the simplest table can be written in the following way:

Code:

{curl 6.0, 7.0 applet}
{applet  {compiler-directives careful? = true}}

{table
   {header-row  {cell Color}  {cell Hex Value}}
   {row {cell Aqua}  {cell 00FFFF}}    
   {row {cell Wheat} {cell F5DEB3}}
   {row {cell Yellow} {cell FFFF00}}
}

A table in Curl is defined by rows and cells. Notice that this format allows the columns to be indirectly defined and therefore are not directly specified.



By default, a table has a transparent background, no borders, and a 1mm margin around each cell.


•Each column of the table is automatically made wide enough to show the widest cell in the column.
•Each row is made tall enough to show the tallest cell in the row.


Modifying the Table Appearance
The options specific to table modify the appearance of the entire table and cells of the table. Most of these options are appropriately named with the prefix cell-*. A light gray color to the table is specified through the background property. In this case, the color is specified using a hexadecimal notation. The color #f0f0f0 is specified by a sharp sign followed by three 8-bit color values (red, green, and blue). This will be familiar to HTML coders.

Code:

{curl 6.0, 7.0 applet}
{applet  {compiler-directives careful? = true}}

{table
   background = "#f0f0f0",    
   color = "blue",  
   cell-border-width = 2pt,    
   cell-border-color = "navy",  
   cell-border-style = "sunken",  
   cell-margin = 10pt,
   {row {cell Aqua}  {cell 00FFFF}}    
   {row {cell Wheat} {cell F5DEB3}}
   {row {cell Yellow} {cell FFFF00}}
}

In the next example, we are coloring the text contained in each cell using the color option. Notice that we are either using a predefined Curl color, or the hexadecimal equivalent.

Code:

{curl 6.0, 7.0 applet}
{applet  {compiler-directives careful? = true}}

{table
   background = "#48D1CC",  
   color = "blue",  
   cell-border-width = 2pt,    
   cell-border-color = "navy",  
   cell-border-style = "sunken",  
   cell-margin = 10pt,
   {row {cell color = "aqua", Aqua}  {cell 00FFFF}}    
   {row {cell color = "wheat", Wheat} {cell F5DEB3}}
   {row {cell color = "#FFFF00", Yellow} {cell FFFF00}}
}

Tip: In these cases, even though a particular option is set on the table, its value can be overridden at the row level, then again at the cell level, as with other graphics in a graphic hierarchy.


Now, let's color the lines between rows and columns of a table. Notice we are removing the cell-border-width and cell-border-color and adding vertical and horizontal lines.

Code:

{curl 6.0, 7.0 applet}
{applet  {compiler-directives careful? = true}}

{table
   background = "#48D1CC",  
   border-width = 4pt,
   border-color = "black",
   border-style = "ridge",
   horizontal-line-color = "red",
   horizontal-line-width = 2px,
   vertical-line-color = "blue",
   vertical-line-width = 2px,
  
   {row {cell color = "aqua", Aqua}  {cell 00FFFF}}    
   {row {cell color = "wheat", Wheat} {cell F5DEB3}}
   {row {cell color = "#FFFF00", Yellow} {cell FFFF00}}
  
}

Notice that the following cell options have been removed from the code and replaced with the vertical and horizontal lines.

Code:

cell-border-width = 2pt,
cell-border-color = navy,
cell-border-style = sunken,

For more information regarding predefined colors, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Graphics and Rendering > Fill Patterns and Textures > Creating a FillPattern > From Solid Colors > Supported Color Names



Skipping and Spanning Cells
Use skip to skip one or more cells in the table. skip does not merge the content of cells, rather it leaves cells empty.

Code:

{curl 6.0, 7.0 applet}
{applet  {compiler-directives careful? = true}}

{table
   border-width = 1pt,
   border-color = "black",
||--    cell-border-width = 1pt,
||--    cell-border-color = "black",
   horizontal-line-color = "red",
   horizontal-line-width = 1px,
   vertical-line-color = "blue",
   vertical-line-width = 1px,
   {row
       {cell earth} {cell wind} {cell fire}
   }

   || The {skip} in the following row takes the place of one cell.

   {row
       {cell water} {skip} {cell earth}
   }
   {row
       {skip 2} {cell fire}
   }
  
}

Tip: If you use skip, you may be happier drawing grid lines using horizontal-line-width or vertical-line-width than using cell borders.


The next example introduces another feature of tables. The colspan property is used when you want a single cell to expand to cover multiple columns. A rowspan property is also available on the cell text format.

Code:

{curl 6.0, 7.0 applet}
{applet  {compiler-directives careful? = true}}

{table
   background = "beige",  
   color = "blue",  
   border-width = 4pt,
   border-color = "navy",
   border-style = "ridge",
   cell-margin = 10pt,
   horizontal-line-color = "navy",
   horizontal-line-width = 1px,
   vertical-line-color = "blue",
   vertical-line-width = 1px,
   {row
       {cell colspan = 2, earth} {cell rowspan = 2,  valign = "center", wind}
   }
   {row
       {cell fire} {cell water} {skip}
   }
}

In the example above, we are using valign to vertically align the text in the center of the column. Values for valign can be top, center, or bottom.



Tip: In the case of using a rowspan, you have to be careful to make sure the cells to be spanned into are empty by using skip.



For more information regarding table and related text formats, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Text Formatting > Table Text Formats



Dyamically Creating a Table
Up until now, we have been using the table text format. Underlying this format is the Curl language class Table. In order to dynamically create table information, we must use the Table class.


The Table class is similar to table, however it gives additional programmatic functionality. The following example provides a Table similar in functionality to the table examples above.

Code:

{curl 6.0, 7.0 applet}
{applet  {compiler-directives careful? = true}}

{Table columns=3,
   border-color="black",
   border-width=1pt,
   cell-border-color="black",
   cell-border-width=1pt,
   background="beige",
   {cell colspan = 2, halign = "center", earth},
   {cell rowspan = 2,  valign = "center", wind},
  "fire" ,
  "water",
   {skip}
}

In the next example, we will create the table contents programmatically. We first create an empty table that has 5 columns defined. Then, we will dynamically add content to the table. In our example we are using generated numbers. Note that any content can be used in its place.

Code:

{curl 6.0, 7.0 applet}
{applet  {compiler-directives careful? = true}}

{value
   let size:int = 10
   let t:Table =
       {Table
           columns = 5,
           halign="right"}
   {for i:int = 1 to 25 do  
       {t.add i}
   }
   t
}

For more information regarding Tables, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Graphical User Interface > Graphical Containers > Tables