zoukankan html css js c++ java

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

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

单实线边框表格

<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>

虚线边框表格

<table style="border-right: #ff6600 1px dashed;border-top: #ff6600 1px dashed; boeder-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>

点线边框表格

<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>

双实线边框表格

<table  borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=3>
    <tbody>
    <tr>
        <td>
            <div align=center>双实线边框表格</div>
        </td>
    </tr>
    </tbody>
</table>

槽线边框表格

<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>

脊线边框表格

<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>

内凹效果边框

<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>

外凸效果边框

<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>

内虚外实边框

<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>
            <div align=center>内虚外实边框</div>
        </td>
    </tr>
    </tbody>
</table>

外虚内实边框

<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>
            <div align=center>外虚内实边框</div>
        </td>
    </tr>
    </tbody>
</table>

无边框表格

<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>

单行单列

一行多列

一列多行

多行多列	多行多列	多行多列
多行多列	多行多列	多行多列
多行多列	多行多列	多行多列

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff
       border=1>
    <TBODY>
    <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>
        <TD>
            <DIV align=center>多行多列</DIV>
        </TD>
        <TD>
            <DIV align=center>多行多列</DIV>
        </TD>
        <TD>
            <DIV align=center>多行多列</DIV>
        </TD>
    </TR>
    </TR></TR></TBODY>
</TABLE>

合并列的表格
合并列的表格	合并列的表格	合并列的表格
合并列的表格	合并列的表格	合并列的表格


<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>

合并行的表格	合并行的表格	合并行的表格
	合并行的表格	合并行的表格
	合并行的表格	合并行的表格

<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>

复杂表格	复杂表格			复杂表格
复杂表格	复杂表格	复杂表格	复杂表格	复杂表格
		复杂表格	复杂表格	复杂表格
		复杂表格	复杂表格	复杂表格
	复杂表格	复杂表格

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

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

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

标题
文本内容——标题位于表体外的表格

<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>

标题

文本内容——标题位于表体内的表格

<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>

标题

文本内容——标题位于边框上的表格

<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>

查看全文

相关阅读:
codna的安装与使用
 ubuntu 下修改MySQL 的root用户密码
 python中的排序
 CF 543C Remembering Strings
CF 1119C Ramesses and Corner Inversion
HihoCoder 1384 Genius ACM
BZOJ3032 七夕祭
 Vjudge Code
CF51C Three Base Stations
Sumdiv POJ 1845

原文地址：https://www.cnblogs.com/theWayToAce/p/5280776.html