Jump to content

HTML table design


Paulieboy
 Share

Recommended Posts

I have created a calendar for my golf league and wish to color code the days that we play with a specific color and other events different colors. We play on a thursday so I would like to color code all thurdays "green" My question is, what would be the best and most professional way to do this? Would creating an external css file and giving each Thursday the same ID or class name? Would a Class designation be better? Would the following coding example be appropriate?

 

Any help would be greatly appreciated

 

Thank you

 

CSS file:

 

.thursday

{

bgcolor: green;

}

 

HTML file:

 

<td class = "thursday">.......

 

 

Link to comment
Share on other sites

Thanks Foxy Mod.

 

Question:

 

I know that you can create an ID(#Name) and a Class(.Name) can I, or is there a way to give the beginning <td> tag a name of its own for "Thursdays"?

 

Example:

 

CSS file:

 

td.thursday

{

background-color: "green";

}

 

 

HTML file:

 

<td thursday........>

 

I'm trying to learn proper coding through experimentation, and asking alot of questions....lol

 

Thanks.

Link to comment
Share on other sites

How about...

<!DOCTYPE html><html><head><style>td{width:40px;height:40px;border:1px solid #555;text-align:center;}td:nth-child(5){background-color:green;}</style></head><body><table><tr><td>S</td><td>M</td><td>T</td><td>W</td><td>R</td><td>F</td><td>S</td></tr><tr><td>S</td><td>M</td><td>T</td><td>W</td><td>R</td><td>F</td><td>S</td></tr></table><p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p></body></html>

http://www.w3schools.com/cssref/sel_nth-child.asp

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...