Science, Tech, Math › Computer Science How to Create Zebra Striped Tables With CSS Using :nth-of-type(n) with tables Print Science, Tech, Math PHP Programming Perl Python Java Programming Javascript Programming Delphi Programming C & C++ Programming Ruby Programming Visual Basic View More By Jennifer Kyrnin Jennifer Kyrnin Writer University of California University of Washington Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. Learn about our Editorial Process Updated on March 09, 2020 To make tables easier to read, it is often helpful to style rows with alternating background colors. One of the most common ways to style tables is to set the background color of every other row. This is often referred to as "zebra stripes." You can accomplish this by setting every other row with a CSS class and then defining the style for that class. This works but is not the best or most efficient way to go about it. When using this method, every time you need to edit that table you may have to edit every single row in the table to ensure each row is consistent with the changes. For example, if you insert a new row to your table, every other row below it needs to have the class changed. CSS makes it easy to style tables with zebra stripes. You don't need to add any extra HTML attributes or CSS classes, you just use the: nth-of-type(n) CSS selector. The: nth-of-type(n) selector is a structural pseudo-class in CSS that allows you to style elements based on their relationships to parent and sibling elements. You can use it to select one or more elements based on their source order. In other words, it can match every element that is the nth child of a particular type of its parent. The letter n can be a keyword (such as odd or even), a number, or a formula. For example, to style every other paragraph tag with a yellow background color, your CSS document would include: undefined Read More How to Add Internal Lines (Borders) in a Table With CSS By Jennifer Kyrnin p:nth-of-type(odd) {background: yellow;} Start With Your HTML Table First, create your table as you would normally write it in HTML. Don't add any special classes to the rows or columns. In your stylesheet, add the following CSS: tr:nth-of-type(odd) {background-color:#ccc;} This will style every other row with a gray background color starting with the first row. Style Alternating Columns in the Same Way You can do the same kind of styling to columns in your tables. To do so, simply change the tr in your CSS class to td. For example: td:nth-of-type(odd) {background-color:#ccc;} Using Formulas in an nth-of-type(n) Selector The syntax for a formula used in the selector is an+b. a is a number that represents the cycle or index size.n is actually the letter "n" and represents a counter, which stars at 0.+ is an operator, which may also be "-"b is an integer and represents the offset value — for example, how many rows down should the selector begin applying the background color. This is required if an operator is included in the formula. For example, if you want to set a background color for every 3rd row, your formula would be 3n+0. Your CSS might look like this: tr:nth-of-type(3n+0) {background: slategray;} Helpful Tools for Using nth-of-type Selector If you're feeling a little daunted by the formula aspect of using the pseudo-class nth-of-type selector, try the: nth Tester site as a useful tool that can help you define the syntax to achieve the look you want. Use the dropdown menu to select nth-of-type (you can also experiment with other pseudo-classes here, too, such as nth-child). Cite this Article Format mla apa chicago Your Citation Kyrnin, Jennifer. "How to Create Zebra Striped Tables With CSS." ThoughtCo, Dec. 2, 2021, thoughtco.com/zebra-striped-table-in-css3-3466982. Kyrnin, Jennifer. (2021, December 2). How to Create Zebra Striped Tables With CSS. Retrieved from https://www.thoughtco.com/zebra-striped-table-in-css3-3466982 Kyrnin, Jennifer. "How to Create Zebra Striped Tables With CSS." ThoughtCo. https://www.thoughtco.com/zebra-striped-table-in-css3-3466982 (accessed April 26, 2024). copy citation