- How to Alternate Table Row Colors in CSS and HTML
- Inefficient Alternating Table Row Colors
- Efficient Alternating Table Row Colors
- ASP and PHP Script Examples for Alternating Table Row Colors
- A More Realistic Style Sheet
- Alternating Table Column Colors and Styles
- Change entire row text color?
- 3 Answers 3
- How to set alternate table row color using CSS?
- Basic CSS Syntax for Alternate Row Color
- Steps
- Step 1: Create the Table
- Example
- Step 2: Add CSS Styles
- Step 3: Apply the Styles to the Table
- Example
- Set alternate table row color using CSS
- Conclusion
- How to set alternate table row color using CSS?
- Basic CSS Syntax for Alternate Row Color
- Steps
- Step 1: Create the Table
- Example
- Step 2: Add CSS Styles
- Step 3: Apply the Styles to the Table
- Example
- Set alternate table row color using CSS
- Conclusion
How to Alternate Table Row Colors in CSS and HTML
This article describes how to create tables with alternating row colors in CSS and HTML. Script examples are provided for ASP and PHP. The method described here accomplishes the effect with very little code.
When printing tables with many rows, alternating the background color of each row can increase readability. For the sake of simplicity, assume that the text color is black, and the rows alternate between two, light background colors. You can modify the technique below for more complex situations.
Inefficient Alternating Table Row Colors
The first example shows an inefficient way of alternating the colors. There are three reasons why this is inefficient. First, the class attribute must be written for every TD tag, which we will see is more than necessary. Second, the class name itself is long, which also increases code size. Finally, alternating between the class names «datacellone» and «datacelltwo» may require several lines of code in the script that prints the table.
td.datacellone < background-color: #CC9999; color: black; >td.datacelltwo
| One | Fish |
| Two | Fish |
| Red | Fish |
| Blue | Fish |
Efficient Alternating Table Row Colors
To produce the same effect with less code, instead define two types of TR classes. Then, use inheritance to the TD tag. Read the example and the explanation will follow.
tr.d0 td < background-color: #CC9999; color: black; >tr.d1 td
| One | Fish |
| Two | Fish |
| Red | Fish |
| Blue | Fish |
As you can see, the style sheet includes two row styles. Each style defines a background color for all TD tags subordinate to a specific class of TR tags. This allows us to define the class once for the row, and have the background color applied to all the cells within that row. This technique is available today because all modern browsers support this type of CSS inheritance.
The choice of the class names is deliberate and purposeful. The class names are only two characters, which saves bandwidth by condensing the resulting HTML code. By alternating between 0 and 1, we can use the AND operator against a row counter to alternate the class name in the script. This can be done inline without losing code readability. CSS class names must begin with an alphabet character (a-z or A-Z), otherwise we could have named the classes with just the single digit. (See 4.1.1 Tokenization in the CSS 2.1 Specification for the precise naming rules.) Because class names are case-sensitive, we use a convention of all lower-case class names for simplicity.
In the scripts below, you can see how simple and uncluttered the code is when the alternating row colors are defined at the TR tag. The code below shows how to request data from a database and print it in HTML. The code is mostly complete except it leaves out database connection opening and closing, and error handling.
ASP and PHP Script Examples for Alternating Table Row Colors
' ASP Version strsql = "SELECT Adjective, Noun FROM DrSeussLines" objRS.Open strsql,objCN,adOpenForwardOnly,adLockReadOnly,adCmdText i = 0 Response.write "" Do While Not objRS.EOF i = i + 1 Response.write "" Response.write "" & objRS(0) & " " Response.write "" & objRS(1) & " " Response.write " " & vbCrLf objRS.MoveNext Loop objRS.Close Response.write "
" // PHP Version $query = "SELECT Adjective, Noun FROM DrSeussLines"; $result = mysqli_query($query); $i = 0; print ""; while($row = $result->fetch_row()) < $i++; print ""; print "".$row[0]." "; print "".$row[1]." "; print " \n"; > mysqli_free_result($result); print "
"; A More Realistic Style Sheet
The style sheets above are minimal, and only show how to alternate colors. In real code, you would probably want the styles to only apply to particular tables. We can use CSS inheritance again to achieve this. Below is a more realistic style sheet for the table. Note that by using the table.sample td selector, we can apply a style to all the TD cells in the table without repeating the common aspects in the style of each row type.
table.sample < border: 6px inset #8B8378; -moz-border-radius: 6px; >table.sample td < border: 1px solid black; padding: 0.2em 2ex 0.2em 2ex; color: black; >table.sample tr.d0 td < background-color: #FCF6CF; >table.sample tr.d1 td
| One | Fish |
| Two | Fish |
| Red | Fish |
| Blue | Fish |
Alternating Table Column Colors and Styles
You might ask, can we use a similar technique to alternate row colors of columns? Alas, there is currently no simple way to do this using style sheets. Although CSS defines the mechanisms, browser support is very limited as of mid-2005. Luckily, tables with many columns are infrequent on the web. If color or text alignment must be specified for a column, then the technique is to define the style at each TD tag of each row of the column. This technique increases code size significantly, but is reliable.
Check out these 3 important facts about high-res images for Google Shopping, with an amazing before and after showing the difference a high-res image makes on your phone or other high-res device. Learn the latest tips on optimizing your Google Shopping product data feeds from your BigCommerce, Shopify, or other online store.
Created 2005-08-07, Last Modified 2017-12-26, © Shailesh N. Humbad
Disclaimer: This content is provided as-is. The information may be incorrect.
Change entire row text color?
I am trying to change the text color of an entire list row on SharePoint 2013 however have only been able to change 1 column based on the JS code below. Any ideas??
3 Answers 3
You’d want to do something like this I think:
in June 2017, Microsoft disabled the use of JavaScript in a Calculated Column
That means given answers may not apply for newer SharePoint versions
In a View (and only in a View!) you can use Calculated Columns to color Rows, this works since SharePoint 2010 and does not require jQuery or any scriptfiles.
Whole trick is to set the datatype of a Formula to Number so the HTML (and Javascript) is evaluated. For full docs see https://www.365csi.nl/vm365com/#/How
So to color your rows lightCoral red use the Formula:
(remember to set to datatype to Number)
=[Status] & IF([Status]="Temporary Outage" ,"![]()
" &"TR.style.backgroundColor='lightCoral';" &">"">" ,"") This displays the Status value and if its «Temporary Outage» will add a blank image to the page so the onload handler on it can immediatly execute the javascript to color the TR row.
You can go more advanced using this example code:
It uses a Javascript Object array to set the color
###SharePoint 2013 and Client Side Rendering In SharePoint 2013 using CSR might be a more preferred option (if you don’t mind adding scriptfiles and setting JSLink connections)
###More StackOverflow answers using Calculated Columns:
This method has its own drawbacks as documented https://www.365csi.nl/vm365com/#/How; but is less programming, doesn’t need VS or Designer and works on SP2010 as well.
###CalcMaster Bookmarklet to edit Formulas It is a PITA to debug Calculated Columns. Because you don’t get feedback until you save a Formula and you end up having to click multiple times to get back to your Formula.
I have written a small ‘CalcMaster’ bookmarklet which hooks into the formula-editor and does a save of the Formula on every keypress; giving immediate feedback.
Recently published a first version on GitHub:
How to set alternate table row color using CSS?
Tables are used to present data in a structured and organized format. It is an essential part of web design. Alternate row colors are used to enhance the readability and aesthetics of tables. Alternate row color is a design technique in which the background color of every other row in a table is different from the adjacent rows. This technique helps readers to differentiate rows and improves the overall look of the table.
Basic CSS Syntax for Alternate Row Color
The :nth-child() pseudo-class selector in CSS is used to set an alternate row color for a table. The nth-child selector allows to select elements based on the position in a group of siblings. Basic syntax for setting alternate row color −
Here, the tr:nth-child(even) selector selects every even numbered tr (table row) element and applies the background color of #f2f2f2.
Steps
Follow the below-given steps to set alternate table row color using CSS −
Step 1: Create the Table
Example
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
| Row 3, Column 1 | Row 3, Column 2 | Row 3, Column 3 |
Here, we have created a table, it has three columns and three rows including header row.
Step 2: Add CSS Styles
The next step is to add CSS styles to set the alternate row color. In CSS, the alternate row color is set using the nth-child pseudo-class selector. For example −
tr:nth-child(odd) < background-color: lightblue; >tr:nth-child(even)
In the above CSS code, we have set the background color of rows with an odd number of tr:nth-child(odd) selectors to lightblue, and the tr:nth-child(even) selector sets the background color of even-numbered rows to lightgreen.
Step 3: Apply the Styles to the Table
The final step is to apply the CSS styles to the table. For example −
Example
tr:nth-child(odd) < background-color: lightblue; >tr:nth-child(even)Set alternate table row color using CSS
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
| Row 3, Column 1 | Row 3, Column 2 | Row 3, Column 3 |
| Row 4, Column 1 | Row 4, Column 2 | Row 4, Column 3 |
Conclusion
Alternate row color is a simple and effective design technique to enhance the readability of tables. By following the step-by-step above guide, we can set alternate row color using CSS.
How to set alternate table row color using CSS?
Tables are used to present data in a structured and organized format. It is an essential part of web design. Alternate row colors are used to enhance the readability and aesthetics of tables. Alternate row color is a design technique in which the background color of every other row in a table is different from the adjacent rows. This technique helps readers to differentiate rows and improves the overall look of the table.
Basic CSS Syntax for Alternate Row Color
The :nth-child() pseudo-class selector in CSS is used to set an alternate row color for a table. The nth-child selector allows to select elements based on the position in a group of siblings. Basic syntax for setting alternate row color −
Here, the tr:nth-child(even) selector selects every even numbered tr (table row) element and applies the background color of #f2f2f2.
Steps
Follow the below-given steps to set alternate table row color using CSS −
Step 1: Create the Table
Example
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
| Row 3, Column 1 | Row 3, Column 2 | Row 3, Column 3 |
Here, we have created a table, it has three columns and three rows including header row.
Step 2: Add CSS Styles
The next step is to add CSS styles to set the alternate row color. In CSS, the alternate row color is set using the nth-child pseudo-class selector. For example −
tr:nth-child(odd) < background-color: lightblue; >tr:nth-child(even)
In the above CSS code, we have set the background color of rows with an odd number of tr:nth-child(odd) selectors to lightblue, and the tr:nth-child(even) selector sets the background color of even-numbered rows to lightgreen.
Step 3: Apply the Styles to the Table
The final step is to apply the CSS styles to the table. For example −
Example
tr:nth-child(odd) < background-color: lightblue; >tr:nth-child(even)Set alternate table row color using CSS
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
| Row 3, Column 1 | Row 3, Column 2 | Row 3, Column 3 |
| Row 4, Column 1 | Row 4, Column 2 | Row 4, Column 3 |
Conclusion
Alternate row color is a simple and effective design technique to enhance the readability of tables. By following the step-by-step above guide, we can set alternate row color using CSS.