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

html-css030

细线表格用到的核心 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">