应用xhtml+CSS开发符合Web标准网站WebSite表格用途是越来越少了但数据显示表格有着强大优势并不是味认为Web标准网站WebSite就不用表格这样理解是片面表格有它功能和优势只是不再用表格进行布局罢了

　　我们看个CSS+JS打造可伸缩表格例子在实际操作中或许你我都会常常遇到这种形式数据看下面效果图:



　　点击表格右下角小箭头图标表格就会伸展开来显示出表格中数据此时小签头就会变成收缩形式再次点击表格就会收缩起来表格中数据就实现了隐藏

　　这个例子需要你注意是实现这样效果是JS应用功劳CSS只是对表格进行了相关显示设置:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
body{
    font-family:Arial,Sans-Ser;
    font-size:90%;
    background:#cc9;
}
#boundary{
    background:#f8f8f8;
    padding:2em;
    width:40em;
}
h1{
    font-family:\"TrebuchetMS\",Sans-ser;
    text-transform:upper;
    color:#696;
    font-size:120%;
}

table.footcollapse{
    width:30em;
}
table.footcollapsecaption{
    font-size:120%;
    text-transform:upper;
    text-align:left;
    padding:.5em1em;
}
table.footcollaph{
    text-align:left;
}
table.footcollapse,table.footcollaph,table.footcollaph
{
    border:none;
    border-collapse:collapse;    
}
table.footcollapheadth
{
    width:10em;
    border-style:solid;
    border-width:1px;
    border-color:#cff#69c#69c#cff;
    background:#9cf;
    padding:2px10px;
}
table.footcollapfootth,
table.footcollapfoottd
{
    border-style:solid;
    border-width:1px;
    border-color:#9cf#369#369#9cf;
    background:#69c;
    padding:2px10px;
}
table.footcollapbody{
    background:#ddd;
}
table.footcollapbodytd{
    padding:5px10px;
    border:1pxsolid#999;
}
table.footcollapbodyth{
    padding:2px10px;
    border:1pxsolid#999;
    border-left:none;
}
table.footcollapbodytr.odd{
    background:#ccc;
}

table.footcollapfoottdimg{
    border:none;
    vertical-align:bottom;
    padding-left:10px;
    float:right;
}

　　
　　点击下面链接查看运行效果:
　　http://www.52css.com/attachments/month_0703/365/52css_com.html
　　我们看下面JS脚本:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
functiontablecollapse
{
    /*Variables*/
    varcollapseClass=\'footcollapse\';
    varcollapsePic=\'arrow_up.g\';
    varexpandPic=\'arrow_down.g\';
    varinitialCollapse=true;

    //loopthroughalltables
    vart=document.getElementsByTagName(\'table\');
    varchecktest=RegExp(\"(^|\\\\s)\"+collapseClass+\"(\\\\s|$)\");
    for(vari=0;i<t.length;i)
    {
        //thetablehasnottheright,skipit


        (!checktest.test(t[i].Name)){continue;}        

        //makethefooterclickable
        t[i].getElementsByTagName(\'tfoot\')[0].onclick=function
        {
            //loopthroughallbodiesofthistableandshoworhide
            //them
            vartb=this.parentNode.getElementsByTagName(\'tbody\');
            for(vari=0;i<tb.length;i)
            {
                tb[i].style.display=tb[i].style.display\'none\'?\'\':\'none\';
            }            
            //changetheimageaccordingly
            varli=this.getElementsByTagName(\'img\')[0];
            li.src=li.src.indexOf(collapsePic)-1?collapsePic:expandPic;    
        }
        //thebodiesshouldbecollapsedinitially,doso
        (initialCollapse)
        {
            vartb=t[i].getElementsByTagName(\'tbody\');
            for(varj=0;j<tb.length;j)
            {
                tb[j].style.display=\'none\';
            }            
        }
        //addtheimagesurroundedbyadummylinktoallowkeyboard
        //accesstothelastcellhefooter
        vara=document.createElement(\'a\');
        a.href=\'#\';
        a.onclick=function{false;}
        varimg=document.createElement(\'img\');
        img.src=initialCollapse?expandPic:collapsePic;
        vartf=t[i].getElementsByTagName(\'tfoot\')[0];
        varlt=tf.getElementsByTagName(\'td\')[tf.getElementsByTagName(\'td\').length-1];
        a.appendChild(img);
        lt.insertBefore(a,lt.firstChild);
    }        
}
//runtablecollapsewhenthepageloads
window.onload=tablecollapse;