您的位置：首页 > Web前端 > CSS

普通table表格样式及代码大全(全)

2011-08-27 11:24 363 查看

普通table表格样式及代码大全(全)

普通table表格样式及代码大全(全)(一)

[align=center]单实线边框表格[/align]

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>

<TBODY>

<TR>

<TD>

<DIV align=center>单实线边框表格</DIV></TD></TR></TBODY></TABLE>

[align=center]虚线边框表格[/align]

<TABLE style="BORDER-RIGHT: #ff6600 1px dashed; BORDER-TOP: #ff6600 1px dashed; BORDER-LEFT: #ff6600 1px dashed; BORDER-BOTTOM: #ff6600 1px dashed; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>

<TBODY>

<TR>

<TD>

<DIV align=center>虚线边框表格</DIV></TD></TR></TBODY></TABLE>

[align=center]点线边框表格[/align]

<TABLE style="BORDER-RIGHT: #ff6600 2px dotted; BORDER-TOP: #ff6600 2px dotted; BORDER-LEFT: #ff6600 2px dotted; BORDER-BOTTOM: #ff6600 2px dotted; BORDER-COLLAPSE: collapse" borderColor=#ff6600 height=40 cellPadding=1 width=250 align=center border=2>

<TBODY>

<TR>

<TD>

<DIV align=center>点线边框表格</DIV></TD></TR></TBODY></TABLE>

[align=center]双实线边框表格[/align]

<TABLE borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=3>

<TBODY>

<TR>

<TD>

<DIV align=center>双实线边框表格</DIV></TD></TR></TBODY></TABLE>

[align=center]槽线边框表格[/align]

<TABLE style="BORDER-RIGHT: #00f901 10px groove; BORDER-TOP: #00f901 10px groove; BORDER-LEFT: #00f901 10px groove; BORDER-BOTTOM: #00f901 10px groove; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center
border=10>

<TBODY>

<TR>

<TD>

<DIV align=center>槽线边框表格</DIV></TD></TR></TBODY></TABLE>

[align=center]脊线边框表格[/align]

<TABLE style="BORDER-RIGHT: #00f901 10px ridge; BORDER-TOP: #00f901 10px ridge; BORDER-LEFT: #00f901 10px ridge; BORDER-BOTTOM: #00f901 10px ridge; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>

<TBODY>

<TR>

<TD>

<DIV align=center>脊线边框表格</DIV></TD></TR></TBODY></TABLE>

[align=center]内凹效果边框[/align]

<TABLE style="BORDER-RIGHT: #00f901 10px inset; BORDER-TOP: #00f901 10px inset; BORDER-LEFT: #00f901 10px inset; BORDER-BOTTOM: #00f901 10px inset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>

<TBODY>

<TR>

<TD>

<DIV align=center>内凹效果边框</DIV></TD></TR></TBODY></TABLE>

[align=center]外凸效果边框[/align]

<TABLE style="BORDER-RIGHT: #00f901 10px outset; BORDER-TOP: #00f901 10px outset; BORDER-LEFT: #00f901 10px outset; BORDER-BOTTOM: #00f901 10px outset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center
border=10>

<TBODY>

<TR>

<TD>

<DIV align=center>外凸效果边框</DIV></TD></TR></TBODY></TABLE>

[align=center]内虚外实边框[/align]

<TABLE style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>

<TBODY>

<TR>

<TD style="BORDER-RIGHT: #4a4a84 2px dashed; BORDER-TOP: #4a4a84 2px dashed; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px dashed; BORDER-BOTTOM: #4a4a84 2px dashed">

<DIV align=center>内虚外实边框</DIV></TD></TR></TBODY></TABLE>

[align=center]外虚内实边框[/align]

<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>

<TBODY>

<TR>

<TD style="BORDER-RIGHT: #4a4a84 2px solid; BORDER-TOP: #4a4a84 2px solid; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px solid; BORDER-BOTTOM: #4a4a84 2px solid">

