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

最新推荐文章于 2021-06-22 22:32:37 发布

lichengyezi

最新推荐文章于 2021-06-22 22:32:37 发布

阅读量203

点赞数

文章标签： CSS HTML

本文链接：https://blog.csdn.net/lichengyezi/article/details/83697296

版权

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>

lichengyezi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三种细边框表格的实现方法比较

1.背景设置式－细边框表格&lt;html&gt;&lt;head&gt; &lt;title&gt;背景设置式－细边框表格&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;table width="200" border="0" cellpadding="2" cellspaci
复制链接

扫一扫