Colspan HTML

MDN Learn
#1

How to use colspan to add a certain color to the certain column, in this example it is third column from here: https://github.com/mdn/learning-area/blob/main/html/tables/basic/timetable.html


From where it span to what?
#2

Hello @serenity

not sure if i got you or not but if you mean you want to target the colspan

then you can use

th[colspan]{
  background-color:grey;
}

or if you want to target certain colspan value like when it equal 2 

th[colspan="2"]{
  background-color:grey;
}

check this for more details

not sure what third column you talking about as there 2 column in this table

hope that help and have a nice day

#3

You understood me well. Thanks for help. What I dont understand is how colspan make certain cell have certain color? How you choose using colspan from example above what cell, and column is styled?

#5

you welcome @serenity

here how it work first colspan / rowspan are attribute so to target it we should start with the element that hold it . which is th in our case

so we use css selector with attribute

which is th[colspan] and if we want to make it to target certain number of spans then we use the value like th[colspan="2"]

so in other words this th[colspan=“2”] will target any cell that defined as th and has attribute colspan with value 2

then we write what ever we want between the {} like set the background-color and other css attribute option

let me know if i have to explain it in other way or if you still has some questions

and have a nice day :slight_smile:

1 Like
#6

I have no more questions. Thx.

#7

@serenity you welcome :slight_smile: