`
lichengyezi
  • 浏览: 205706 次
  • 性别: Icon_minigender_1
  • 来自: 齐齐哈尔
文章分类
社区版块
存档分类
最新评论

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

阅读更多

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>

 

分享到:
评论

相关推荐

    Dreamweaver制作细边框表格

    通过以上三个示例,我们可以看到,在Dreamweaver中创建细边框表格的方法有很多种,包括直接使用HTML的`border`属性、通过`bordercolorlight`和`bordercolordark`属性设置对比色边框,以及使用CSS样式来实现更为灵活...

    wps表格外部边框加粗内部边框不变化

    ### WPS表格外部边框加粗而内部边框不变的操作方法 #### 背景介绍 在使用WPS办公软件处理文档时,我们经常会遇到需要美化表格的情况。一个常见的需求就是希望让表格的外部边框更加突出,比如通过加粗的方式,而内部...

    CSS实现表格细边框的两种方法

    本文将详细讲解两种利用CSS实现表格细边框的方法。 首先,第一种方法是利用CSS中的`border-collapse`属性。这个属性用于设置表格中单元格边框的合并方式。当`border-collapse`设置为`collapse`时,相邻单元格的边框...

    表格的CSS代码,让你的表格边框更加细,更加的美观,代码简单,一看就明白

    本文将详细介绍如何通过简单的CSS代码来实现表格边框的细化及整体美观度的提升。 #### 二、核心知识点解析 ##### 1. CSS样式规则应用 在给定的代码片段中,我们看到了一个非常基础的HTML结构,并在其内部嵌入了一...

    用css制作极细表格

    ### 使用CSS创建极细边框的表格 #### CSS样式定义 在网页设计中,使用CSS(层叠样式表)来创建美观且具有高度定制性的表格是非常常见的做法。下面将详细介绍如何利用CSS创建一个带有极细边框的表格。 首先,我们...

    易语言源码自定义高级表格边框样式.7z

    在这个“易语言源码自定义高级表格边框样式.7z”压缩包中,我们可以看到是关于易语言如何实现自定义高级表格边框样式的源代码示例。下面,我们将深入探讨这个主题,了解如何在易语言中创建和调整表格边框样式。 ...

    html中细线表格的做法

    在第二种方法中,我们使用CSS边框样式来实现细线表格。下面是相关的代码: ```html ;"&gt; ;"&gt; ;"&gt; ;"&gt; ;"&gt; ;"&gt; ;"&gt; ;"&gt; ;"&gt; ;"&gt; ``` 在上面的代码中,我们使用了CSS边框样式来设置单元格的...

    css去掉表格内边框.pdf

    2. **细边框表格** 要创建1px边框的表格,可以设置`border`属性,但需要注意避免边框叠加造成更宽的视觉效果。例如,对于1px外边框和1px内格线的表格,可以使用以下样式: ```css table { border: 1px solid ...

    利用CSS生成精美细线Table表格

    以上就是利用CSS生成精美细线Table表格的方法,通过灵活运用CSS的各种属性和选择器,我们可以实现更多个性化的设计,让网页表格更加专业且引人入胜。不断学习和实践,你将能够掌握更多高级的CSS技巧,从而在网页设计...

    css控制表格细边框样式

    在网页设计中,CSS(Cascading Style Sheets)是一种强大的工具,用于定义和控制页面元素的外观和布局。...总之,通过灵活运用CSS,我们可以完全定制表格的细边框样式,打造符合设计需求的美观表格。

    dw改变表格边框颜色.docx

    在 DW 表格应用中,细线边框是网页中定位区分内容常用的一种方法,配合特定图片的使用,往往能够达到不错的效果。那如何制作细线边框呢?大家都知道,所谓细线边框,大体外观上就是一个简单的 1 行 1 列表格,那么...

    dw改变表格边框颜色.pdf

    DW改变表格边框颜色.pdf Dreamweaver 是一个功能强大的网页设计工具,它...这些都是 Dreamweaver 中改变表格边框颜色和制作细边线表格的方法和技巧。如果您想创建一个专业的网页,Dreamweaver 是一个非常有用的工具。

    5种做法实现table表格中的斜线表头效果

    实现斜线表头有多种方法,下面将详细介绍这五种方法的实现原理和适用场景。 1. 图片背景法 直接利用UI设计人员制作好的带有斜线的图片作为表格表头的背景图,通过CSS将背景图铺满整个表头单元格。这种方法操作简单...

    有关表格边框的css语法整理

    通过以上介绍,我们可以看出CSS提供了强大的工具来调整表格边框的外观,无论是简单的颜色更改,还是复杂的样式设计,都能轻松实现。在实际应用中,结合CSS的层叠规则和选择器,可以实现更精细的控制,为网页和应用...

    WEB标准中细线表格的实现方法

    在Web开发中,表格(Table)作为一种数据展示和组织的方式,虽然在某些现代设计趋势中逐渐减少使用,但在处理结构化数据时仍然有着不可替代的作用。细线表格是一种美观、清晰的设计风格,使得数据更容易阅读和理解。...

    给表格设置不重叠的边框(单线边框)的2种方法

    总结,这两种方法都能有效地解决表格边框重叠的问题,实现单线边框的效果。选择哪种方法取决于具体的设计需求和对边框控制的精度。在实际开发中,可以根据实际情况灵活运用,并结合其他CSS属性,如`border-radius`...

    listview实现表格效果,带表格线

    同样,可以通过设置边框背景来实现表格线。 3. **自定义Adapter**:为了将数据绑定到ListView,我们需要创建一个自定义的Adapter。这个Adapter负责将数据模型转换为ListView项。在getView()方法中,根据数据生成...

    自定义高级表格边框样式例程.e.rar

    这个“自定义高级表格边框样式例程.e.rar”文件很可能是包含了一系列示例或代码,用于演示如何在编程环境中实现这一功能。下面我们将深入探讨自定义高级表格边框样式的相关知识点。 1. **边框样式**:Excel提供了...

    Dreamweaver中不用CSS样式为表格添加细线边框的方法

    在网页设计中,表格是一种常见的布局工具,用于展示数据或组织内容。在Dreamweaver中,我们可以...随着对CSS的学习和掌握,你可以进一步优化表格的样式,如调整边框样式、颜色、宽度等,以实现更复杂的布局和视觉效果。

Global site tag (gtag.js) - Google Analytics