|
Styling a tableJust as other elements, tables can be styled in two ways:
These two methods are described below. See Styling and formatting for background information about these two methods. Selecting a table, row or cellThere are several ways to select a table or row:
Selecting one cell is easy: just click in it. Use the Styles pane to see which styles apply to the currently selected table, row or cell.
Via the Formatting dialogThe Formatting dialog allows you to change the font, font size and color (see Fonts), the borders (see Border), the cell padding (the distance between the edge of the cell and its content, see Spacing), and the background color or image of the table and its cells (Background color and/or image). To open the Formatting dialog for one cell or for the table as a whole:
Note that in this case Table styles the table as a whole. When you choose Table and change the border, for example, the borders of the cells inside it will not be changed. To style all cells in a table or row at the same time via the Formatting dialog, you have to select the table or row first; see Selecting a table, row or cell Next, to open the Formatting dialog, choose Format > Table Cell. The settings that you make now will be applied to all cells in the selected row or table. Via a style sheetCascading Style Sheets (CSS) offer more ways to style a table and its contents, than the Formatting dialog does.
How to use style sheets is explained in another topic; see Styling templates with CSS files. Note that to make a style rule apply to a specific table, row or cell, you have to add an ID or class to that table, row or cell. Adding an ID or class to a table, row or cellA style sheet contains a bunch of style rules for different elements, that are identified via a CSS selector. This can be the element's HTML tag (without the angle brackets), ID or class. When used as a CSS selector, the HTML tag for a table is table. For a row, it is tr and for a cell, td. A style rule that uses one of these, however, would apply to all tables, rows, or cells. For a rule to be more specific you need to add an ID (for a unique element) or a class (for a set of similar elements) to the table, row or cell, and use that as the style rule's selector. Before you can add an ID or class to a table, row or cell, you have to select that table, row or cell (see Selecting a table, row or cell). After selecting the cell, row or table, type the ID or class in the respective field on the Attributes pane. In CSS, refer to the table, row or cell with Styling the first, last and nth rowsThe CSS pseudo-classes A CSS pseudo-class follows a selector to specify a special state of that selector. It always starts with a colon. The pseudo-classes The following CSS style rule selects the table row (tr) that comes first (:first-child) in its parent (which naturally is a table), and colors its background red:
Selecting a specific row, odd or even rows, or every nth rowThe pseudo-class Between the round brackets in
Via script (based on a data field value)To style a table, row or cell based on a data field value, you have to write a script (see Writing your own scripts). First add an ID or class to the table, row or cell that needs to be styled: select the element (see Selecting a table, row or cell) and add an ID on the Attributes pane. Then create a script, using that ID or class as the script's selector. The script can be very simple: if (record.fields.COUNTRY == 'CANADA') { results.css('color','green'); } The Designer Scripts API provides several functions to style elements, for example Styling based on a value in a detail tableStyling rows or cells in a detail table based on a value in the detail table goes a bit different. First set an ID on the detail table as a whole and create a script that uses for(var i = 0; i < record.tables.detail.length; i++){ if(record.tables.detail[i].fields['Shipped'] == 1) query("tr:nth-child(" + (i+1) + ")", results).css('color','green'); } This script loops over a detail table, evaluating the field To keep all CSS style rules together you could add the style rules to a class in the CSS file (see Styling templates with CSS files) and assign that class to the a row or cell using For another example, see this how-to: Change detail line formatting based upon a data field value. |
|