<DIV align=center>外虚内实边框</DIV></TD></TR></TBODY></TABLE>

[align=center]无边框表格[/align]

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center bgColor=#fffbec border=0>

<TBODY>

<TR>

<TD>

<DIV align=center>无边框表格</DIV></TD></TR></TBODY></TABLE>

隐藏下边框

<TABLE style="BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>

<TBODY>

<TR align=middle>

<TD style="BORDER-BOTTOM: medium none" height=40>隐藏下边框</TD></TR></TBODY></TABLE>

隐藏上边框

<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>

<TBODY>

<TR align=middle>

<TD style="BORDER-TOP: medium none" height=40>隐藏上边框</TD></TR></TBODY></TABLE>

隐藏左边框

<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>

<TBODY>

<TR align=middle>

<TD style="BORDER-LEFT: medium none" height=40>隐藏左边框 </TD></TR></TBODY></TABLE>

隐藏右边框

<TABLE style="BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>

<TBODY>

<TR align=middle>

<TD style="BORDER-RIGHT: medium none" height=40>隐藏右边框 </TD></TR></TBODY></TABLE>

隐藏左右边框

<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>

<TBODY>

<TR align=middle>

<TD style="BORDER-RIGHT: medium none; BORDER-LEFT: medium none" height=40>隐藏左右边框 </TD></TR></TBODY></TABLE>

隐藏上下边框

<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>

<TBODY>

<TR align=middle>

<TD style="BORDER-TOP: medium none; BORDER-BOTTOM: medium none" height=40>隐藏上下边框</TD></TR></TBODY></TABLE>

只显示上边框

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=above>

<TBODY>

<TR align=middle>

<TD height=40>只显示上边框</TD></TR></TBODY></TABLE>

只显示下边框

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=below>

<TBODY>

<TR align=middle>

<TD height=40>只显示下边框</TD></TR></TBODY></TABLE>

只显示左边框

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=lhs>

<TBODY>

<TR align=middle>

<TD height=40>只显示左边框</TD></TR></TBODY></TABLE>

只显示右边框

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=rhs>

<TBODY>

<TR align=middle>

<TD height=40>只显示右边框</TD></TR></TBODY></TABLE>

不显示任何边框

<TABLE borderColor=#ff6600 cellSpacing=0 cellPadding=0 width=250 align=center bgColor=#fffbec border=1 frame=void>

<TBODY>

<TR align=middle>

<TD height=40>不显示任何边框</TD></TR></TBODY></TABLE>

[align=center]单行单列[/align]

[align=center]一行多列[/align]

[align=center]一列多行[/align]

[align=center]多行多列[/align]	[align=center]多行多列[/align]	[align=center]多行多列[/align]
[align=center]多行多列[/align]	[align=center]多行多列[/align]	[align=center]多行多列[/align]
[align=center]多行多列[/align]	[align=center]多行多列[/align]	[align=center]多行多列[/align]

[align=center]合并列的表格[/align]
[align=center]合并列的表格[/align]	[align=center]合并列的表格[/align]	[align=center]合并列的表格[/align]
[align=center]合并列的表格[/align]	[align=center]合并列的表格[/align]	[align=center]合并列的表格[/align]

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>

<TBODY>

<TR>

<TD colSpan=3>

<DIV align=center>合并列的表格</DIV></TD>

<TR>

<TD width=100>

<DIV align=center>合并列的表格</DIV></TD>

<TD width=100>

<DIV align=center>合并列的表格</DIV></TD>

<TD width=100>

<DIV align=center>合并列的表格</DIV></TD>

<TR>

<TD>

<DIV align=center>合并列的表格</DIV></TD>

<TD>

<DIV align=center>合并列的表格</DIV></TD>

<TD>

<DIV align=center>合并列的表格</DIV></TD></TR></TR></TR></TBODY></TABLE>

[align=center]合并行的表格[/align]	[align=center]合并行的表格[/align]	[align=center]合并行的表格[/align]
[align=center]合并行的表格[/align]	[align=center]合并行的表格[/align]
[align=center]合并行的表格[/align]	[align=center]合并行的表格[/align]

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>

