细线表格用到的核心 CSS 规则是什么?

html-css021

细线表格用到的核心 CSS 规则是什么?,第1张

可以为表格标签定义宽,高和边框样式,并为单元格单独设置相应的边框。

如果只设置table样式,则只显示外边框的样式,内部不显示边框。

要想设置相邻单元格边框之间的距离,只能对table标签应用属性。

<html>

<head>

<title>实线表格</title>

<style>

td{BORDER-RIGHT: #777777 1px solidBORDER-TOP: #777777 1px solidBORDER-LEFT: #777777 1px solidBORDER-BOTTOM: #777777 1px solid}

</style>

</head>

<body bgcolor="black">

<TABLE cellSpacing=2 cellPadding=0 border=0>

<TBODY>

<TR>

<TD>实线表格边框代码</TD><TD>实线表格边框代码</TD><TD>实线表格边框代码</TD><TD>实线表格边框代码</TD></TR>

<TR>

<TD>实线表格边框代码</TD><TD>实线表格边框代码</TD><TD>实线表格边框代码</TD><TD>实线表格边框代码</TD></TR><TR>

<TD>实线表格边框代码</TD><TD>实线表格边框代码</TD><TD>实线表格边框代码</TD><TD>实线表格边框代码</TD></TR><TR>

<TD>实线表格边框代码</TD><TD>实线表格边框代码</TD><TD>实线表格边框代码</TD><TD>实线表格边框代码</TD></TR><TR>

<TD>实线表格边框代码</TD><TD>实线表格边框代码</TD><TD>实线表格边框代码</TD><TD>实线表格边框代码</TD></TR>

</TBODY></TABLE>

</body>

</html>

上面那段的HTML代码,下面的可以参考上面的代码,其实主要就是定义一下td的四边框宽度(通过style定义的),设置cellSpacing=XX(设置每个单元格之间的间距)

上面那段中部分换成下面的代码就是单元格没有间隔的细实线表格:

<style>

td{BORDER-RIGHT: #777777 1px solidBORDER-TOP: #777777 0px solidBORDER-LEFT: #777777 0px solidBORDER-BOTTOM: #777777 1px solid}

</style>

</head>

<body bgcolor="black">

<TABLE cellSpacing=0 cellPadding=0 border=0 style="BORDER-RIGHT: #777777 0px solidBORDER-TOP: #777777 1px solidBORDER-LEFT: #777777 1px solidBORDER-BOTTOM: #777777 0px solid">