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.