AEM started using SFU Groups for access management on Wednesday, December 11.
If you lost access, please reach out to your site owner.

Styling Zebra Tables

CSS

What is a Zebra Table?

A zebra table is a table that has been styled to present its rows in automatically alternating colours, making the rows more readable.

Example of a zebra-striped table with the 'alternate' style applied.

How to style a Zebra Table

  1. Drag a Text component on to the page where you want the table to appear.
  2. Double-click the Text component and click on the Table button in the Rich Text Editor.
  3. Specify the number of rows and columns. Select the number and type of header rows you want to include. (Note that header rows have a white background to differentiate them from regular table rows; therefore, the zebra style will not apply to headers.)
  4. Specify the width of your table. Leave the height field blank.
  5. Locate the Border, Cellspacing and Cellpadding fields. Remove existing values and leave it empty. Click OK.
  6. In the CSS class field enter alternate to apply the zebra-striping style.
  7. Enter the data in your table. Press tab to jump to the next table cell.
  8. When the table has been filled out, click OK.

Example of a styled Zebra Table:

First row item 1 First row item 2
Second row item 1 Second row item 2
Third row item 1 Third row item 2
Fourth row item 1 Fourth row item 2
Fifth row item 1 Fifth row item 2

The HTML code used to create the table above:

<table width="500px">
    <tbody>
        <tr>
          <td>First row item 1</td>
          <td>First row item 2</td>
        </tr>
        <tr>
          <td>Second row item 1</td>
          <td>Second row item 2</td>
        </tr>
        <tr>
          <td>Third row item 1</td>
          <td>Third row item 2</td>
        </tr>
        <tr>
           <td>Fourth row item 1</td>
           <td>Fourth row item 2</td>
        </tr>
        <tr>
          <td>Fifth row item 1</td>
          <td>Fifth row item 2</td>
        </tr>
    </tbody>
</table>