X
Back to the
Component Shop Read this first! Accordion Alert / Callout Another Lightbox Gallery Audio Player with Playlist Auto Sidebar Backbutton Basic Form Before/After Comparison Buttons Collapsible Alert Contact Form Count-down Script Crossfade Slider CSS Parallax Cut-out Text Decorative Background Details/Summary Classes Drilldown Menu Drop-down Easy Mega Menu Equal Height Columns Filtered Portfolio Flip-cards Glossary Table Hamburger Menu HTML Quiz Horizontal Tabs Image Gallery Image Modal Image Shapes Image Slider with Fade Jquery Parallax Lazy Loading Lightbox Gallery Magnifying Glass Masonry Grid Gallery Mega Menu Modal Optimal Image Sizes Oval Image PHP Includes Range Slider Read More Button Responsive Card Table Responsive Navbar Responsive Shrinknav Responsive Sidebar Responsive Table Round Image Scroll to Top Searchbox Simple Shapes Simple Cards Simple Slider Skill Bars Slide-in Nav Sticky Mega Menu Sticky Vertical Menu Subnav in Dropdowns Tabbed Gallery Tab Navigation Text on Image Translucent Image Translucent Text Layer Vertical Tabs Video Video Scroller Wrapping Text Years Completed Zebra Striped Table
☰

Zebra Striped Table

Longest rivers in Italy Starting Ending Length
Po French border,Cottian Alps Adriatic Sea 652 km
Adige South Tyrol, Ötztal Alps Adriatic Sea 410 km
Tiber The Apennines, Monte Furnaiolo Tyrrhenian Sea 405 km
Adda Rhaetian Alps, Livigno Po 313 km
Oglio Corno dei Tre Signori Po 280 km
If you have a long and wide table, it can be hard to follow the lines with your eyes. Therefore tables are often made zebra striped with a different colour for the odd or even lines.
To add rows to the table just copy one of the existent <tr>...</tr> with everything between those tags, as many times as needed. You don't have to worry about the colouring of lines, because the styling will automatically give the different colour to all even lines. Instead of 'even' one might just as well choose 'odd'.

Download the component.