- Current Picks
- About the Web Team
- Content Editor Resources
- Definitions / FAQ
- Need Help Getting Started?
- CMS Documentation (PDF)
- Official Webpage Guidelines
- Sample Website
- Website Fonts & Colors
- Smart Template
- Website Showcase
- Website Policies
- Under Construction
Web Development Office
Immaculata Hall, 90
Visit our office
Mon. - Fri. 8:30a - 4:30p
Striped TablesStriped Tables are a way to keep the information on within a table on your website nice, neat, and easy to read by programatically reversing each table row with an alternate color.
To create a striped table:
- On the page you want the table, click the "Add Content" button, and select "Reuse Content".
- In the "Title" box, type "StripeMe" and hit the search search button
- Choose "stripeMe zebra Auto Tables with JQuery" for a table without the need for dividing borders between each column and row (this is the standard choice unless your table content is very complicated and difficult to read).
- Choose "StripeMe Zebra Striped Tables Jquery Script with Borders" for a table that needs borders in between each row and column to separate it.
- Once you've chosen a script, leave that piece of content alone on the page. Create a new content block to insert your table, or open the content block that already has your table in it.
- In WYSIWYG mode, select the table you'd like to work with.
- In the toolbar above, choose the table tool (3rd row, 1st icon on the left).
- In the "Class" Field, change the dropdown box to say "(value)"
- In the box, type EXACTLY "stripeMe zebra." This can also be achieved in Code mode by putting class="stripeMe zebra" within the table tag.
- By clicking "Update" you have created a striped table. Each time you add a row to your table, the color will alternate between white and gray. If you mouse over a particular row, the color of the row will change to a little bit darker gray, making it even easier to read.
To create a heading row for your table:
- click on a cell within the row that you want to be the heading row.
- In the toolbar above, choose the "Table Row Properties" tool (3rd row, 2nd icon from the left)
- In the "Row in table part" field dropdown, choose "Table Head" and make sure that "Update Current Row" is selected from the dropdown at the bottom of the box. This can also be achieved in Code mode by changing the td tags surrounding the heading cells to th.
- Click the update button.
Striped Tables Looks Like This:
|I own a dog.||no||no||yes|
|I am allergic to peppers.||no||yes||no|
|I drink orange juice.||yes||yes||no|
|I like Magic 93.||YES!!!!!||NO!!!!!||NO!!!!!|
|I have a Facebook account.||yes||no||yes||Tequila?||yes||hells yes||yes|
See it in action on a Marywood Department site!