You should look more in to selectors (this is pretty basic CSS).
You can select an element inside a element with a class using element.withClass element
. That way you don't need to give all the td
and th
a class, but only the parent element, the table
in this case:
HTML:
<table class="firstTable">
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>0-001</td>
<td>Computer</td>
<td>$299.99</td>
</tr>
...
</table>
<table class="secondTable">
<tr>
<th>Customer ID</th>
<th>Total Sales</th>
</tr>
<tr>
<td>10001</td>
<td>$39.94</td>
</tr>
...
</table>
CSS:
.firstTable
{
border: 1px solid black;
}
.firstTable td
{
border: 1px solid black;
}
.firstTable th
{
border: 1px solid black;
background: #00003f;
color: #cfffff;
}
.secondTable
{
border: 1px solid red;
}
.secondTable td
{
border: 1px solid red;
font-family: sans-serif;
}
.secondTable th
{
border: 1px solid red;
background: #cfffff;
color: #00003f;
}
And a demo
PS: font-color
isn't a CSS attribute, it should be just color