细线表格的几种做法(css)【经典推荐】

(一)效果一般
<style type="text/css">
<!--
table {border-collapse:collapse;}
td{
border-left:0;
border-top:0;
border-right:1px solid #00cd11;
border-bottom:1px solid #cb1122;
font-family:"Courier New", Courier, mono;
font-size:11px;
height:25px;
padding:0 12px 0 12px;
border-collapse:collapse;
}
.tdblue{
font-weight:bold;
color:#3C00C6;
}
-->
</style>
---------------------------------------

<table cellspacing="0" cellpadding="0">
<tr>
    <td class="tdblue">Select My Menu</td>
</tr>
<tr>
    <td>Who am I?</td>
</tr>
<tr>
    <td>细线表格</td>
</tr>
<tr>
    <td>Contact me</td>
</tr>
</table>
---------------------------------------

(二)推荐√√
<head>
<style>
table{
border-collapse:collapse;
border: 1px solid #000000;
}
td{
border-collapse:collapse;
border: 1px solid #000000;
}
</style>
</head>
<table>
<tr><td>123</td><td>132ssss</td></tr>
<tr><td>123</td><td>132sss</td></tr>
<tr><td>123</td><td>132</td></tr>
</table>
---------------------------------------
(三)推荐√
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test4</title>
<style type="text/css">
table{border:1px solid #000;border-width:1px 0 0 1px;margin:2px 0 2px 0;text-align:center;border-collapse:collapse;}
td,th{border:1px solid #000;border-width:0 1px 1px 0;margin:2px 0 2px 0;text-align:left;}
th{text-align:center;font-weight:600;font-size:12px;background-color:#F4F4F4;}
</style>
</head>
<body>
<table width="236">
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>
</body>
</html>
---------------------------------------
(四)效果较好
定义CSS文件:
.thin{background:#000000}
.thin td{background:#FFFFFF;text-align:center}
TABLE设为:
<table border="0" cellspacing="1" cellpadding="0" class="thin">
---------------------------------------
附录:用css设计细线表格并给表头再加个框
   (用CSS为<legnd>定义一个边框)
不错[还可参考教程中的另一些做法,下次补充]
<table width="200"" cellspacing="0" cellpadding="0">
<tr>
<td>
<fieldset style="width: 200; color: #B7B7B7; border-style: groove" align="center">
<legend style="color: blue; border: 1 solid #000000"> 表中表效果Ⅰ</legend>
<br>
</fieldset>
</td>
</tr>
</table>

 

border-collapse:collapse :

table中css控制 css的border-collapse

<table width="100%" cellspacing="0" cellpadding="5" border="1" bordercolor="#0099CC" style="border-collapse: collapse;">

seperate 的边框如下:

|| ||
|| ||

collapse 的边框如下:

| | (两个相邻单元格的相邻边合并了)

 

 

 

说明

该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框

separate 缺省值。边框分开,不合并。

collapse 边框合并。即如果相邻,则共用同一个边框。

虽然在DIV+CSS 时代 table 的权重越来越低,但是有时候,还是局部地方table 还是挺好用的

特别是制表方面,还是table 比较的方便。

当然,制表肯定少不了边框,但是如果你直接在td上加边框,就会出现一种情况,table 的外围一周是单线,里面都是双线。

 

你也可以通过其他分开设置的方法实现全部单线,但是这儿有一个最最简单的方法,CSS 里提供了 border-collapse 属性可以控制相连边框的合并还是分离

 

这样就好多了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值