工作需要，要个Table画细线表格，如果用表格的Border属性呢，样式是立体的，不太好看，而且如果表格嵌套的话，里面的表格的外边框会比较粗，所以自己写了个JQuery的插件，可以画带外边框的细线表格和不带外边框的细线表格

插件代码：

// JScript 文件

jQuery.fn.extend({
  //带外边框
  border: function() {
    this.each(function(){            
        $(this).find("tbody:first >tr>td").addClass("borderTop");
        
        $(this).find("tbody:first >tr>td").addClass("borderRight");
        
        var trs = $(this).find("tbody:first >tr");
        for(var i=0; i<trs.size(); i++){
            var tr = trs[i];
            var rightTD = $(tr).children("td:first");
            var rightRowspan = rightTD.attr("rowspan") -1;
            rightTD.addClass("borderLeft");
            i = i+rightRowspan;
        }
        
        for(var i=0; i<trs.size();i++){
            var tr = trs[i];
            var bottomTD = $(tr).children("td");
            for(var j=0; j<bottomTD.size(); j++){
                var bottomRowspan = $(bottomTD[j]).attr("rowspan");
                if(bottomRowspan + i == trs.size()){
                    $(bottomTD[j]).addClass("borderBottom");
                }
                
                
            }
        }
        $(this).find("tbody:first >tr:last>td").addClass("borderBottom");
        
    });
    
    
    
  },
  //不带外边框
  noborder: function() {
    this.each(function(){
        var trs = $(this).find("tbody:first >tr");
        for(var i=0; i<trs.size(); i++){
            var tr = trs[i];
            var leftTD = $(tr).children("td:first");
            var leftRowspan = leftTD.attr("rowspan");
            for(var j=i+1; j<leftRowspan+i; j++)
            {
                $(trs[j]).children("td:first").addClass("borderLeft");
            }
            
        }
        $(this).find("tbody:first>tr").each(function(i){
            $(this).children("td:not(:first)").addClass("borderLeft");
        });
        
        for(var i=0; i<trs.size(); i++){
            var bottomTD = $(trs[i]).children("td");
            for(var j=0; j<bottomTD.size(); j++){
                var bottomRowspan = $(bottomTD[j]).attr("rowspan");
                if(bottomRowspan + i != trs.size()){
                    $(bottomTD[j]).addClass("borderBottom");
                }
            }
        }
        
    });
  }
}); 

CSS：

 .borderTop{
    border-top:solid 1px #000000;
}
.borderBottom{
    border-bottom:solid 1px #000000; 
}
.borderLeft{
    border-left:solid 1px #000000; 
}
.borderRight{
    border-right:solid 1px #000000; 
}

调用：

$(function() {
    $("table.border").border();
    $("table.noborder").noborder();
});

 <table class="border" cellpadding="0" cellspacing="0">
            <tr>
                <td style="width: 100px; height: 21px;">
                    &nbsp;</td>
                <td style="width: 100px; height: 21px;">
                    &nbsp;</td>
            </tr>
            <tr>
                <td style="width: 100px; height: 21px;">
                    &nbsp;</td>
                <td style="width: 100px; height: 21px;">
                    &nbsp;</td>
            </tr>
           
        </table>
        
        <table class="noborder" cellpadding="0" cellspacing="0">
            <tr>
                <td style="width: 100px; height: 21px;">
                    &nbsp;</td>
                <td style="width: 100px; height: 21px;">
                    &nbsp;</td>
            </tr>
            <tr>
                <td style="width: 100px; height: 21px;">
                    &nbsp;</td>
                <td style="width: 100px; height: 21px;">
                    &nbsp;</td>
            </tr>
           
        </table>

已知的问题：

如果表格中的td用到rowspan标记，会有问题，目前的替代做法是，用嵌套表格来实现（以解决）

如果表格中有tr或者td用display: none;隐藏了的话显示会不正确

ps:

2009-5-14:rowspan标记不能正常显示问题已解决