三种细线表格CSS代码

最新推荐文章于 2024-06-21 09:13:54 发布
最新推荐文章于 2024-06-21 09:13:54 发布
阅读量3.4k 收藏
点赞数
分类专栏： 前端 文章标签： css border table xhtml html class

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>细线表格</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>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</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>
  边框设置式－细边框__表格2
  <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>
 边框设置式－细边框__表格3
<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>

booth.chen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css创意ul+li实现的细线表格实现代码
10-30
此外，它也可能需要更多的CSS代码来实现表格的效果。 应用场景 这种方法非常适合用于各种网页设计中，例如博客、论坛、商城等。它可以用于实现各种表格的效果，而不需要使用传统的table标签。 css创意ul+li实现...
利用CSS生成精美细线Table表格无需复杂style代码
09-25
传统的HTML表格往往需要大量的内联样式或者复杂的内嵌CSS代码来实现理想的效果，这不仅使得代码难以维护，还降低了页面的可读性。然而，通过使用外部CSS文件，我们可以将样式与结构分离，简化代码，提高代码的可重用...
css 细线表格 css制作table细线表格常用属性
12-13
Css制作table细线表格 1、介绍了一个不常用属性：border-collapse:collapse; 2、使用了一个属性缩写技巧：border:style color;border-width:上 右 下 左; <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Ty
用CSS制作细线表格
weixin_33815613的博客
03-29 210
用HTML做表格简直太轻松了，看一遍例题就会了，做细线表格也不难，用DW顶多修改几个值就可以了，但是总是用鼠标点来点去，不免会想：有满意用一行代码就解决这个问题呢？于是问老师，答案是肯定有的，就是用CSS可以完成这个作业那CSS是什么呢？CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。我...
CSS：表格的细线边框
最新发布
听海边涛声
06-21 167
CSS：表格的细线边框
使用CSS制作细线表格
weixin_30646315的博客
10-23 87
table { padding:0;margin:0 auto; border-collapse:collapse; border-width:1px 0 0 1px; border:1px solid #ccc; } table td{ border:1px solid #ccc; text-align:center; border-width:0 1px ...
表格的css,细线表格
huozhicheng的专栏
04-02 1888
<br />表格的css,细线表格<br />table{ width:80%; margin:0px auto; font:Georgia 11px; font-size:12px; color:#333333; text-align:center; border-collapse:collapse;/*细线表格代码*/ } table td{ border:1px solid #999;/*细线表格线条颜色*/ heig
细线表格制作技巧－表格边框样式设置集锦（转）
wenhongling的博客
01-12 292
< font>下面的细线表格是设置bordercolordark来实现的，因为默认的border其实宽度是2，即使设置为1也没用，bordercolorlight和bordercolordark一起作为表格的边框。所以设置其中一个为背景色，表格边框看起来就会细一些。 &nbsp; &nbsp; &nbsp; &nbsp; ...
CSS制作符合网站标准的细线表格
12-10
本教程将详细介绍如何使用CSS来创建符合Web标准的细线表格，使表格既美观又符合现代网页设计的要求。 首先，我们需要了解CSS中的几个关键属性来实现细线表格的效果。`border`属性用于设置元素的边框，`border-width...
细线表格
lichuhui
07-01 121
转自：http://www.chunzhen.org.cn/2008/07/thin-table.html   在HTML中，我们设置border=”1″ 时，表格边框实际大小是2px，那如果我们要做成1px的细线表格要怎么办？以前在做1px的表格的时候，我会用表格背景颜色，然后再用另一种颜色设计单元格的背景，再把表格间距设置成1px，这样就能达到我们的1px表格了，如下例：   &lt;...
Css制作table细线表格
weixin_30387423的博客
03-07 134
制作细线表格，我想应该是最基本的css知识了，记录下来巩固下。 推荐： table{ border-collapse:collapse; border: 1px solid #000000; } td{ border-collapse:collapse; border: 1px solid #000000; } ...
利用CSS生成精美细线Table表格
03-19
NULL 博文链接：https://javapub.iteye.com/blog/733910
前端基础-CSS细线表格
逍遥云恋
03-30 645
细线表格 语法：border-collapse:collapse; 示意图 注意：一定要加在table标签上，且表格和单元格都加边框属性
CSS制作table细线表格
happy100583的专栏
09-14 242
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv=&q
常用细线表格的CSS实现
孙钰佳的博客
05-24 3016
    没什么技术含量的东西，今天在老紫竹的群里有人提到这个东西，我想整理出来会方便大家。尤其是不常做web开发的人。我知道的方法一共就4种，如果有朋友发现第5种一定要告诉我，追加进去分享快乐。    注意：后两种方法在空td中必须利用 来进行补白。当然可以多种方法混合使用。  
CSS—细线表格
aksoft的专栏
08-26 141
[code="html"] [/code] [code="html"] table{ border-collapse: collapse;/* 边框合并属性 */ width:200px; } th{ border: 1px solid #666666; } td{ border: 1px solid #666666; } [/code] http://ww...
css细线表格
梦想与激情同在
10-08 113
[code="java"] table{ border-collapse:collapse; } td{ border:1px solid #f00; } [/code]
css设置细线表格
珍惜所有的一切
07-08 1453
css代码： table{ border-collapse:collapse; } td{ background:#ffc; border:solid 1px #f90; height:22px; } --> html代码：
css设置细线表格颜色多种
05-04
可以使用CSS的border属性来设置细线表格的颜色，其中包括border-color属性和border-style属性。border-color属性可以设置边框的颜色，可以使用多个颜色值来设置不同边框的颜色。border-style属性可以设置边框的样式，可以使用多个样式值来设置不同边框的样式。 以下是一个使用CSS设置细线表格颜色多种的示例代码： ```css table { border-collapse: collapse; } td { border: 1px solid black; } tr:nth-child(even) { background-color: #f2f2f2; } tr:hover { background-color: #ddd; } td:nth-child(even) { border-left-color: red; border-right-color: blue; } td:nth-child(odd) { border-left-color: blue; border-right-color: red; } ``` 上述代码中，我们使用了CSS的border-collapse属性将表格的边框合并，并且使用了td元素的border属性设置了边框的宽度和样式。我们使用了tr:nth-child(even)选择器来设置表格的偶数行的背景颜色，使用了tr:hover选择器来设置鼠标悬浮时的背景颜色。我们使用了td:nth-child(even)和td:nth-child(odd)选择器来设置表格每行的奇数列和偶数列的边框颜色，这里我们使用了不同的颜色值来设置左右两侧的边框颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值