 |
|
|
|
Using the Cell Attributes editor |
|
The Cell Attributes editor provides style control over data grids with granularity
at the HTML table cell level. You can add a new style or override an existing default style.
- Samson Wong, Graphic Designer, Iron Speed, Inc.
March 4, 2009
Iron Speed Designer V6.0
|
|
Introduction |
Hidden away in Designer v6.0's Quick Layout editor is a little gem of a feature called
the "Cell Attributes editor". It provides style control over data grids with granularity
at the HTML table cell level. You can add a new style or override an existing default style.
Best yet, your style customizations are guaranteed to be preserved across subsequent page
builds/regenerations.
To invoke the editor, simply right click on any table cell, and select the "Cell Attributes..." menu option.
Invoking the Cell Attributes editor for the "CustomerID" cell.
In the Cell Attributes editor dialog which appears, you'll notice that there will already be
a CSS style defined for the particular table cell of interest. (In our case, that's "ttc".) This is the default style
for that cell, and it sets certain attributes (for example, border, background color, font, padding,
and text alignment) which are suitable for most cases. But since you're reading this article,
you think you can do better! Well, here's how you go about doing so.
|
Defining Your Own Style |
You may use your own style class instead of the existing one. Simply define a new class and
replace the default class name with your own.
For example, with the default style class defined (in BaseStyles.css) as
.ttc {
background-color: #ffffff;
border-bottom: 1px #a89fa9 solid;
font-family: Arial, ms sans serif;
font-size: 10px;
padding: 5px 4px 5px 4px;
text-align: left;
vertical-align: top;
}
the table grid will render as in the following figure. (Note the default style of the cells in the "CustomerID" column.)
You can define a new class "myttc" (in Styles.css), preserving the attributes in the default which you need
(background-color, border-bottom),
adding new attributes (color, font-weight), overriding others (font-family, text-align), and leaving out the rest
you don't want (font-size, padding, vertical-align):
.myttc {
background-color: #ffffff; /* preserved */
border-bottom: 1px #a89fa9 solid; /* preserved */
color: #000000; /* newly added */
font-family: Lucida Sans Unicode, ms sans serif; /* overridden */
font-weight: bold; /* newly added */
text-align: right; /* overridden */
}
Now make sure your new class is used by changing the "value" in the Cell Attributes editor. (Note that, if no default entry had been defined, you would need to define a new attribute/value pair, e.g., "class/myttc".)
After a quick rebuild of the page and browser refresh, the table grid will now be rendered using your newly defined class, "myttc".
A quick perusal of the "view-source" of the page shows how your new class is applied:
<td class="myttc">ALFKI </td>
|
Defining/Overriding Existing Styles Inline |
The previous section showed how you would normally define your own style class which can be applied to multiple columns if need be. However, if you just wanted a quick-and-dirty change of one cell, you can apply a style inline.
Again, with the default style class defined (in BaseStyles.css) as
.ttc {
background-color: #ffffff;
border-bottom: 1px #a89fa9 solid;
font-family: Arial, ms sans serif;
font-size: 10px;
padding: 5px 4px 5px 4px;
text-align: left;
vertical-align: top;
}
and, to this default, say you want to add some new styles (color, font-weight), and override others (font-size, text-align):
color: #ff0000; /* add new */
font-size: 14px; /* override */
font-weight: bold; /* add new */
text-align: right; /* override */
You can simply type these new styles directly in the Cell Attributes editor. (Note that with inline styles, while you can
add new styles and override existing styles, you cannot delete styles from "ttc". If there are some style in "ttc" which you don't want, you would need to delete the "class/ttc" entry, and add the appropriate styles to your inline specification.)
After another quick rebuild of the page and browser refresh, the table grid will now be rendered using your newly defined inline style.
Another quick check of the "view-source" of the page shows how your inline style is applied:
<td class="ttc" style="color: #ff0000; font-size:14px; font-weight:bold; text-align: right;">ALFKI</td>
|
Conclusion |
In general, you will only need to use "class" and/or "style" in the Cell Attributes editor.
Here is a list of valid attributes for the TD tag, but note that except for "rowspan" and "colspan", most are deprecated and are better implemented via "class" and "style".
Note also that you can add any style specification in the Cell Attributes editor, however, only valid ones will be honored by the browser. ("With great power comes great responsibility.") This
CSS Reference has a list of valid style specifications.
Most but not all are applicable to the table cell.
With the new "Cell Attributes editor", you have full control of the look-and-feel of your data grid. You're the man (or woman)! Go ahead and customize away.
|
|
|
|
