Reports in HTML: using CSS to control presentation

October 14, 2011 by Igor Lozhkin
Arnica WebReport generates output using clean HTML code with CSS classes controlling presentation of virtually any of its atomic presentation elements: data table, prompt page, toolbar items, headers and footers, data groups, grand totals, dimension data output, etc. This article provides an overview of how CSS classes are used to control data table elements.

The screenshot below outlines major presentation elements of the data table:

10-14-2011 10-23-33 PM.png

Each presentation element has its own class, included in the default WebReport cascading style sheet:

 CSS classDescription
aaReportTableTop level report data table
aaReportTableCaptionCellData table top row cell (table caption)
aaColumnCaptionCellColumn caption cell
aaTableRowTable row element
aaTableRow2Table row element with alternative style
aaValueCellTable cell
aaValueCell2Table cell in row with alternative style
aaDataGroupCaptionCellData group caption cell

The default CSS is common for all reports hosted by the WebReport engine. Designers may also include a custom CSS reference per individual report on the general report style properties page to subclass presentation style. By changing corresponding class attribute values, report style may be customized to required custom specification:

10-14-2011 10-47-20 PM.png

The report used for a screenshot in the article is available from Arnica Software demo site at the following URL: