简单谈下一像素表格的实现。简写文章,以后详加阐述。。。。。
基础铺垫:
① table元素的部分属性(针对于本话题):
<table width="100%" border="0" cellspacing="0" cellpadding="0" bordercolor="#000000" bgcolor="#ffffff" bordercolordark="" bordercolorlight="" ></table>
border 表格内单元格边框的宽度 [STF]
cellspacing 单元格与单元格之间的 间距 [STF]
cellpadding 单元格的内边距 [STF]
width 表格的宽度 [STF]
bordercolor、bgcolor [TF]
但如大家熟知,给border定义为border="1",表现缺不符预期,是比一像素粗的边框。
综上这些在元素内用属性定义表现的方式,已被xhtml或目前业界所逐渐不推荐——弃用。真正的表现性的东西,应该由css来完成。
但目前可行的,相对科学的、实惠的实现方式究竟如何呢?
② table方面css部分属性(针对于本话题):
table{border-collapse:collapse;border-spacing:0;}
td{padding:0;} 相当于cellpadding
border-collapse 定义相邻单元格边框是否合并
border-spacing 定义单元格与单元格之间的 间距 相当于cellspacing(除ie6/7外浏览器识别,ie6/7用expression弥补,见下,管它性能不性能的呢,谁让他用破ie呢)
感觉涉及到的、要说的话题越扯越说,先不说了,直接上方案(从上到下推荐度逐渐降低):
附html代码,可以用不同浏览器,及IE的各个版本去测试,及其各种兼容模式,全部没问题。① css法(table元素上的一些标签属性不用写)
table{border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');}
td{border:1px solid #f00;}
② 表格背景和单元格背景色差配合法(table元素上的一些标签属性不用写)
table{ background:#000;border-collapse:separate;border-spacing:1px;jerry:expression(cellSpacing='1');}
td{background:#fff;}
③ css边框拼补法(table元素上的一些标签属性不用写)
table{border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');border-right:1px solid #000;border-bottom:1px solid #000;}
td{border-left:1px solid #000;border-top:1px solid #000;}
④ css和标签属性结合法
table{border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');}
<table border="1" bordercolor="#330066"></table>
⑤ 标签法(原理同②)
<table border="0" cellspacing="1" cellpadding="0" bgcolor="#000" >
<tr bgcolor="#FFFFFF"><td></td><td></td><td></td></tr>
<tr bgcolor="#FFFFFF"><td></td><td></td><td></td></tr>
</table>
或
<table border="0" cellspacing="1" cellpadding="0" bgcolor="#000" >
<tr><td bgcolor="#FFFFFF"></td><td bgcolor="#FFFFFF"></td><td bgcolor="#FFFFFF"></td></tr>
<tr><td bgcolor="#FFFFFF"></td><td bgcolor="#FFFFFF"></td><td bgcolor="#FFFFFF"></td></tr>
</table>
注:DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.
另:经测试对于单元格边距,单元格间距,单元格边框这三项,如果在元素标签的属性 和 css中的属性 同时定义的情况下:
(此结果在各浏览器下和各ie版本下以及各ie版本的各种兼容模式下都适合)
css中的优先级比标签属性的高的是:单元格边距、单元格间距 这两项。也就是说比如以下这种情况下,
table{border-spacing:0;jerry:expression(cellSpacing='0');}
table td{padding:0;}
<table cellpadding="20" cellspacing="20"></table>
实际表现以css定义为准。
css的定义与标签属性的定义累加(如果有相邻合并,则只累加不相邻的单元格边框)的是:单元格边框宽度。也就是说比如以下这种情况下,
table td{border:3px solid #000;}
<table border="5"></table>
则实际表现结果的单元格边框宽度为8px。注意如果有相邻合并定义,则只累加不相邻的单元格边框。
<!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"> *{margin:0;padding:0;} body{margin:100px;} .table{ <span style="white-space:pre"> </span>border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0'); <span style="white-space:pre"> </span>table-layout:fixed;word-break:break-all;word-wrap:break-word;overflow-wrap:break-word;white-space:normal; } .t1{} .t1 td{border:1px solid #000;} .t2{border-collapse:separate;border-spacing:1px;jerry:expression(cellSpacing='1');background:#000;} .t2 td{background:#fff;} .t3{border-right:1px solid #000;border-bottom:1px solid #000;} .t3 td{border-left:1px solid #000;border-top:1px solid #000;} .t4{border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');} </style> </head> <body> <table class="table t1"> <tr> <td>无标题文档</td> <td>无标题文档;</td> <td>无标题文档;</td> </tr> <tr> <td>无标题文档</td> <td>无标题文档</td> <td>无标题文档</td> </tr> </table><p> </p> <table class="table t2"> <tr> <td>无标题文档</td> <td>无标题文档;</td> <td>无标题文档;</td> </tr> <tr> <td>无标题文档</td> <td>无标题文档</td> <td>无标题文档</td> </tr> </table><p> </p> <table class="table t3"> <tr> <td>无标题文档</td> <td>无标题文档;</td> <td>无标题文档;</td> </tr> <tr> <td>无标题文档</td> <td>无标题文档</td> <td>无标题文档</td> </tr> </table><p> </p> <table class="table t4" border="1" bordercolor="#000000"> <tr> <td>无标题文档</td> <td>无标题文档;</td> <td>无标题文档;</td> </tr> <tr> <td>无标题文档</td> <td>无标题文档</td> <td>无标题文档</td> </tr> </table><p> </p> <table border="0" cellspacing="1" cellpadding="0" bgcolor="#000"> <tr bgcolor="#ffffff"> <td>无标题文档</td> <td>无标题文档;</td> <td>无标题文档;</td> </tr> <tr bgcolor="#ffffff"> <td>无标题文档</td> <td>无标题文档</td> <td>无标题文档</td> </tr> </table><p> </p> <table border="0" cellspacing="1" cellpadding="0" bgcolor="#000"> <tr> <td bgcolor="#ffffff">无标题文档</td> <td bgcolor="#ffffff">无标题文档;</td> <td bgcolor="#ffffff">无标题文档;</td> </tr> <tr> <td bgcolor="#ffffff">无标题文档</td> <td bgcolor="#ffffff">无标题文档</td> <td bgcolor="#ffffff">无标题文档</td> </tr> </table> </body> </html>