Table styling with CSS - html

Question

I made a simple HTML table for this question.
I want to have a different style for the text and a different one for the numbers in the <td> and in the <tfoot>.
Can I style text differently from numbers in <td> and the <tfoot>?
and
What is the best way in the web practice to style a more complex table?
Update
Like this?
<td> 12<b>x</b>6 </td>
Here is my fiddle.
HTML
<table>
<caption>Woah</caption>
<thead>
<tr>
<th></th>
<th>Animalistic</th>
<th>People</th>
</tr>
</thead>
<tfoot>
<td>Run</td>
<td>1 x 92</td>
<td>1 x 92</td>
</tfoot>
<tbody>
<tr>
<td>John</td>
<td>9889 x 92</td>
<td>9889 x 92</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Bill</td>
<td>9889 x 92</td>
<td>9889 x 92</td>
</tr>
</tbody>
</table>
CSS
table {
width:300px;
background:#f5f7f3;
}
caption {
background:#000;
color:#fff;
}
th {
border:1px solid #000;
height:40px;
background:#b2b2b2;
}
td {
border:1px solid #b2b2b2;
}

Answer 1

add a < span > tag to the text with the style you want.
<td><span style="some style" or class = "some class"> some text </span></td>

Answer 2

You can't set different color for numeric value and text if they are in same tag. You have to give them separate tag. Like:
<td><span>1</span> text <span>92</span></td>
Then add css:
td span{
color:red;
}
Note: numeric values are in span tag and text value don't have any
tag. so with this css we can set color for numeric value and text
value different

Answer 3

There are numerous ways to target table elements. Here is an excellent list of available CSS selectors.
Example of the below.
Basic HTML structure (only one <tbody>):
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>9999 x 9999</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
To target the numbers separately, use a <span>:
<td>9999 <span>x</span> 9999</td>
OR
<td><span>9999</span> x <span>9999</span></td>
Target in the CSS with:
tbody td span {
/* styles */
}
Target every second row in the tbody with nth-child:
tbody tr:nth-child(even) {
background: #F00;
}
Target every td in the tbody:
tbody td {
text-align: center;
}
Target the first td of each row:
tbody td:first-child {
text-align: right;
}
Target the tfoot itself
tfoot {
background: #CCC;
}