表格边框的处理是CSS网页布局中经常会遇到的内容，在webjx.com中也有过相关的介绍，除了将表格作为一个整体进行定义，您也可以将表格边框的四个部分分别进行定义，包括顶部、底部、左边和右边，
。列表B中的代码将刚才的例子中的表格分成四个部分单独定义。 <PRE><OL class=dp-xml><LI class=alt><SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>html</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>title</SPAN><SPAN class=tag>></SPAN><SPAN>HTML Table</SPAN><SPAN class=tag></< span><SPAN class=tag-name>title</SPAN><SPAN class=tag>></SPAN><SPAN class=tag></< span><SPAN class=tag-name>head</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN></SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>style</SPAN><SPAN> </SPAN><SPAN class=attribute>type</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"text/css"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN>TABLE { </SPAN><LI><SPAN>background: blue; </SPAN><LI class=alt><SPAN>border-collapse: separate; </SPAN><LI><SPAN>border-spacing: 10pt; </SPAN><LI class=alt><SPAN>border-top: 15px solid red; </SPAN><LI><SPAN>border-left: 15px solid red; </SPAN><LI class=alt><SPAN>border-right: 5px dashed black; </SPAN><LI><SPAN>border-bottom: 10px dashed blue; } </SPAN><LI class=alt><SPAN>TD, TH { </SPAN><LI><SPAN>background: white; </SPAN><LI class=alt><SPAN>border: outset 5pt; </SPAN><LI><SPAN>horizontal-align: right; } </SPAN><LI class=alt><SPAN>CAPTION { </SPAN><LI><SPAN>border: ridge 5pt blue; </SPAN><LI class=alt><SPAN>border-top: ridge 10pt blue; } </SPAN><LI><SPAN class=tag></< span><SPAN class=tag-name>style</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>body</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>table</SPAN><SPAN> </SPAN><SPAN class=attribute>summary</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"webjx.com - Tables and CSS"</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>caption</SPAN><SPAN class=tag>></SPAN><SPAN>First Quarter Sales</SPAN><SPAN class=tag></< span><SPAN class=tag-name>caption</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>thead</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>tr</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=attribute>thabbr</SPAN><SPAN class=tag-name>thabbr</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"salesperson"</SPAN><SPAN> </SPAN><SPAN class=attribute>scope</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"col"</SPAN><SPAN class=tag>></SPAN><SPAN>Person</SPAN><SPAN class=tag></< span><SPAN class=tag-name>th</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=attribute>thabbr</SPAN><SPAN class=tag-name>thabbr</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"sales"</SPAN><SPAN> </SPAN><SPAN class=attribute>scope</SPAN><SPAN>=</SPAN><SPAN class=attribute-value>"col"</SPAN><SPAN class=tag>></SPAN><SPAN>Sales</SPAN><SPAN class=tag></< span><SPAN class=tag-name>th</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>tr</SPAN><SPAN class=tag>></SPAN><SPAN class=tag></< span><SPAN class=tag-name>thead</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>tbody</SPAN><SPAN class=tag>></SPAN><SPAN class=tag><</SPAN><SPAN class=tag-name>tr</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag><</SPAN><SPAN class=tag-name>td</SPAN><SPAN class=tag>></SPAN><SPAN>Mr. Jin</SPAN><SPAN class=tag></< span><SPAN class=tag-name>td</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI><SPAN class=tag><</SPAN><SPAN class=tag-name>td</SPAN><SPAN class=tag>></SPAN><SPAN>600.00</SPAN><SPAN class=tag></< span><SPAN class=tag-name>td</SPAN><SPAN class=tag>></SPAN><SPAN> </SPAN><LI class=alt><SPAN class=tag></< span><SPAN class=tag-name>tr</SPAN><SPAN class=tag>></SPAN></LI></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></OL></PRE>