Table Styling

Styles can be assigned to design elements of a table. Tables have a hierarchy, and the assignment of styles to Table elements will project the effect of the style down through the hierarchy.

By assigning a style to the Table element, that style will propagate through all the sub elements, such a Columns, Rows, Cells and Cell Elements. Assigning a style to a Cell will override for that cell any style being projected from above.

When working in the table designer, the stylesheet used is in Administration -> Settings on the tab “Table editor styles”.

When running a report, it is worth noting that including a stylesheet in the report template will override the default stylesheet. But remember, when working in the table designer only the default stylesheet is used.

The styling commands available as follows:

Style Command	Options	Notes
BorderColour		Red #FEA423
BorderThickness		Top, Left, Bottom, Right Values in document units
Margin		Top, Left, Bottom, Right Values in millimetres
Padding		Top, Left, Bottom, Right Values in millimetres
Background		Red #FEA423
Foreground		Red #FEA423
FontFamily		Arial
FontStyle	Regular\|Bold\|Italic\|Underline\|Strikeout
FontSizePt		12
FontStrech	Normal\|Condensed
TextTrimming	True\|False
TextWrapping	True\|False
WidthMM
HeightMM
CellVAlignment	Near\|Center\|Far
ElementAlignment	Near\|Center\|Far
ElementLinebreak	SameLine\|NewLine	This can be used to place two or elements in a cell on the same line.
Visibile	True\|False

Styling Commands

The example stylesheet exposes a style named “Borders”. If applied to style in the Table element, then the output table will be rendered with borders.

<?xml version="1.0" ?>
<StyleCollection>
        <Style name="Borders" >
               <BorderThickness value="1,1,1,1"/>
        </Style>
</StyleCollection>

Named styles can be added within StyleCollection element. Within a named Style a number of styling commands can be added. See the table above for the list of possible styling commands. All styling commands have a value attribute which is used to parameterize the command. For example <FontStyle value=”Bold” />

Default Table Designer Style:

<StyleCollection>
  <!-- NOTE: ORDER IMPORTANT -->
  <!--
		BorderColour				: #nnnnnn or Name 	e.g. White
		BorderThickness				: nn,nn,nn,nn 		e.g. 0.5,0.5,0.5,1
		Margin						: nn,nn,nn,nn 		e.g. 0.5,0.5,0.5,1
		Padding						: nn,nn,nn,nn 		e.g. 0.5,0.5,0.5,1
		Background					: #nnnnnn or Name 	e.g. White	
		Foreground					: #nnnnnn or Name 	e.g. White
		FontFamily					: Name				e.g. Arial
		FontSizePt					: nn
		FontStyle					: Regular, Bold, Italic, Strikeout, Underline (can be combined with comma)
		TextTrimming				: True|False
		TextWrapping				: True|False
		WidthMM						: nn
		HeightMM					: nn
		CellVAlignment				: Near, Center, Far
		ElementAlignment			: Near, Center, Far	
		ElementLinebreak			: SameLine|NewLine
		Visible						: True|False
  			  
		Perfion Color Scheme:
		Blue	#1E3D89
		Green	#20B3AA
		Yellow	#FFD52A
			  
-->
  <Style name="Base" basedOn="">
    <FontFamily value="Arial" />
    <FontSizePt value="9" />
    <!-- <Margin value="2,2,2,2" /> -->
    <Padding value="2,2,2,2" />
    <Foreground value="#292c38" />
  </Style>
  <Style name="BaseNew" basedOn="">
    <FontFamily value="Arial" />
    <FontSizePt value="9" />
    <!-- <Margin value="2,2,2,2" /> -->
    <Padding value="6,8,2,2" />
    <Foreground value="#292c38" />
  </Style>
  <Style name="WhiteBackground" basedOn="Base">
    <Background value="White" />
  </Style>
  <Style name="WhiteBackgroundImage" basedOn="WhiteBackground">
    <Padding value="5,5,5,5" />
  </Style>
  <Style name="RowBackground" basedOn="Base">
    <Background value="#EEEDE9" />
  </Style>
  <Style name="RowBackgroundAlt" basedOn="Base">
    <Background value="#D6D7D6" />
    <Padding value="6,10,2,2" />
  </Style>
  <Style name="SubtleRowBackground" basedOn="Base">
    <!-- <Background value="#AAAAAAA"/> -->
    <BorderThickness value="0,0,1,0" />
    <BorderColour value="#D6D7D6" />
    <Padding value="30,2,30,2" />
  </Style>
  <Style name="SpecValue" basedOn="Base">
    <FontStyle value="Bold" />
    <Background value="#FFD52A" />
  </Style>
  <Style name="Header" basedOn="Base">
    <Background value="#1E3D89" />
    <Foreground value="White" />
    <FontStyle value="Bold" />
  </Style>
  <Style name="Center" basedOn="Base">
    <ElementAlignment value="Center" />
  </Style>
  <Style name="CenterV" basedOn="Base">
    <CellVAlignment value="Center" />
  </Style>
  <Style name="Bold" basedOn="Base">
    <FontStyle value="Bold" />
  </Style>
  <Style name="Small" basedOn="Base">
    <FontSizePt value="5" />
  </Style>
  <Style name="Large" basedOn="Base">
    <FontSizePt value="14" />
  </Style>
  <Style name="Right" basedOn="BaseNew">
    <ElementAlignment value="Far" />
  </Style>
  <Style name="Red" basedOn="Right">
    <ElementAlignment value="Far" />
    <Background value="Red" />
  </Style>
  <Style name="SameLine" basedOn="BaseNew">
    <ElementLinebreak value="SameLine" />
    <Visible value="False" />
  </Style>
  <Style name="SameLineImage" basedOn="SameLine">
    <Padding value="5,5,5,5" />
  </Style>
  <Style name="LeftBorder" basedOn="Base">
    <Padding value="5,5,5,5" />
    <BorderThickness value="0,1,0,0" />
    <BorderColour value="SteelBlue" />
  </Style>
</StyleCollection>

Table Styling

Was this article helpful?

Comments