Html Table 样式

来源：互联网发布：软件测试的意义编辑：程序博客网时间：2024/05/21 06:18

框线制作常用代码代码含义 <table>...</table>建立表格，所有的其他标记都需要在此标记中 <table width=* heigth=*></table>设定表格宽度width和高度height，属性值可以使用点数，如：width=50，也可以使用百分比，如：width=50%。<table bgcolor=*></table> 表格背景色。属性值可使用颜色英文名称如：bgcolor=Blue，也可以使用十六进制值如：bgcolor=#799ED2 。<table background=*></table>表格的背景图。*=背景图片链接。如background=http://blog.hexun.com/images/rss2.png<table border=*></table>表格框线的宽度。如：border=5<table bordercolor=*></table>所有表格框线颜色，色值同上。<table bordercolordark=*></table>表格框线暗面(即右边.下边)颜色。<table bordercolorlight=*></table>表格框线亮面(即上边.左边)颜色。<table align=*></table>表格水平对齐属性。属性值有left(左)center(中)right(右)三种。<table valign=*></table>表格垂直对齐属性。属性值有top(顶部)bottom(底部)两种。<table cellspacing=*></table>单元格间隙属性。<table cellpadding=*></table>单元格数据间隙属性。<table rules=*></table>表格内框线属性。rules=none(隐藏表格内所有框线)。rules=rows(显示所有行间的水平框线)rules=cols(显示所有列间的垂直框线) <tbody>....</tbody>body标记就是HTML文件的内容，内可含有所有文字、图片、表格和多媒体文件等组合。处于<table></table>内。 <tr>......</tr>行。一组<tr></tr>为表格一行<td>.....</td>单元格。在<tr>与</tr>之间，一组<td></td>就是一小格。注：单元格也可以自设定高宽度，如：<td width=150 height=30></td><td rowspan=*></td>表格的行合并。*＝全部合并行数，如rowspan=5，指向下合并四行。<td colspan=*></td>单元格合并。*＝全部合并格数，如colspan=5，指向右合并四格。<td width=* height=* align=* valign=* bordercolor=* bgcolor=*></td><td>也可以像<table>那样使用多种属性代码定义单元格自有属性。 其它常用代码 <img src=图片链接 width=* height=*></img>贴图代码。<br>换行代码。这个代码只有单个，没有</br><p>......</p>分段代码。示例 <table width=* height=* bgcolor=* border=* bordercolor=* cellspacing=* cellpadding=*>
<body>
<tr>
<td>
此处加入内容
</td>
</tr>
</body>
</table>这就是一个带方框的代码贴子最基本的形式。如果在table和td里加上上边介绍的各种属性代码，或者增添tr和td的组数，就可以做出形式各异的贴子。

