2ert2023 09.97 HTML Table Styling 3 w Tutorialsy —Exercisesw Servicese§ QO Log in schools HTML Table Styling [crv] Looe | Use CSS to make your tables look better. HTML Table - Zebra Stripes If you add a background color on every other table row, you will get a nice zebra stripes effect. 1 2 3 4 5 6 7 8 9 10 ul 12 13 14 15 16 7 18 19 20 To style every other table row element, use the :nth-child(even) selector like this: Example trinth-child(even) { background-color: #D6EEEE; nitpsdlmwwsvdschools.comihimihtm|_table_stying.asp ve2ert2023 09.97 HTML Table Styling 3 w Tutorialsy —Exercisesw Servicese§ QO Log in schools HTML Table - Vertical Zebra Stripes To make vertical zebra stripes, style every other column, instead of every other row. 1 2 3 5 6 7 9 10 a 12 43 14 15 16 7 18 19 20 Set the :nth-child(even) for table data elements like this: Example td:nth-child(even), th:nth-child(even) { background-color: #D6EEEE; y Note: Put the :nth-child() selector on both th and td elements if you want to have the styling on both headers and regular table cells. nitpsdinww:wdschools.comhimitm|_table_stying.asp 282ert2023 09.97 HTML Table Styling 3 w Tutorialsy —Exercisesw Servicese§ QO Log in schools You can combine the styling from the two examples above and you will have stripes on every other row and every other column. If you use a transparent color you will get an overlapping effect. Use an rgba() color to specify the transparency of the color: Example trinth-child(even) { background-color: rgba(15@, 212, 212, @.4); + thinth-child(even),td:nth-child(even) { background-color: rgba(15@, 212, 212, 0.4); Horizontal Dividers First Name Last Name Peter Griffin $100 Lois Griffin $150 Joe Swanson $300 nitpsdlmwwsvdschools.comihimihtm|_table_stying.asp 382ert2023 09.97 w Tutorials ¥ schools Example tr { Services border-bottom: 1px solid #ddd; Hoverable Table HIML Table Styling Q 0 Log in Use the :hover selector on tr to highlight table rows on mouse over First Name Peter Lois Joe Example tr:hover {background-color: [errs] nitpsdlmwwsvdschools.comihimihtm|_table_stying.asp Last Name Griffin Griffin Swanson HDGEEEE;} Log in to track progress Savings $100 $150 $300 Lee | 482ert2023 09.97 HTML Table Styling 3 w Tutorials Exercisesw Servicesey§ QO Login schools det FRIDAY vat error ae Crean ely COLOR PICKER nitpsdlmwwsvdschools.comihimihtm|_table_stying.asp se2ert2023 09.97 HTML Table Styling 3 w Tutorials» —Exercisese Servicese§ QU O SignUp Login acho = CSS JAVASCRIPT SQL. PYTHON. «JAVA. PHP-—«S HOWTO BU Learn Front-end Development High Demand: Front-end skills are in demand - secure your future. ‘ Check It Out! 3 w SPACES UPGRADE NEWSLETTER schools GET CERTIFIED REPORT ERROR Top Tutorials htipsuimaew.ndechools.comihtmi/niml table_siying.2sp oe2ert2023 09.97 HTML Table Styling 3 WW tutoriaisy — Brercisese Servieesey Q O SignUp Login schools = CSS JAVASCRIPT SQL. PYTHON JAVA” PHP-—«S HOWTO W3.CSS_— CC W3.cSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial C++ Tutorial jQuery Tutorial Top References HTML Reference SS Reference JavaScript Reference SQL Reference Python Reference W3.CSS Reference Bootstrap Reference PHP Reference HTML Colors Java Reference ‘Angular Reference jQuery Reference Top Examples Get Certified HTML Examples HTML cerifiate ss Examples CSS Certiicate JavaScript Examples JavaScript Certificate How To Examples Front End Certificate SQL Examples SQL Certificate Python Examples Python Certificate W2.CSS Examples PHP Certificate Bootstrap Examples Query Certificate PHP Examples ‘Java Certificate Java Examples + certificate XML Examples Chcerticate ‘Query Examples XML Certificate G@ @ ® © Forum asour W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning Tutorials, references, and examples are constantly reviewed to avold errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2023 by Refsnes Data. All Rights Reserved. W3Schools is Powered by htipsuimaew.ndechools.comihtmi/niml table_siying.2sp 7182ert2023 09.97 HTML Table Styling 3 w Tutorials» —Exercisese Servicese§ QU O SignUp Login schools = CSS JAVASCR SQL PYTHON JAVA PHP = HOWTO. —-W3,CSS_—C htipsuimaew.ndechools.comihtmi/niml table_siying.2sp 8