Controlling the Report Table Presentation

While controlling the report presentation is similar for all elements, there are a few unique concepts for tables.

Like many elements, the Data Table element includes the Class attribute. It also includes the Alternating Row Class attribute and a few other attributes for convenience: Cell Spacing, Caption Class, and Column Header Class.


1. Formatting the data table rows

If you’re of a certain age, you may remember “greenbar” printer paper. Its alternating row colors made it easy to read long tabular reports. We can do the same thing in Studio.

To format the table rows, add the following new classes to your style sheet and apply them to the Data Table element. Assign the .TableRowStyle class to the Class attribute and the .TableAltRowStyle class to the Alternating Row Class attribute.

.TableRowStyle
{
   background-color : #99CC99;
}

.TableAltRowStyle
{
   background-color : #CCFF99;
}


2. Formatting the table data header/total rows

To format the table header and total rows, add the following new classes to your style sheet. Assign .TableHeaderStyle class to the Data Table element’s Column Header Class attribute and the .TableTotalStyle to the Summary Row element’s Class attribute.

.TableHeaderStyle
{
   background-color : #F0FFFF;
}

.TableTotalStyle
{
   background-color : #F0FFFF;
}

Hint: To change the class of the table header in versions of Logi products earlier than version 7.x, add a class qualified by the TH tag (i.e. TH.TableRowClass {background-color : Green;}).


3. Aligning column data 

To align column data, add this new class to your style sheet and apply the class to the Data Table Column showing numeric data (colOrderCount) elements’ Class attribute.

.ColAlignRightStyle
{
   text-align : right;
}


4. Removing the border around the page control images 

To remove the annoying border around the page controls, add the following style to the style sheet. Note that this is a class that affects the HTML <img> tag so the class name does not start with a period.

IMG
{
   border : 0;
}

Note: This style will remove the border from around all images in a report.


5. Formatting Column Data

The format of the data in a table column is controlled by the Format attribute of the element displaying the data. The Format attribute supports all the capability built into the Microsoft Visual Basic Format function.

The Format function supports predefined formats and or user-defined formats.

Hint: See MSDN® at http://msdn.microsoft.com/, for complete description of the syntax of user-defined formats.

For example, to format the Order Date in the sub-report, set the Label element’s Format attribute to a value of “Short Date”. For convenience, the Suggestions panel provides a list of the predefined formats.


6. Stretching a sub-table to fill the table area

Set the Sub-Report element Width and WidthScale attribute to 100% to cause the sub-report to match the width of the table.


7. Controlling the space between table cells

Set the Data Table and/or Sub-Data Table element(s) Cell Spacing attribute to adjust the space between table cells.

8. Controlling the table border

Set the Data Table and/or Sub-Data Table element(s) Border attribute to draw a border, of the specified width, around the table.

At this point, the report should look something like this (image was clipped for space):

Figure 4.9: Report Preview