Jump to content
Paulieboy

HTML table design

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">.......

 

 

Share this post


Link to post
Share on other sites

Giving the <td> elements a class and using an external stylesheet works well.

 

The CSS rule for background color is background-color, not bgcolor.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

No, you have to use the class attribute to give a "name" to an element.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...