表格边框代码的制作

表格边框代码应用（1）一、表格的基本代码：表格由<TABLExTR>vTD>和</TD>v/TR>v/TABLE>这六标签以及border这个属性组合而成，可以通过在代码中加入更多属性来实现表格的各种不同样式。1、最简单的表格：代码：<TABLEborder=l><TR>vTD>表格内§</TDx/TR></TABLE>效果：表格内容说明：表格内的''表格内容〃可以是文字、图片、flash、链接网址等。2、多单元表格：代码：<TABLEborder=l><TR>vTD>表格内容v/TD>vTD>表格内容v/TD>vTD>表格内容v/TD></TR><TABLEborder=5><TR>vTD>表格内§</TDx/TR></TABLE>效果：表格内容2、表格框线颜色的设定，只需将属性''bordercolor〃的颜色码设置成自己满意即可：代码：<TABLEborderColor=#0080FFborder=5><TR>vTD>表格内§</TDx/TR></TABLE>效果：3、设定表格的阴影、亮面颜色，可以使表格的边框更富立体感，只需将属性''borderColorLight〃的颜色码（亮面）和''borderColorDark〃的颜色码（暗面）选定即可：代码：<TABLEborderColorDark=#004B97borderColorLight=#62B0FFborder=5><TR>vTD>表格内容v/TD>v/TR></TABLE>效果：表格内容六、表格栏距设置：1、利用''cellpadding〃属性设定表格内容与格线之间的距离,其默认值为2,以自己满意即可：代码：<TABLEcellpadding=5border=l><TR>vTD>表格内容v/TD>vTD>表格内容v/TD></TR></TABLE>效果：表格内容表格内容2、利用''cellspacing〃属性设定表格栏位格线之间的距离。其默认值为2,以自己满意即可：代码：<TABLEcellspacing=5border=l><TR>vTD>表格内容v/TD><TD>表格内容v/TD>v/TR></TABLE>效果：表格内容表格内容附：表格常用属性1、＜TABLEx/TABLE＞：定义表格的元素。分别作起、始标识符，网页中有几张表格，就有几对此元素。2、＜TRx/TR＞：定义表格中''行〃的元素。在表格中有几对此元素就表示当前表格中有几行。3、＜TDx/TD＞：表示一行中单元格的元素。一行中有几对此元素，就有几个单元格。4、border：表格外框线宽度，属性值为数字。如border=5,表示表格边框的粗细为5个像素（默认值为1）,为。表示没有边框。5、bordercolor：表格的边框线颜色，属性值为各种颜色代码（当border值不为0时设置此值有效）。如borderColor=#0080FF,表示表格边框线的颜色为蓝色（默认值为白色）。6、bordercolorlight：亮边框（表格的左边和上边框）颜色，属性值为各种颜色代码（当border值不为0时设置此值有效）。7、bordercolordark：暗边框（表格的右边和下边框）颜色，属性值为各种颜色代码（当border值不为0时设置此值有效）。8、bgcolor：表格的背景颜色，属性值为各种颜色代码。如bgcolor=#FF0000,表示表格背景色为红色（默认值为无色）。9、background：表格的背景图案，属性值为有效的图片地址。10、cellpadding：表示单元格内容与单元格边框之间的距离，属性值为数字。11、cellspacing：表示表格中各单元格的间距，属性值为数字。当表格只有一个单元格时，那么表示该单元格与表格边框的距离。12、width：表格的宽度，属性值为像素和百分比两种。13、height：表格的高度,取值方法同width。14、align：表格的对齐方式，属性值为left（左对齐，默认）、center（居中）以及right（右对齐）。15、colspan：定义合并表格的列数，属性值是数字。16、rowspan：定义合并表格的行数，属性值是数字。17、vth>表头v/th>：定义表头，表头内容置于<TH>和v/TH>之间，显示时呈粗体字形式。18、<caption></caption>：建立表格的标题，通过align属性定义标题的位置，其属性有四：即top（在表格上方）、bottom（在表格下方）、left（在表格的左上方）、right（在表格的右上方）。表格边框代码应用（4）表格应用实例（一）一、单列表格：代码：<TABLEborderColor=#33ccffcellSpacing=5cellPadding=10width=600align=centerborder=3><TBODY><TRxTD><Ahref="链接网址“target=_blank>±^</A></TD></TR><TRxTD><Ahref="链接网址“target=_blank>文字v/A>v/TD></TR><TRxTD><Ahref="链接网址“target=_blank>i^</Ax/TDx/TR></TBODYx/TABLE>效果：二、双列表格：代码：<TABLEborderColor=#33ccffcellSpacing=5cellPadding=10width=600align=centerborder=3><TBODY><TRxTDwidth="50%"><Ahref二"链接网址“target=_blank>文字v/A>v/TD><TDwidth="50%"><Ahref="链接网址“target=_blank>文字v/A>v/TD>v/TR><TRxTD><Ahref="链接网址“target=_blank>文字v/A>v/TD><TD><Ahref="链接网址“target=_blank>y：^</A></TD></TR><TRxTD><Ahref="链接网址“target=_blank>文字v/A>v/TD><TD><Ahref="链接网址“target=_Wank>文字v/A></TD></TR></TBODYx/TABLE>效果：文字文字文字文字文字文字三、四列表格：代码：<TABLEborderColor=#33ccffcellSpacing=5cellPadding=10width=600align=centerborder=3><TBODY><TRxTDwidth="25%"><Ahref="链接网址“target=_blank>文字v/A></TD><TDwidth="25%"><Ahref="链接网址“target=_blank>文字v/A></TD><TDwidth="25%"><Ahref="链接网址“tdrget=_blank>文字v/A>v/TD><TDwidth="25%"><Ahref="链接网址“target二_Wank>文字</A></TD>v/TR><TRxTD><Ahref="链接网址“tdrget=_blank>文字v/A>v/TD><TD><Ahref="链接网址“target=_blank>文字v/A></TD><TD><Ahref="链接网址“target=_blank>文字v/A></TD><TD><Ahref="链接网址“tdrget=_blank>文字v/A></TD>v/TR><TRxTD><Ahref="链接网址“target=_tdank>文字v/A></TD><TD><Ahref="链接网址“target=_blank>文字v/A>v/TD><TD><Ah「ef=”链接网址"target=_blank>文字v/A>v/TD><TD><Ahref="链接网址“target=_Wank>文字v/A>v/TD>v/TR></TBODYx/TABLE>效果：文字文字文字文字文字文字文字文字文字文字文字文字四、首行合并，以下两列：代码：<TABLEborderColor=#33ccffcellSpacing=5cellPadding=10width=600align=centerborder=3><TBODY><TRxTDalign=centercolSpan=2><Ahref="链接网址“target=_blank>±^</A></TD></TR><TRxTDwidth="50%"><Ahref="链接网址“target=_blank>文字v/A>v/TD><TDwidth="50%"><Ahref="链接网址“target=_blank>文字v/A>v/TD>v/TR><TRxTD><Ahref="链接网址“target=_blank>文字v/A>v/TD><TD><Ahref="链接网址“target=_blank>文字v/A>v/TD>v/TR></TBODYx/TABLE>效果：文字文字文字文字文字文字文字文字五、首行合并，以下三列：文字代码：<TABLEborderColor=#33ccffcellSpacing=5cellPadding=10width=600align=centerborder=3><TBODY><TRxTDalign=centercolSpan=3><Ahref="链接网址“target=_blank>文字v/A>v/TD>v/TR><TRxTDwidth="33.33%"><Ahref="链接网址“target=_blank>±^</Ax/TD><TDwidth="33.33%"><Ah「ef=”链接网址"target=_blank>文字v/A>v/TD><TDwidth="33.33%"><Ahref="链接网址“target=_blank>文字v/A>v/TD>v/TR><TR><TD><Ahref="链接网址“target=_blank>文字v/A>v/TD><TD><Ahref="链接网址“target=_blank>文字v/A>v/TD><TD><Ahref="链接网址“target=_b2nk>文字v/A></TD></TR></TBODYx/TABLE>效果：表格边框代码应用（5）表格应用实例（二）当表格中只有一个单元格时，它实际就是一个日志边框。</TABLE>效果：表格内容表格内容表格内容3、多行多列表格：代码：<TABLEborder=l>vTR><TD>表格内容v/TD><TD>表格内容v/TD><TD>表格内容</TD>v/TR><TR>vTD>表格内容v/TD>vTD>表格内容v/TD><TD>表格内容v/TD>v/TR></TABLE>效果：表格内容表格内容表格内容表格内容表格内容表格内容、表格栏位合并的代码：表格栏位合并基本上分为行合并和列合并两种。1、左右栏位合并的表格：一、颜色边框：1、单色边框、透明背景、固定宽度的边框:代码：<TABLEborderColor=#0080ffcellSpacing=5cellPadding=5width=600align=centerborder=10><TR><TD>日志内容v/TD>v/TR></TABLE>效果：说明：边框的高度可随日志内容进行调整。2、阴影边框、颜色背景、固定宽度的边框：代码：<TABLEcellSpacing=5borderColorDark=#004B97cellPadding=5width=600align=centerbgColor=#660000borderColorLight=#62B0FFborder=10><TR><TD>日志内容v/TD>v/TR></TABLE>效果：日志内容3、双色边框、颜色背景、固定宽度的边框:代码：<TABLEborderColor=#0080ffcellSpacing=5cellPadding=5width=600align=centerbgColor=#660000border=10><TRxTDborde「Color=#ffffff>日志内容v/TD>v/TR></TABLE>效果：说明：vTD＞标签中多了一个、'borderColor=#ffffff〃，表示内框线颜色。二、图片边框：1、图片边框、颜色背景、固定宽度的边框：代码：<TABLEcellSpacing=15width=600bdckground=图片地址>vTR>vTD><TABLEwidth=600align=centerbgColor=#660000><TR><TD>日志内容v/TD></TR></TABLEx/TDx/TR></TABLE>效果：日志内容2、单层图片边框、颜色细框、颜色背景、最大化宽度的边框：代码：<TABLEborderColor=#0080ffcellSpacing=15width="100%"background二图片地址border=2><TR><TD><TABLEborderColor=#0080ffwidth="100%"align=centerbgColor=#660000border=2><TR><TD>日志内容v/TD>v/TR></TABLEx/TDx/TRx/TABLE>效果：日志内容3、多层图片边框、颜色细框、图片背景、固定宽度的边框:代码：<TABLEborderColor=#0080ffcellSpacing=3cellPadding=5width=600align=centerbackground=H>tife±il:border=l><TRxTD><TABLEborderColor=#0080ffcellSpacing=30cellPadding=5width="100%"align=centerbackground=图片地址border=l><TRxTD><TABLEborderColor=#0080ffcellSpacing=3cellPadding=5width="100%"align=centerbackground=图片地址border=l><TRxTD><TABLEborderColor=#0080ffcellSpacing=10cellPadding=5width="100%"align=centerbackground=图片地址border=l><TRxTD><TABLEborderColor=#0080ffcellSpacing=3cellPadding=lwidth="100%"align=centerbackground=图片地址border=l><TR><TD>日志内容v/TD></TR></TABLEx/TDx/TR></TABLEx/TDx/TR></TABLEx/TDx/TR></TABLEx/TDx/TR></TABLE>效果：日志内容表格边框代码应用（6）表格应用实例（三）代码<TABLEborderColor=#ffOOOOOcellSpacing=5cellPadding=lwidth=650align=centerbackground=border=l><TRxTD><TABLEborderColor=#000000cellSpacing=20cellPadding=lwidth="100%"片地址border=l><TRxTD><TABLEborderColor=#ff00000cellSpacing=5cellPadding=lwidth="100%"5己^<9101111€1=图片地址border=l><TRxTD><TABLEborderColor=#000000cellSpacing=10cellPadding=lwidth="100%"background=图片地址border=l><TRxTD><TABLEborderColor=#ffOOOOOcellSpacing=5cellPadding=lwidth="100%"background二图片地址border=l>vTR>vTD>日志内容v/TD>v/TR></TABLEx/TDx/TR></TABLEx/TDx/TR></TABLEx/TDx/TR></TABLEx/TDx/TR></TABLE>效果:日志内容说明:更换代码中的图片地址，或相关属性的数值,可得到风格、色彩各异的日志边框。表格应用实例（四）表格应用实例（五）代码：<TABLEborder=l><TRxTDcolspan=3>表格内容v/TD>v/TR><TR>vTD>表格内容v/TD>vTD>表格内容</TD>vTD>表格内容v/TD>v/TR></TABLE>效果：表格内容表格内容表格内容表格内容说明：首行的<TD>标签中多了一个colspan命令，这是''左右栏位合并〃的属性,colspan=3的意思是''首行合并了3个单元格〃，因此后面的的两个vTD>都可以省掉，因为那两格被合并To底行左右栏位合并的表格：代码：<TABLEborder=l><TR>vTD>表格内容v/TD>vTD>表格内容v/TD>vTD>表格内容v/TD>v/TR><TR>vTD>表格内容v/TD>vTD>表格内容v/TD>vTD>表格内容v/TD>v/TR><TRxTDcolspan=3>表格内容v/TD>v/TR></TABLE>效果：表格内容表格内容表格内容表格内容表格内容表格内容表格内容说明：底行的<TD>标签中多了一个colspan命令，这也是''左右栏位合并〃的属性，colspan=3的意思是''底行合并了3个单元格〃，因此后面的的两个<TD>都也可以省掉。2、上下栏位合并的表格：代码：<TABLEborder=l><TRxTDrowspan=2>表格内容v/TD>vTD>表格内容v/TD>vTD>表格内容</TD>v/TR><TR>vTD>表格内容v/TD>vTD>表格内容v/TD>v/TR></TABLE>效果：表格内容表格内容表格内容表格内容表格内容说明：首列的vTD>标签中那么多了个rowspan命令，这是''上下栏位合并〃的属性，rowspan=2的意思是''首列合并了2个单元格〃。表格边框代码应用（2）三、表格的对齐设置：1、表格边框大小的设置，可通过增加表格的''width〃和''height〃的属性来设定表格的''宽度〃和''高度〃，其宽度和高度由数值（即像素数）决定。代码：<TABLEheight=80width=300border=l><TR>vTD>表格内容v/TD></TR></TABLE>效果：表格内容2、表格中的内容默认位置靠左，只要在<TD>标签加入居中属性''align=center〃即可将表格内容居中：代码:<TABLEheight=80width=300border=l><TR><TDdlign=center>表格内容v/TD>v/TR></TABLE>效果:表格内容3、在vTD>标签中加入“valign=top〃属性可将表格中的内容靠上方对齐。代码：<TABLEheight=80width=300border=l><TRxTDdlign=centervdlign=top>表格内容v/TD>v/TR></TABLE>效果：表格内容四、表格的背景设置:1、表格背景颜色（即边框内的底色）可利用''bgcolor=颜色码〃进行设定，颜色码可根据爱好选定。代码：<TABLEbgcolor=#660000border=l><TR>vTD>表格内容v/T