<< Click to Display Table of Contents >> Navigation:  Delphi HTML Report Library > Tables > Styling

 

There are many ways of styling table cells. In addition to a template-cell template we can use CSS as following:

1.attribute FIELD.class specifies the class that will be applied to all cells in the column. For example

 

<styles>

.green_cell {background: #eeffee}

</styles>

…

  <FIELD name="CITY" caption="City" class="green_cell"/>

 

Fills all CITY column cells with green

 

2.It is possible to use an attribute field with the field name . For example

 

td [field="COMPANY"] {background: yellow}

 

Make all cells in COMPANY column yellow.

Row and cell attributes could be combined. So,

tr[state="HI"] td[field="COMPANY"] {background: yellow}

Fills COMPANY cells only for rows where State = HI

 

3.Cell class could be directly specified in SQL by alias. For example

 

  <style>.

  FL {background: yellow}c.

</ style>

...

  Select c.*, C.STATE as ROW_CLASS from customer c

 

Makes yellow all rows with STATE = FL

 

Class could be specified for a single cell. In this case, an alias <FIELD> _CLASS is used.

Example:

 

  select c.*, iif(position('6' in Phone)>0, 'red_cell', '') as PHONE_CLASS from customer c

 

Will set red_cell class for all cells in the PHONE column  containing ‘6’.

 

4.All rows in the table contains row attribute with a line number which  also could be used for styling. In addition, the even rows contain class odd. Following style example grayed out all even rows:

 

tr.odd {background: #eee}

 

5.All cells contain a type of the field in a class attribute, as well as the cell value in a ‘value’ attribute .  The combination of these attributes could be used for styling. For example, will mark red all negative float values:

 

td.float[value^="-"] {color: red}

 

Or set center alignment for all  integer cells:

 

td.integer {text-align: center}