Question

I am making a form in html, and I am using a table for layout of my input controls and labels.

For each input of a form, there is one label associated with it.

I want a border to appear around each pair of adjacent cell that is a label and its associated input tag.

I tried making a div around the two adjacent <td> tags but it says “invalid tag” as only <td> are allowed inside a <tr> tag.

Is there anyway to do it either in CSS or anything else ?

My HTML sample code :

<table>
<tr>
<td>Date</td>
<td><input type="text"></td>
<td>Name</td>
<td><input type="text"></td>
</tr>
</table>

Below is a screenshot of what I want to achieve.

Answer 1

If you could apply classes to your td’s you could try this:

<table cellspacing="0">
    <tr>
        <td class="label">Label1: </td>
        <td>input1</td>
        <td class="label">Label2: </td>
        <td>input2</td>
    </tr>
</table>​

With the following css:

table {
    background-color: silver;
    border-collapse: collapse;
}
td {
    padding: 5px;
    border: 1px solid red;
    border-width: 1px 1px 1px 0px;
}

td.label {
    border-width: 1px 0px 1px 1px;    
}

​
http://jsfiddle.net/H3p8e/2/