\n
<\/p>\nThis is a continuation of our XHTML\/CSS table tutorials. In this tutorial we will be using the same table as before, but I will show how to have the rows alternate in color. To achieve this we will be using CSS classes.<\/p>\n
We are going to start with the table from the \u201cStyling Tables with CSS Tutorials\u201d.
\n<\/p>\n
Here is the full source code for that table.<\/p>\n
\r\n<html>\r\n\r\n<head>\r\n\r\n<title>Styling Tables with CSS<\/title>\r\n\r\n<style type="text\/css">\r\n<!--\r\ntable{\r\n border-spacing: 0px;\r\n border-collapse: collapse;\r\n width: 250px;\r\n}\r\nth {\r\n text-align: center;\r\n font-weight: bold;\r\n padding: 2px;\r\n border: 2px solid #FFFFFF;\r\n background: #4a70aa;\r\n color: #FFFFFF;\r\n}\r\ntd {\r\n text-align: center;\r\n padding: 2px;\r\n border: 2px solid #FFFFFF;\r\n background: #e3f0f7;\r\n}\r\n\r\n-->\r\n<\/style>\r\n\r\n\r\n<\/head>\r\n\r\n<table>\r\n\r\n <tr>\r\n\r\n <th>First Name<\/th>\r\n <th>Last name<\/th>\r\n <th>Age<\/th>\r\n\r\n <\/tr>\r\n\r\n <tr>\r\n\r\n <td>John<\/td>\r\n <td>Ward<\/td>\r\n <td>21<\/td>\r\n\r\n <\/tr>\r\n\r\n <tr>\r\n\r\n <td>Mike<\/td>\r\n <td>Maguire<\/td>\r\n <td>21<\/td>\r\n\r\n <\/tr>\r\n\r\n <tr>\r\n\r\n <td>Sara<\/td>\r\n <td>Lee<\/td>\r\n <td>61<\/td>\r\n\r\n <\/tr>\r\n\r\n <tr>\r\n\r\n <td>Walter<\/td>\r\n <td>Reed<\/td>\r\n <td>1<\/td>\r\n\r\n <\/tr>\r\n\r\n<\/table>\r\n<\/html>\r\n<\/pre>\nFirst we have to define which rows will be oddly color. To do this we will use a class that I will name \u201calt\u201d (you can call it whatever you want). Since we defined the style for each cell in the original tutorial, we will have to define every other group of cells as our \u201calt\u201d class.<\/p>\n
\r\n\r\n<tr>\r\n\r\n <th>First Name<\/th>\r\n <th>Last name<\/th>\r\n <th>Age<\/th>\r\n\r\n <\/tr>\r\n\r\n <tr>\r\n\r\n <td>John<\/td>\r\n <td>Ward<\/td>\r\n <td>21<\/td>\r\n\r\n <\/tr>\r\n\r\n <tr>\r\n\r\n <td class="alt">Mike<\/td>\r\n <td class="alt">Maguire<\/td>\r\n <td class="alt">21<\/td>\r\n\r\n <\/tr>\r\n\r\n <tr>\r\n\r\n <td>Sara<\/td>\r\n <td>Lee<\/td>\r\n <td>61<\/td>\r\n\r\n <\/tr>\r\n\r\n <tr>\r\n\r\n <td class="alt">Walter<\/td>\r\n <td class="alt">Reed<\/td>\r\n <td class="alt">1<\/td>\r\n\r\n <\/tr>\r\n<\/pre>\nNow that we have set the class for our alternate cells we will have to add the CSS. In CSS you define a class using OBJECT.CLASS naming convention. So we will ad td.alt to our CSS.<\/p>\n
\r\n<style type="text\/css">\r\n<!--\r\ntable{\r\n border-spacing: 0px;\r\n border-collapse: collapse;\r\n width: 250px;\r\n}\r\nth {\r\n text-align: center;\r\n font-weight: bold;\r\n padding: 2px;\r\n border: 2px solid #FFFFFF;\r\n background: #4a70aa;\r\n color: #FFFFFF;\r\n}\r\ntd {\r\n text-align: center;\r\n padding: 2px;\r\n border: 2px solid #FFFFFF;\r\n background: #e3f0f7;\r\n}\r\ntd {\r\n\r\n}\r\n-->\r\n<\/style>\r\n<\/pre>\nThe only thing we are trying to change on the alternate cells I the background color. The alt class will inherit the style from the TD unless we tell it otherwise. What that means is all we have to do is set background color for td.alt and the rest will already match the other cells. I will give the alt cells a light grey color.<\/p>\n
\r\n<style type="text\/css">\r\n<!--\r\ntable{\r\n border-spacing: 0px;\r\n border-collapse: collapse;\r\n width: 250px;\r\n}\r\nth {\r\n text-align: center;\r\n font-weight: bold;\r\n padding: 2px;\r\n border: 2px solid #FFFFFF;\r\n background: #4a70aa;\r\n color: #FFFFFF;\r\n}\r\ntd {\r\n text-align: center;\r\n padding: 2px;\r\n border: 2px solid #FFFFFF;\r\n background: #e3f0f7;\r\n}\r\ntd {\r\n background: #f7f7f7;\r\n}\r\n-->\r\n<\/style>\r\n<\/pre>\nWhen you are done save the file as .htm and open it in your browser. Your table should look like this.
\n
<\/p>\n
That is how you can alternate the style of rows in a table. Now if you were automatically generating this table, using PHP for example, you could have PHP set the class for you. I may do a tutorial on that in the future. I plan on showing you how to do some pretty awesome tables in the next tutorial using \u201cTable Cloth\u201d. Stay tuned.<\/p>\n","protected":false},"excerpt":{"rendered":"
This is a continuation of our XHTML\/CSS table tutorials. In this tutorial we will be using the same table as before, but I will show how to have the rows alternate in color. To achieve this we will be using CSS classes.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[44,30,17],"tags":[],"yoast_head":"\n
Alternating Table Row Color With CSS Classes<\/title>\n<meta name=\"description\" content=\"This is a continuation of our XHTML\/CSS table tutorials. In this tutorial we will be using the same table as before, but I will show how to have the rows alternate in color. To achieve this we will be using CSS classes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Johnathan Ward\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/teamtutorials.com\/#website\",\"url\":\"https:\/\/teamtutorials.com\/\",\"name\":\"Team Tutorials\",\"description\":\"Learn something new today\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/teamtutorials.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/02\/alternating-table-rows-with-css-01.jpg\",\"contentUrl\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/02\/alternating-table-rows-with-css-01.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes#webpage\",\"url\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes\",\"name\":\"Alternating Table Row Color With CSS Classes\",\"isPartOf\":{\"@id\":\"https:\/\/teamtutorials.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes#primaryimage\"},\"datePublished\":\"2008-02-25T05:00:53+00:00\",\"dateModified\":\"2008-02-25T21:36:14+00:00\",\"author\":{\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\"},\"description\":\"This is a continuation of our XHTML\/CSS table tutorials. In this tutorial we will be using the same table as before, but I will show how to have the rows alternate in color. To achieve this we will be using CSS classes.\",\"breadcrumb\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/teamtutorials.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Alternating Table Row Color With CSS Classes\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\",\"name\":\"Johnathan Ward\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"caption\":\"Johnathan Ward\"},\"description\":\"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.\",\"sameAs\":[\"http:\/\/johnathanward.com\",\"https:\/\/twitter.com\/spyderman4g63\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Alternating Table Row Color With CSS Classes","description":"This is a continuation of our XHTML\/CSS table tutorials. In this tutorial we will be using the same table as before, but I will show how to have the rows alternate in color. To achieve this we will be using CSS classes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes","twitter_misc":{"Written by":"Johnathan Ward","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/teamtutorials.com\/#website","url":"https:\/\/teamtutorials.com\/","name":"Team Tutorials","description":"Learn something new today","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/teamtutorials.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes#primaryimage","inLanguage":"en-US","url":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/02\/alternating-table-rows-with-css-01.jpg","contentUrl":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/02\/alternating-table-rows-with-css-01.jpg"},{"@type":"WebPage","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes#webpage","url":"https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes","name":"Alternating Table Row Color With CSS Classes","isPartOf":{"@id":"https:\/\/teamtutorials.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes#primaryimage"},"datePublished":"2008-02-25T05:00:53+00:00","dateModified":"2008-02-25T21:36:14+00:00","author":{"@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9"},"description":"This is a continuation of our XHTML\/CSS table tutorials. In this tutorial we will be using the same table as before, but I will show how to have the rows alternate in color. To achieve this we will be using CSS classes.","breadcrumb":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/alternating-table-row-color-with-css-classes#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/teamtutorials.com\/"},{"@type":"ListItem","position":2,"name":"Alternating Table Row Color With CSS Classes"}]},{"@type":"Person","@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9","name":"Johnathan Ward","image":{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","caption":"Johnathan Ward"},"description":"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.","sameAs":["http:\/\/johnathanward.com","https:\/\/twitter.com\/spyderman4g63"]}]}},"_links":{"self":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/1345"}],"collection":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/comments?post=1345"}],"version-history":[{"count":0,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/1345\/revisions"}],"wp:attachment":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/media?parent=1345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/categories?post=1345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/tags?post=1345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}