Css table column background

Styling Specific HTML Table, Row, Columns and Cells

By Joe ~ May 14, 2023

A few days ago a client came to me with a newly designed layout of a table he wanted to be added to existing website with the same colors and styles.

It got me thinking about back in the day when Bootstrap, Foundation or responsive frameworks did not exist a large number of sites used tables for layout.

In this quick tutorial I want to share with you how to style HTML tables and specifically targeting single rows, columns and even specific cell.

I created the table using the following HTML code :

 
 
 
Day
 
Location
 
Accommodation
 
Trip 
 
Activity
 
 
Day 01
 
Table
 
Table
 
Table
 
Table
 
 
Day 02
 
Table
 
Table
 
Table
 
Table
 
 
Day 03
 
Table
 
Table
 
Table
 
Table
 
 
Day 04
 
Table
 
Table
 
Table
 
Table
 
 
Day 05
 
Table
 
Table
 
Table
 
Table
 
 
Day 06
 
Table
 
Table
 
Table
 
 
 

Styling HTML Table

To style the table I began by adding the white background and the borders :

 /* * Setting Table Background Color and Border Styles */ table < width: 100%; margin-bottom: 20px; background: #fff; >table, table tr, table tr td, table tr th

After creating the table and setting the background, we need to add the background color to the top row and this is how you get that done:

 /* * Setting Background Color for First Row & First Column on the Table */ tr:first-child < background: yellow; >td:first-child

In the code we are targeting the first row and setting the background color to yellow so that we can get the table style as it was designed. We also added the code to target the first column and set the background color to yellow. This will result in the following :

You can set style to specific column by using td:nth-child(columnnumber) .

You can also set the background color of the middle column or a row using the same styling tricks like the following code adds a background color to the third coulmn :

 /* * Adding background color to third column in the table */ td:nth-child(3)

The result of the styling code above will be as shown in the image below :

Styling Specific HTML Table Cell

We can also style a specific cell in the table to make it stand out. Like in the column above we can make the first cell background to be red in color using the following code :

 /* * Styling Specific Cell in a HTML Table */ tr:first-child td:nth-child(3)

The result of the code above will be as shown in the image below:

Finally lets do a final style to the middle cell in the table, we will use the following code to add orange background to the middle cell by targeting it using the code below:

/* * Final Table Style to the Center Cell */ tbody tr:nth-child(4) td:nth-child(3)

The result of the final table will appear as shown in the image below:

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

Источник

Css table column background

In addition to rows, you can also divide a table into columns. This page takes a look at the possibilities and the inevitable browser incompatibilities.

What columns are

HTML

 
  
First TD of first TR
 
Second TD of first TR
 
Third TD of first TR
 
Fourth TD of first TR
 
 
First TD of second TR
 
Second TD of second TR
 
Third TD of second TR
 
Fourth TD of second TR
 
 
 

The first tag now creates a column that spans the first cells of all rows. The second tag creates a column that spans the second and third cells of all rows. The fourth cell in every row is not a part of any column.

Restrictions

Unfortunately table columns are quite hard to use, because if you use them you essentially have a table that’s subdivided in two ways: by rows and by columns. The general rule is that any style defined on a row overrules any style defined on a column.

Secondly, W3C specifies that only a few declarations may be used on columns: border , background , width and visibility . Exception: IE7 and lower allow all declarations.

background-color and color

Let’s start with some basics. I want every first cell to have a blue background colour, and every second and third cell to have a green one.

First TD of first TR	Second TD of first TR	Third TD of first TR	Fourth TD of first TR
First TD of second TR	Second TD of second TR	Third TD of second TR	Fourth TD of second TR

In order to keep the cells readable I also want a white text colour. This, unfortunately, does not work. Most browsers don’t obey the color: #ffffff because W3C doesn’t allow a color declaration on columns.

Explorer Windows is the exception: it does allow the colour. I tend to side with Microsoft on this one; I don’t understand why you can’t use all normal styles on columns.

Rows and cells overrule columns

First TD of first TR [. etc . ] // second TR

First TD of first TR	Second TD of first TR	Third TD of first TR	Fourth TD of first TR
First TD of second TR	Second TD of second TR	Third TD of second TR	Fourth TD of second TR

border

Let’s apply a border to the second column. This is an allowed declaration, but it doesn’t work immediately:

First TD of first TR	Second TD of first TR	Third TD of first TR	Fourth TD of first TR
First TD of second TR	Second TD of second TR	Third TD of second TR	Fourth TD of second TR

No border. That’s correct behaviour: a border declaration on a column is only valid if the entire table has border-collapse: collapse .

First TD of first TR	Second TD of first TR	Third TD of first TR	Fourth TD of first TR
First TD of second TR	Second TD of second TR	Third TD of second TR	Fourth TD of second TR

Once the border-collapse has been added, the border works. Unfortunately the browsers disagree on the exact scope of the border. The WebKit browsers do this:

The other browsers add a middle border:

width

On columns width means min-width , which is in keeping with width definitions on table elements in general. More oddly, a width declaration counts for every column that’s spanned by the tag. Therefore the area of the second tag has a total width of 10em + cellspacing.

(I removed the normal texts to ensure every cell gets the defined width instead of being stretched up.)

I use this trick in all my compatibility tables, where I define TD widths via columns. The exact width depends on the col span. I do this so that six IE columns have the same total with as two Firefox ones or three Chrome/Yandex ones.

visibility: collapse

Normally, visibility takes three values:

1. visible : element visible. This is the default.
2. hidden : element hidden, but the space it takes remains empty.
3. collapse : element hidden, and the space it takes is removed, too.

However, the specification clearly states that in the case of columns only collapse is a valid value.

First TD of first TR	Second TD of first TR	Third TD of first TR	Fourth TD of first TR
First TD of second TR	Second TD of second TR	Third TD of second TR	Fourth TD of second TR

Источник

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.

Источник