CSS is Code Too!

[docnzok]

The Code element is a very powerful tool!

 

Dont forget that CSS (Style Sheet Coding) is code also.

 

Want your table to show alternate colors for rows? You can use a little CSS to do that!

 

Just put the css code into a template at the top of a page and your table can have alternate colored rows.

 

Use the same code (by changing a little text) on several pages using the templates!

 

Here is a table example of where I use CSS to alternate the table row colors.  This is just a registration survey table. (Some other things are going on here, but I wanted to show the CSS effects.

 

 

 

 

[purplepear]

I've tried to use this code in the site I'm working on, but nothing is happening. I have the table name, too. Not sure what else to try.

[docnzok]

Purple

 

Can you send me the link to the page where the table is please?  I will write up a little CSS and test it and then try to help as best I can.

 

Mark

[purplepear]

Thanks, Mark. I'd like to change the header row color, too.

 

http://www.nationalrecruitingleague.com.prod.sportngin.com/page/show/2716828-division-descriptions

[SportsEngine Staffer]

Thanks, Mark!

 

Can you share the actual code you used to build that table?

 

- Loren

[docnzok]

Find your Table Name and insert it into the code used here.

<style>

#(YOUR TABLE NAME HERE)

// Make all odd rows cool green
     tr:nth-child(even) { background-color: #E6F5CF;}
    
// Make the text only in the 10th Column Red
     td:nth-child(10) {color: red;}

</style>

[eribs4e]

I'd like to implement this functionality with one of my tables, but I'm unable to find the name of my table. I've used the Chrome inspector tool to look at all the source code and I don't see an id for the table element. The container (div) has an id, but the actual table doesn't.

 

How do I assign the table a name (id) or is there another way to retrieve the information that I don't know of?

 

Thanx in advance.

[SportsEngine Staffer]

That should have worked for you.  Chrome's inspector should give you the option to get the right name by...finding the correct element in the elements tab, right clicking and selecting "copy selector".  

 

Try that.

Will look like this:

 

<style> #what you copied here {

 

code here

 

}

</style>