More efficient way to customize your borders in html - html

Question

I am seeking for better way to arrange my borders.
Currently I have something like this, but I feel there must be some better and quick solution to this.
My Code:
<style>
td.left{
border-top-style:solid;
border-left-style:solid;
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.right{
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.updown{
border-top-style:solid;
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.left2{
border-left-style:solid;
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.right2{
border-right-style:solid;
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.updown2{
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.finish{
border-bottom-style: solid;
border-left-style: solid;
border-right-style: solid;
border-color: black;
border-width: 1px;
}
table {
border-style:none;
padding:1px;
margin:0px;
border-spacing: 0px;
border: 0pxborder: ;
width:850px;
}
</style>
I have created classes with each specific side to be displayed for each different purposes.
Here is the body part of the code, I have used class "left" for 1st row and "left2" for 2nd row, this is due to if I use both rows with "left" then second row will have thicker line between 1st row and 2nd row.
In this table I want to make lines between a specific column to disappear or appear but struggling to find shorter code to do so.
<table>
<tbody>
<tr>
<td width="149" class="left"> For testing 1</td>
<td width="312" class="updown"><input type="text" /></td>
<td width="172" class="left"> For testing 2</td>
<td width="204" class="right"> <input type="text" /></td>
</tr>
<tr>
<td class="left2">For testing 3</td>
<td class="right2" colspan="3"><input type="text" /></td>
</tr>
<tr>
<td class="left2" colspan="2">For testing 4</td>
<td class="finish" colspan="2"><input type="text" /></td>
</tr>
</tbody>
</table>

Answer 1

Here is a character-saving solution with border-collapse: collapse;
LIVE DEMO
HTML:
<table>
<tbody>
<tr>
<td><span>For testing 1</span><input type="text" /></td>
<td><span>For testing 2</span><input type="text" /></td>
</tr>
<tr>
<td colspan="2"><span>For testing 3</span><input type="text" /></td>
</tr>
<tr>
<td><span>For testing 4</span></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
CSS:
td {
border: 1px solid black;
border-collapse: collapse;
}
table {
border: 1px solid black;
border-collapse: collapse;
width: 850px;
}
span {
float: left;
width: 150px;
}

Answer 2

What you could do is this:
td {
border:1px solid black;
}
td.left{
border-right-style:none;
}
td.right{
border-left:none;
}
td.updown{
border-left:none;
border-right:none;
}
td.left2{
border-top:none;
border-right:none;
}
td.right2{
border-left:none;
border-top:none;
}
td.updown2{
border-top:none;
border-left:none;
border-right:none;
}
td.finish{
border-top:none;
}
See: http://jsfiddle.net/Cuyxh/
However, I would suggest using classes for each border in your HTML, for a more modular approach.
Example:
b-left, b-right, b-top, b-down {
border-color:black;
border-width:1px;
}
b-left {
border-left-style:solid;
}
b-top {
border-top-style:solid;
}
b-right {
border-right-style:solid;
}
b-bottom {
border-bottom-style:solid;
}
And then adding these classes to your table cells. For example:
<td width="149" class="b-left b-top">For testing 1</td>