Setting alternating background colors in a repeating table

Setting alternating background colors in a repeating table

After you insert a repeating table in a template (see Inserting a repeating table), you can customize it by alternating the background color of the table rows.

To set alternating table row background colors:

  1. In the Document window, select a row in the repeating table.
  2. Click the Show Code view or Show Code and Design view button in the Document toolbar so you can access the code for the selected table row.
  3. In Code view, edit the <tr> tag to include the following code:
    <tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">

    You can replace the #FFFFFF and #CCCCCC hexadecimal values with other color choices.

  4. Save the template.

The following is a code example of a table that includes alternating background table row colors:

<table width="75%"  border="1"  cellspacing="0" cellpadding="0">
<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>

<!-- TemplateBeginRepeat name="contacts" --> 
<tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@"> 
<td> <!-- TemplateBeginEditable name="name" --> name <!-- TemplateEndEditable --> 
<td> <!-- TemplateBeginEditable name="phone" --> phone <!-- TemplateEndEditable --> 
<td> <!-- TemplateBeginEditable name="email" --> email <!-- TemplateEndEditable --> 
  <!-- TemplateEndRepeat --> 

Getting Started with Dreamweaver
Dreamweaver Basics
Working with Dreamweaver Sites
Laying Out Pages
Laying Out Pages with CSS
Managing Templates
Adding Content to Pages
Working with Page Code
Preparing to Build Dynamic Sites
Making Pages Dynamic
Developing Applications Rapidly