Different CSS styling for left and right side table data - css

Question

This is my table:
<table width="100%">
<tr ><td width="35%" height="30" class="left-info" >Criminal Id :</td>
<td width="65%" class="right-info" >CR7887898652</td></tr>
<tr><td height="30" class="right-info" >Full Name :</td><td class="left-info" ></td></tr>
<tr><td height="30" class="right-info" >Date of Birth :</td><td class="left-info" ></td></tr>
</table>
How can I remove these repeating use of class for each table data. As, I've used class="left-info" for left side table data and class="right-info" for right side table data. But, this make the mesh of coding, can anyone suggest me how can I do the same style with minimal code?

Answer 1

You can either switch to a non-table layout (perhaps a DL may suit your needs better), or if you must use a table, consider using the col element, which you can apply a class attribute to.
Example
Using your example above, this is how I would suggest using the col element.
<table id="example">
<col class="label" />
<col class="value" />
<tr>
<td>Criminal Id :</td>
<td>CR7887898652</td>
</tr>
<tr>
<td>Full Name:</td>
<td>Foo Bar</td>
</tr>
<tr>
<td>Date of Birth:</td>
<td>01/14/1983</td>
</tr>
</table>
But, taking into account your example, I think you could accomplish your goal with better semantics and less code if you make use of TH elements and pure CSS:
#example th {
text-align: right;
font-weight: normal;
}
#example td {
text-align: left;
}
...
<table id="example">
<tr>
<th>Criminal Id :</th>
<td>CR7887898652</td>
</tr>
<tr>
<th>Full Name:</th>
<td>Foo Bar</td>
</tr>
<tr>
<th>Date of Birth:</th>
<td>01/14/1983</td>
</tr>
</table>
At this level, it shouldn't really matter if you use a DL or a TABLE as they both are semantically rich elements when used like this. IMHO, I still prefer a DL, but truthfully they can be more difficult to style.