Dreamweaver

Set alternating background colors in a repeating table

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

  1. In the Document window, select a row in the repeating table.
  2. Click the Show Code View or Show Code And Design Views 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>
<td> <!-- TemplateBeginEditable name="phone" --> phone <!-- TemplateEndEditable --> 
</td>
<td> <!-- TemplateBeginEditable name="email" --> email <!-- TemplateEndEditable --> 
</td>
</tr>
  <!-- TemplateEndRepeat --> 
</table>