1像素表格(1px表格)的5种制作方法
来源：互联网 发布：fast迅捷网络 编辑：程序博客网 时间：2024/04/30 14:59
在转载CSS觉问题及解决办法时看到的这样定义表格边框的方法，如果用表格的border="1"属性定义，实际显示的宽度要比1px粗。所以我直到现在都是定义table的left和top边框，然后定义td的right和bottom边框，这样也用css定义了一个表格的边框。没想到还有这么简单的方法，今天单独摘出来奉献给大家，希望能给您带来帮助。
<!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=gb2312" />
<title>定义表格边框的方法</title>
<style>
table{ border-collapse:collapse; }
td{ border:#ccc solid 1px; padding:5px; }
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>今天学了个新方法，奉献给大家</td>
<td>以前都是定义table的上边和左边，然后定义td的右边和下边</td>
<td>没想到还有这么简便的方法，以后就用这个方法了</td>
</tr>
<tr>
<td>我的网络家园</td>
<td>www.htmchina.cn</td>
<td>欢迎大家来访问</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
<html>
--------------------------------------------------------------------------------------------------------------------------
<style type="text/css">
#table table {
border-collapse:collapse;
border-right:#ff0000 1px solid;
border-bottom:#ff0000 1px solid;
border-color: #ff0000;
}
#table td {
border-left:#ff0000 1px solid;
border-top:#ff0000 1px solid;
}
</style>
<body style="margin:0">
<br>
方法1：利用亮边框和暗边框[推荐]
<table width="100%" height="100" border="1" bordercolorlight="red" bordercolordark="white" cellpadding="0" cellspacing="0">
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
</table>
方法2：利用collapse[推荐]
<table width="100%" height="100" border="1" bordercolor="blue" cellspacing="0" style="border-collapse:collapse">
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
</table>
方法3：(表格嵌套)
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ff0000">
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr bgcolor="#ffffff">
<td>极细表格边框</td>
<td>极细表格边框</td>
<td>极细表格边框</td>
</tr><tr bgcolor="#ffffff">
<td>极细表格边框</td>
<td>极细表格边框</td>
<td>极细表格边框</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
方法4：(用css实现)
<div id="table">
<table width="100%" border="0" >
<tr>
<td>极细表格边框</td>
<td>极细表格边框</td>
<td>极细表格边框</td>
</tr>
<tr>
<td>极细表格边框</td>
<td>极细表格边框</td>
<td>极细表格边框</td>
</tr>
</table>
</div>
方法5：利用单元格的间距
<table width="100%" height="100" border="0" bgcolor="red" cellpadding="0" cellspacing="1">
<tr>
<td bgcolor="white">www.blueidea.com</td>
<td bgcolor="white">www.blueidea.com</td>
</tr>
<tr>
<td bgcolor="white">www.blueidea.com</td>
<td bgcolor="white">www.blueidea.com</td>
</tr>
</table>
</body>
</html>
- 1像素表格(1px表格)的5种制作方法
- 制作1px像素的表格
- 一个像素表格边框的制作方法
- table 1px border 表格1像素边框
- 1px边框表格
- 1像素边框表格
- 1像素表格
- 制作1像素表格
- 1像素表格
- 制作1px边框表格的几种方法
- 设置表格1px边框线的两种方式
- 制作1像素边框表格的几种方法
- 制作1px表格边框
- Table表格1px样式
- 如何打印1px表格
- 最简单的border为1px的表格源代码
- CSS设置1px漂亮表格边框?
- CSS绘制1px边框表格
- 如何应对生活中的临时突发事件？
- gevent sqlalchemy async access mysql
- 程序语言的自我意识与仿他意识
- 6种让你在忙碌中寻找安逸的方法
- datalist
- 1像素表格(1px表格)的5种制作方法
- 30岁白领如何减轻工作压力？
- 网页常见木马代码
- 排序大集锦（二）：N叉堆排序及优先级队列
- Android Launcher 会onCreate 两次的原因
- 转：linux下socket编程常用头文件
- sothink swf decompiler反编译的常见错误
- bypass ujvc
- JQuery+Ajax无刷新分页