各种纯代码边框<TABLE cellSpacing=0 borderColorDark=#4c8328 cellPadding=0 width=10 height=10 borderColorLight=#98d470 border=8> <TBODY> <TR> <TD> <TABLE cellSpacing=0 borderColorDark=#98d470 cellPadding=0 width="100%" bgColor=#ffffff borderColorLight=#4c8328 border=6> <TBODY> <TR> <TD> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD> <TABLE cellSpacing=0 borderColorDark=#4c8328 cellPadding=0 width="100%" borderColorLight=#98d470 border=2> <TBODY> <TR> <TD> <TABLE cellSpacing=0 borderColorDark=#98d470 cellPadding=0 width="100%" bgColor=#ffffff borderColorLight=#4c8328 border=3> <TBODY> <TR> <TD> <TABLE cellSpacing=5 cellPadding=0 width=500 height=600 border=0> <TBODY> <TR> <TD> 内容...... </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> <TABLE style=" BORDER-BOTTOM: #cc9900 4px dashed" cellSpacing=0 cellPadding=10 align=center height=600> <TBODY> <TR> <TD> 内容...... </TD></TR></TBODY></TABLE><TABLE style="BORDER-RIGHT: Blue 5px dashed; BORDER-BOTTOM: Blue 5px dashed" cellSpacing=0 cellPadding=0 align=center> <TBODY> <TR> <TD> <TABLE borderColor=Blue height=600 cellSpacing=2 cellPadding=40 width=500 align=center bgColor=Blue border=3> <TBODY> <TR> <TD background=背景图链接> <TABLE border=0> <TBODY> <TR> <TD> 内容...... </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE><TABLE style="BORDER-TOP-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#2907b5 cellSpacing=0 cellPadding=5 width=650 align=center border=10> <TBODY> <TR> <TD> 内容........ </TD> </TR> </TBODY> </TABLE> <TABLE style="BORDER-RIGHT: #000000 5px dotted; " cellSpacing=3 cellPadding=5 width=500 height=500 align=center border=5> <TBODY> <TR> <TD> <TABLE cellSpacing=0 cellPadding=0 width="75%" border=0> <TBODY> <TR> <TD> 内容...... </TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> </TABLE><TABLE cellSpacing=0 cellPadding=0 width=100% border=0> <TBODY> <TR> <TD> <center> <TABLE cellSpacing=0 cellPadding=0 width=100% border=0> <TBODY> <TR> <TD vAlign=top width=100% height=20> <TABLE style="WORD-BREAK: break-all; BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 width=10% border=0> <TBODY> <TR> <TD width=26></TD> <TD style="LINE-HEIGHT: 18px" width=100%> <TABLE cellSpacing=0 cellPadding=15 width="100%" border=0> <TBODY> <TR> <TD vAlign=top width="100%" bgColor=#ffffff> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD vAlign=top> <center> <TABLE style="BORDER-RIGHT: #000000 4px dotted; BORDER-BOTTOM: #000000 4px dotted" cellSpacing=0> <TBODY> <TR> <TD> <TABLE style="BORDER-RIGHT: #000000 2px dotted; BORDER-BOTTOM: #000000 2px dotted" cellSpacing=0> <TBODY> <TR> <TD> <TABLE borderColor=#000000 cellSpacing=0 cellPadding=0 width=100% border=5> <TBODY> <TR> <TD> <center> <TABLE cellSpacing=0 cellPadding=5 width=500 height=600 border=0> <TBODY> <TR> <TD> 内容...... </TD></TR></TBODY></TABLE> </center> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </center> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </center> </TD></TR></TBODY></TABLE> <table style="BORDER-TOP-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#666666 cellSpacing=0 cellPadding=0 align=center border=2> <tbody> <tr> <td> <table style="BORDER-TOP-STYLE: dotted; BORDER-BOTTOM-STYLE: dotted" borderColor=#666666 cellSpacing=0 cellPadding=2 border=2> <tbody> <tr> <td> <table style="BORDER-RIGHT: #666666 1px dotted; BORDER-BOTTOM: #666666 1px dotted" borderColor=#666666 cellSpacing=2 cellPadding=4 width=500 height=600 align=center border=1> <tbody> <tr> <td> 内容...... </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table><table style="BORDER-TOP-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#000000 cellSpacing=0 cellPadding=0 border=3> <tbody> <tr> <td> <table style="BORDER-TOP-STYLE: dotted; BORDER-BOTTOM-STYLE: dotted" borderColor=#000000 cellSpacing=0 cellPadding=0 border=3> <tbody> <tr> <td> <table style="BORDER-TOP-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#000000 cellSpacing=0 cellPadding=0 border=4> <tbody> <tr> <td> <table style="BORDER-TOP-STYLE: dotted; BORDER-BOTTOM-STYLE: dotted" borderColor=#000000 cellSpacing=0 cellPadding=0 border=3> <tbody> <tr> <td> <table style="BORDER-RIGHT: #000000 0px ridge; BACKGROUND-COLOR: #000000" cellSpacing=3> <tbody> <tr> <td> <table style="BORDER-TOP-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#ffffff cellSpacing=0 cellPadding=0 border=2> <tbody> <tr> <td> <table style="WIDTH: 500px; BORDER-BOTTOM-STYLE: dotted" borderColor=#ffffff height=0 cellSpacing=0 cellPadding=10 border=3> <tbody> <tbody> <tr> <TD style="COLOR: #ffffff"> 内容...... </TD> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table>******************************
<TABLE style="BORDER-RIGHT: #4d2d7d 3px dotted; BORDER-BOTTOM: #4d2d7d 3px dotted" cellSpacing=0 cellPadding=0 align=center> <TBODY> <TR> <TD> <TABLE style="BORDER-RIGHT: #7d69c9 6px dotted; BORDER-BOTTOM: #7d69c9 6px dotted" cellSpacing=0 cellPadding=0 width=10> <TBODY> <TR> <TD> <TABLE style="BORDER-RIGHT: #4d2d7d 8px dotted; BORDER-BOTTOM: #4d2d7d 8px dotted" cellSpacing=0 cellPadding=0 width=10> <TBODY> <TR> <TD style="BORDER-RIGHT: #7b7bc0 1px dotted; BORDER-BOTTOM: #7b7bc0 1px dotted" borderColor=#7b7bc0 width=10 bgColor=#7b7bc0 height=10 border="0" cellpadding="0" cellspacing="0"> <TABLE height=600 cellSpacing=0 cellPadding=20 width=500 background=背景图链接 border=0> <TBODY> <TR> <TD> 内容...... </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE><TABLE style="BORDER-RIGHT: #3faf6c 6px dotted; BORDER-BOTTOM: #3faf6c 6px dotted" cellSpacing=0 cellPadding=0 align=center> <TBODY> <TR> <TD> <TABLE style="BORDER-RIGHT: #439b43 6px dotted; BORDER-BOTTOM: #439b43 6px dotted" cellSpacing=0 cellPadding=0 width=10> <TBODY> <TR> <TD> <TABLE style="BORDER-RIGHT: #94d1b9 5px dotted; BORDER-BOTTOM: #94d1b9 5px dotted" cellSpacing=0 cellPadding=0 width=10> <TBODY> <TR> <TD style="BORDER-RIGHT: #3f6c3f 2px dotted; BORDER-BOTTOM: #3f6c3f 2px dotted" borderColor=#3f6c3f width=10 bgColor=#3f6c3f height=10 border="0" cellpadding="0" cellspacing="0"> <TABLE height=600 cellSpacing=0 cellPadding=20 width=500 background=背景图链接 border=0> <TBODY> <TR> <TD> 内容...... </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE><TABLE cellPadding=3 width="480" bgColor=#000000 border=0> <TBODY> <TR> <TD> <TABLE height=660 cellSpacing=0 cellPadding=10 width=480 border=5 bortercolor="#000000"> <TBODY> <TR> <TD style="COLOR: #99ccff">内容....... </TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> </TABLE><TABLE cellPadding=5 height=600 width=500 align=center border=5> <TBODY> <TR> <TD> 内容...... </TD> </TR> </TBODY> </TABLE><TABLE width=500 height=600 borderColor=#aaaaaa cellSpacing=25 cellPadding=5 align=center bgColor=#eeeeee border=10> <TBODY> <TR> <TD> 内容...... </TD> </TR> </TBODY> </TABLE><TABLE borderColor=#ebd0be cellSpacing=2 cellPadding=3 width=180 height=120 bgColor=#000000 border=5> <TBODY> <TR> <TD style="COLOR: #ffffff">内容...... </TD> </TR> </TBODY> </TABLE><TABLE cellSpacing=0 width=10> <TBODY> <TR> <TD> <TABLE cellSpacing=0> <TBODY> <TR> <TD> <TABLE cellSpacing=0> <TBODY> <TR> <TD> <TABLE borderColor=#663300 cellSpacing=1 borderColorDark=#663300 cellPadding=1 width=10 align=center border=4> <TBODY> <TR> <TD> <TABLE cellSpacing=3 cellPadding=5 borderColor=white height=600 width=500 border=3> <TBODY> <TR> <TD> 内容...... </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE><TABLE style="BORDER-RIGHT: 8px groove; BORDER-BOTTOM: 8px groove" height=500 cellSpacing=5 borderColorDark=#808080 cellPadding=2 width=500 align=center borderColorLight=#c0c0c0 border=7> <TBODY> <TR> <TD> 内容...... </TD> </TR> </TBODY> </TABLE><table style="BORDER-RIGHT: #a6b9f2 8px ridge; BACKGROUND-COLOR: #e6e7f6" cellSpacing=15 cellPadding=5 align=center border=10> <tbody> <tr> <td> 内容...... </td> </tr> </tbody> </table>