Table row color in css

CSS Table with Alternating Color Rows

You can use the nth child selector in CSS3 to very simply create tables with alternating row colors.

I’ll show you an example of a table with alternating rows along with some working code that you can copy.

If you need it, I also have information on how to build a table with alternating columns.

Browser Support for Nth Child Selector

All modern browsers support the nth child selector but it’s not supported in Internet Explorer 8 and versions below. With that in mind, I have added an extra css declaration so that in these older version of IE all the tables rows will have a default background color. This is just in case you’ve been cursed by your present employer to support ancient browsers.

This allows the table to still be visually legible and functional but it doesn’t exactly replicate the alternating row color effect that is present in modern browsers. If this was of paramount importance to you then you’d have to write some javascript for alternating colors to achieve this effect.

CSS Table Example with Alternating Rows

The CSS Code for the Table

To make the table above you have to use the tr:nth-child(odd) selector to define all the odd rows in a table and the tr:nth-child(even) selector to define all the even rows of the table.

The complete working CSS code and HTML for the table example can be copied from the box below.

 .TFtable < width:100%; border-collapse:collapse; >.TFtable td /* provide some minimal visual accomodation for IE8 and below */ .TFtable tr /* Define the background color for all the ODD background rows */ .TFtable tr:nth-child(odd) /* Define the background color for all the EVEN background rows */ .TFtable tr:nth-child(even)  
Text
Text
Text
 
Text
Text
Text
 
Text
Text
Text
 
Text
Text
Text
  

Alternating Table Rows just with CSS

Anyways, it’s now pretty simple to make a table with rows of alternating colors just by using CSS.

Modern support is good for all browsers except for IE8 and below which is now generally less than 1% of the market and so you can easily provide them with a visually readable alternative.

Most Popular Text Tools

• Remove Line Breaks: Remove unwanted line breaks from your text.
• Random Word Generator: Generate a list of random words. Great tool for brainstorming ideas.
• Alphabetical Order: Alphabetize all sorts of text content with this tool.
• Text to HTML: Automatically change plain text into HTML paragraphs.
• HTML to Text: Remove all HTML tags, leaving only text content.
• Online Sentence Counter: Quickly count the number of sentences in your content.
• Random Choice Generator: Randomly pick a choice from a list of options.
• Reverse Text Generator: Create social media posts or any text in reverse text.
• Remove Duplicate Lines: Remove all of the identical lines in your content.
• Paragraph to Single Line: Convert any multiple paragraphs to a single line.

Alphabetical Tools

Random Generators

Line Break Tools

Fun Text Tools

Text Changing Tools

SEO and Word Tools

Content Conversion Tools

HTML Code Generators

HTML Compression

HTML Encoding Tools

• ©2023 TextFixer.com
• Twitter | Contact
• Misc. Tutorials | About
• Privacy Policy | Terms of Use

Источник

Coloring CSS Tables

The previous chapter covered how to change the basic styles of the table using CSS. In this chapter we are going to a give more styles to the tables using CSS. Once you create the structure of the table in the markup, its easy to adding a layer of style to customize its appearance.

CSS Table Background color

The CSS background-color property allows you to color background of a table, row and cells.

The above code color the background of each row as green color and foreground color as white.

Source Code

How to color specific row in a CSS Table

You can use the tr:nth-child(rownumber) to color a particular row in a table using CSS.

Above code select the 3 row from top (including table head row) and color background as green and foreground as white.

CSS Code

Applied this CSS code to the Example 1 HTML Table

How to color specific column in a CSS Table

You can give background color to specific column by suing td:nth-child(columnnumber) .

Above code color the first coloumn background color as Orange.

CSS Code

Applied this CSS code to the Example 1 HTML Table

How to color CSS Table cell only

The following source code shows how to color a particular cell in a table using CSS.

CSS Table Alternate row coloring

You can use tr:nth-child(rowOrder) to give alternating row color to a Table using CSS. The rowOrder must be «odd» or «even».

Above code color every even row order to background color as orange.

CSS Code

Applied this CSS code to the Example 1 HTML Table

For CSS table alternate column coloring you can use the CSS code like the following.

Above code color alternate column to Orange background.

CSS Table Color first column and first row

Using a simple technique, you can color the first row and first column of a CSS table.

Источник

Table Color

This page demonstrates how to set the table color within your web pages and other HTML documents.

In HTML, table color is defined using Cascading Style Sheets (CSS). You can change the color of the whole table, part of the table (eg, table cells or table borders), and the text within the table cells.

The CSS property to use will depend on which element you’re changing the color of. For example, to change the background color, you need to use the background-color property. To change the color of the text within the table, simply use the color property.

Below are some examples of applying a table border in HTML.

Table Background Color

You can use the CSS background-color property to change the background color of the whole table.

Table Row Color

You can change the background color of a table row:

Table Cell Background Color

You can change the background color of an individual table cell:

Table Text Color

You can change the color of text within a table. To change the color of the text within the table, you need to use the color property. By the way, you don’t need to apply this element against each piece of text — you can apply it to the whole table.

In this example, I change the color of the text to black, but I also change the table header text to white:

Table Border Color

You can set a table border and change its color too. To do this, you can use the border property. You also need to specify how wide the border is and what style.

In the following example, we use CSS classes to set the border color and other properties against the table and its cells.

Table Color with CSS Classes

You should use CSS classes where ever possible when setting styles for your HTML documents. You can define these classes in an embedded style sheet or external style sheet.

Here’s an example of using an embedded style sheet to define the styles of your HTML tables. Note that the styles are set in between the opening and closing tags.

Источник

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.

Источник