How to use classes to describe data in the table?

[gintare]

I would like to vizualize different class variables in the same table in different colors. How to describe this in stylesheet?

For example, the stylesheet which i use now colors both classes in red. I want that day 30 would be blue and day 1 would be red.

    <style>
table,th,td { border:1px solid black; }
table .mainmonth { color: #000080; }
table .nextmonth { color: #FF0000; }
.error { color: red; }
 
</style>

<table> 
<tr> 
<td height=17 align="center" > 
<span class="date"  class="mainmonth" >
 <div class="day">30</div> 
<div class="price"><input type="text" name="ad2014-12-29price" size="2" value="" ></div>
 <div class="status"><input type="checkbox" name="ad2014-12-29status"  ></div> </span>
 </td> 
</tr> 
<tr> <td height=17 align="center" > 
<span class="date"  class="nextmonth" >
 <div class="day">1</div> 
<div class="price"><input type="text" name="ad2014-12-29price" size="2" value="" ></div>
 <div class="status"><input type="checkbox" name="ad2014-12-29status"  ></div>
 </span> 
</td> 
</tr> 
</table>

[Rabbit]

Give day 1 a different class from day 30.

[Exequiel]

add this to your css,

table tr td{background:#00F;}
table tr:nth-child(odd) td{background:#FF0000;}
 

[gintare]

i gave different class, but this does not work. In reality i have a table-calendar. I would like to color class "mainmonth" with blue and class "nextmonth" with red. I do not know how to use class with table in css.

 table .mainmonth { color: #000080; }
table .nextmonth { color: #FF0000; }

This code colors everything in red.

[gintare]

Dear Exequiel, i need to color more days than given in the example above. Odd or even does not suit. I have assigned class to each day. I would like to color class "mainmonth" with blue and class "nextmonth" with red. I do not know how to use class with table in css.

table .mainmonth { color: #000080; }
table .nextmonth { color: #FF0000; }

This code colors everything in red.

[gintare]

In the end i did not find out how to use classes. If you know how, please write advice. As a solution it is possible to give style colors for separate td in the table.

<table>
<tr>
<td height=17 align="center" style="color:red"> <span class="date"   >
<div class="day" >30</div>    
<div class="price"><input type="text" name="ad2014-12-29price" size="2" value="" ></div>  
<div class="status"><input type="checkbox" name="ad2014-12-29status"  ></div>
</span>
</td></tr>
<tr>
<td height=17 align="center" style="color:blue"> <span class="date"   >
<div class="day" >1</div>    
<div class="price"><input type="text" name="ad2014-12-29price" size="2" value="" ></div>  
<div class="status"><input type="checkbox" name="ad2014-12-29status"  ></div>
</span>
</td></tr>
</table>

[Exequiel]

can you post an image for the output that you want to create? and i will code it in css for you. i cant't get what you mean, are u trying to create a callendar? , , but in css its just easy to use a class,

for example you have a class .mainmonth and .nextmonth in css,

.mainmonth{background:#red;}
.nextmonth{background:#blue;}
 

you can call or use that by calling each name class in your html element,

<table class="mainmonth"></table>
<table class="nextmonth"></table>
 

[Exequiel]

you can try to visit this link. http://www.tutorialspoint.com/css/css_tables.htm

[gintare]

Your example does not work for table element with class. Do not know why.
Tutorial also does not show example how to describe class within table.
It seems that instead of defining a class, i have to define style property inside the table element.

[Exequiel]

you did not not get the point of the tutorial that i send to you, , I know you don't know how to use class for an element, , That's what i observed. well you need to research more about css/css3 on how to use it, where did you save your css file by the way?

[gintare]

Please see the question description. I use <style> tag, not style file. The class definition simple do not work inside the table.

<style>
    table,th,td { border:1px solid black; }
    table .mainmonth { color: #000080; }
    table .nextmonth { color: #FF0000; }
    </style>

I ask for syntax, how to describe table class in <style> ? Class applies to <div> or <span> inside <td>.

 <table> 
    <tr> 
    <td height=17 align="center" > 
    <span class="date"  class="mainmonth" >
     <div class="day">30</div> 
    <div class="price"><input type="text" name="ad2014-12-29price" size="2" value="" ></div>
     <div class="status"><input type="checkbox" name="ad2014-12-29status"  ></div> </span>
     </td> 
    </tr> 
    <tr> <td height=17 align="center" > 
    <span class="date"  class="nextmonth" >
     <div class="day">1</div> 
    <div class="price"><input type="text" name="ad2014-12-29price" size="2" value="" ></div>
     <div class="status"><input type="checkbox" name="ad2014-12-29status"  ></div>
     </span> 
    </td> 
    </tr> 
    </table>

[gintare]

The first solution was to define style in the td element like

<td height=17 align="center" style="color:blue">.

The second solution is to use class in td element. When i use class for inner td elements "div" or "span", it is not working. But if i define class in td, when table cells are colored.

<style> .mainmonth { color: #000080; } </style>
<td height=17 align="center" class="mainmonth">

[Exequiel]

it did not work because you put two class in your element, if you want to use two class or more in one element you can do it this way.
the right way to call a class.

<span   class="nextmonth date" >

the wrong way.

 <span   class="nextmonth" class="date" >

[Exequiel]

by the wayi created some tuts on how to use css for element using class. I hope it helps, just observed the elements and the class i called, better to copy paste this code and save this as a html file and run to see for your self.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<style>
table.table{border:1px solid #000;}/*must be call by table only*/
table.table tr td{color:#990000;}/*for all td element inside the table and tr*/
table.table tr td.withborder{border:1px solid #666; color:#0000FF;}/*must be inside of table element and tr and call by td*/
 
div.div{background:red;}/*must be call by div only*/
div.div .child{border:#999; background:#000000; color:#FFFFFF;}
 
.universal{background:#CCC; border-radius:5px;}/*can call by any element*/
.someclass{border:1px solid #0CC;}/*can call by any element*/
.red{color:#F00;}/*can call by any element*/
.padding{padding:5px;}/*can call by any element*/
 
div{padding:5px;} /*if you put div element the style of this css div will adopt by all div div*/
</style>
 
</head>
 
<body>
<h2>Calling class to the right element</h2>
<table class="table">
    <tr>
        <td>For table only</td>
        <td class="withborder">with class withborder</td>
        <td>For table only</td>
    </tr>
</table>
<br>
    <div class="div">For div only</div>
<br>
    <div class="div">
        div with child element.
        <div class="child">i'm the child</div>
    </div>
<br>
    <div class="universal"><b>universal</b> universal class, You can call me to any element</div>
<br>
<table class="universal">
    <tr>
        <td>universal class called by table element.</td>
    </tr>
</table>
<br>
 
<h2>wrong css call by elements.</h2>
 
<b>the class table call by an element div.</b>
<div class="table">The class <b>table</b> didnot work for this element because you declare on your css that the table class is ony for the elelemnt table. [table.table{}] if you put only in the css like this [.table] it will adopt by any elelemnts as long as you call this class,  </div>
<br>
<b>the class div call by an element table.</b>
<table class="div">
    <tr>
        <td>div class for table didnot work, </td>
    </tr>
</table>
 
<h2>How to call multiple class in one element.</h2>
<div class="div universal someclass">I have 3 class</div>
<div class="universal  red padding">I have 3  class</div>
 
<table class="table universal someclass red padding">
    <tr>
        <td>the table with 5 class.</td>
    </tr>
</table>
</body>
</html>
 
 

I hope it helps.

[gintare]

Thanks. Now it works!

[Exequiel]

your welcome, good luck. :)