三种细框子表格的实现方法比较 _Web前端

三种细边框表格的实现方法比较

1.背景设置式－细边框表格

<html>
<head>
  <title>背景设置式－细边框表格</title>
</head>
<body>
  <table width="200" border="0" cellpadding="2" cellspacing="1" bgcolor="#000000">
    <tr>
      <th bgcolor="#FFFFEE" colspan="2">背景设置式－细边框表格</th>
    </tr>
    <tr>
      <td bgcolor="#FFFFEE">text</td>
      <td bgcolor="#FFFFEE">text</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFEE">text</td>
      <td bgcolor="#FFFFEE">text</td>
    </tr>
  </table>
</body>
</html>

2.边框设置式－细边框表格

<html>
<head>
  <title>边框设置式－细边框表格</title>
</head>
<body>
  <table width="200" border="1" cellpadding="2" cellspacing="0" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#FFFFEE">
    <tr>
      <th colspan="2">边框设置式－细边框表格</th>
    </tr>
    <tr>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <td>text</td>
      <td>text</td>
    </tr>
  </table>
</body>
</html>

3.CSS 层叠式－细边框表格

<html>
<head>
  <title>CSS 层叠式－细边框表格</title>
<style type="text/css">
<!--
.T_Sample {}{
  border-collapse: collapse;
  border: none;
  background: #FFFFEE;
}
.T_Sample th {}{
  border: solid 1px #000000;
}
.T_Sample td {}{
  border: solid 1px #000000;
}
-->
</style>
</head>
<body>
  <table width="200" border="1" cellpadding="2" cellspacing="0" class="T_Sample">
    <tr>
      <th colspan="2">CSS 层叠式－细边框表格</th>
    </tr>
    <tr>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <td>text</td>
      <td>text</td>
    </tr>
  </table>
</body>
</html>