<TBODY>

<TR>

<TD width=100 rowSpan=3>

<DIV align=center>合并行的表格</DIV></TD>

<TD width=100>

<DIV align=center>合并行的表格</DIV></TD>

<TD width=100>

<DIV align=center>合并行的表格</DIV></TD>

<TR>

<TD>

<DIV align=center>合并行的表格</DIV></TD>

<TD>

<DIV align=center>合并行的表格</DIV></TD>

<TR>

<TD>

<DIV align=center>合并行的表格</DIV></TD>

<TD>

<DIV align=center>合并行的表格</DIV></TD></TR></TR></TR></TBODY></TABLE>

[align=center]复杂表格[/align]	[align=center]复杂表格[/align]	[align=center]复杂表格[/align]
[align=center]复杂表格[/align]	[align=center]复杂表格[/align]	[align=center]复杂表格[/align]	[align=center]复杂表格[/align]	[align=center]复杂表格[/align]
[align=center]复杂表格[/align]	[align=center]复杂表格[/align]	[align=center]复杂表格[/align]
[align=center]复杂表格[/align]	[align=center]复杂表格[/align]	[align=center]复杂表格[/align]
[align=center]复杂表格[/align]	[align=center]复杂表格[/align]

隐藏	横向	分隔线
隐藏	横向	分隔线
隐藏	横向	分隔线

隐藏	纵向	分隔线
隐藏	纵向	分隔线
隐藏	纵向	分隔线

隐藏	纵横	分隔线
隐藏	纵横	分隔线
隐藏	纵横	分隔线

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=none width=300 align=center bgColor=#e1f8ff border=1>

<TBODY>

<TR>

<TD width=100>隐藏</TD>

<TD width=100>纵横</TD>

<TD width=100>分隔线</TD>

<TR>

<TD>隐藏</TD>

<TD>纵横</TD>

<TD>分隔线</TD>

<TR>

<TD>隐藏</TD>

<TD>纵横</TD>

<TD>分隔线</TD></TR></TR></TR></TBODY></TABLE>

标题

[align=center]文本内容——标题位于表体外的表格[/align]

<TABLE width=250 align=center border=0>

<CAPTION>标题</CAPTION>

<TBODY>

<TR>

<TD bgColor=#cccccc>

<DIV style="HEIGHT: 60px" align=center>文本内容——标题位于表体外的表格</DIV></TD></TR></TBODY></TABLE>

[align=center]标题[/align]

[align=center]文本内容——标题位于表体内的表格[/align]

<TABLE width=250 align=center border=0>

<TBODY>

<TR>

<TD bgColor=#999999>

<DIV align=center><FONT color=#ffffff><B>标题</B></FONT></DIV></TD></TR>

<TR>

<TD bgColor=#cccccc>

<DIV style="HEIGHT: 60px" align=center>文本内容——标题位于表体内的表格</DIV></TD></TR></TBODY></TABLE>

标题
[align=center]文本内容——标题位于边框上的表格[/align]
[align=center][/align]

<FIELDSET style="WIDTH: 250px" align=center><LEGEND>标题</LEGEND>

<DIV align=center>文本内容——标题位于边框上的表格</DIV>

<DIV align=center> </DIV></FIELDSET>

表中表
文本内容——表中表效果

<TABLE cellSpacing=0 cellPadding=0 width=250 align=center>

<TBODY>

<TR>

<TD>

<FIELDSET style="WIDTH: 250px; BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" align=center><LEGEND style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; BORDER-LEFT: #808080 1px solid;
background-Color: #e1f8ff; BORDER-BOTTOM: #808080 1px solid"><FONT color=#000000>表中表</FONT> </LEGEND>

<P align=center>文本内容——表中表效果</P></FIELDSET> </TD></TR></TBODY></TABLE>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： table border div

相关文章推荐

新的分享

章节导航