Configuring Cell, Row and Table Styles

Go to:

Right-Click, Styles, Cell...

Right-Click, Styles, Row…

Right-Click, Styles, Table…

 

You can customize the style sheet class and other style elements of the selected cell or row by specifying any valid <tr> and <td> tag attribute.  Use the convenient attribute list link to explore the range of possible attributes and values.  However, in most cases you’ll want to use only these attributes:

An attribute may be used only once in the Tag Attributes dialog.  For example, there can only be one Class attribute definition, one Style attribute definition, etc.

Style attribute

“Style” is probably the most frequently used attribute because it controls nearly all display properties.  It’s best to use CSS and HTML references available online for a complete list of Style values.

The example below changes the cell’s background color, the cell padding and makes the boldfaces the text in the cell.

Attribute

Example

Style

background-color:#ff7878;padding-left:100px;font-weight:bold;

The following more complex example illustrates how a wide variety of style properties is set.

Attribute

Example

Style

border:1px solid #999999; height: 100px; width: 300px; font-family: Arial, Verdana, sans-serif; font-weight:bold; padding-left:10px;text-align:right; text-decoration:underline; text-transform:capitalize; white-space:nowrap;

It is generally best to use cascading style sheet (CSS) attributes (e.g., background-color, font-size) rather than old-style HTML tag attributes (e.g., bgcolor, align) because they will interact properly with the attributes used in the cell’s underlying CSS class definition.  In fact, CSS attributes always take precedence over the old-style HTML attributes.

Style attribute examples

Description

background-color:#ff7878;

Sets a cell’s background color.

border:1px solid #999999”

Adds solid gray 1 piexel wide borders all around the table cell.

border:1px;

Places a 1 pixel border around the table cell.

font-family: Arial, Verdana, sans-serif;

Sets the preferred fonts and font properties.

font-weight:bold;

Boldfaces the cell contents.

height:100px;

Sets a cell (column) height to 100 pixels.

padding-left:100px;

Adds 100 pixels of padding to the left of the cell.

text-align:right;

Right-aligns the text within the cell.

text-decoration:underline;

Underlines the text in the cell.

text-transform:capitalize;

Capitalizes first letter in each word within table cell.

white-space:nowrap;

Sets no line wrap on blank spaces, i.e., no line wrap unless explicitly broken with <br/> and <table> tags and images.

width:100px;

Sets a cell (column) width to 100 pixels.

Overriding class attributes with local style attributes

In general, each cell has its own class which governs the various style elements, such as horizontal alignment (left, center, right), padding, font, etc.  Additionally each cell can have style attributes, such as horizontal alignment (left, center, right) that overrides the style elements in the underlying class.  You can quickly determine the cell’s class and style settings via the Tag Attributes dialog.

The example above shows a Style attribute overriding the text-align attribute in the underlying “ttc” class.

If you wish to adjust the text alignment on a cell by cell basis, the Style attribute is the easiest way to accomplish this.  If you wish to globally change the alignment of cells, then overriding the class definition in Styles.css is the preferred means.

Setting application-wide styles

Please note that the styles apply only for the selected cell.  If you need to apply styles globally, a better approach is to override the appropriate class definition in your application’s style sheet, Styles.css.  See Customizing Style Sheets and Page Styles for details.

Adding ID and runat attributes to rows and columns

In general, individual cells and rows do not have ID and runat attributes created for them.  However, you can add them yourself via the Tag Attributes dialog (right-click, Styles, Cell…).  This allows you to programmatically reference parts of the page at run-time, such as column headers and rows.  For example, you can write a code customization to programmatically hide or display certain rows and columns by referencing a column’s or row’s ID and setting the row’s or column’s “visible” attribute.

Related

Example: Configuring an Expand / Collapse Row Button

See Also

Customizing Web Page Layout

Navigating Your Application in Layout Editor

Using the Page Layout Spreadsheet and Toolbox

Customizing Page Contents with the Cell Editor

Configuring Cell, Row and Table Styles

Configuring Master Pages

Placing ASP.NET Directives in Application Pages

Using Frames in Application Pages