您的位置：首页 > Web前端 > HTML

采用 web standard 开发时如何设定表格的单元格间距

2005-02-28 13:22 465 查看
答案是仍然使用 HTML 中 table 的 cellspacing 属性。如下：

<table cellspacing="0">

    ...

</table>

除此之外理论上在 CSS2 中，可以设定下列两个样式的组合来达到效果。

1. border-collapse: separate; (独立边框，不合并）

2. border-spacing: length || length;

这里的长度 length 如果指定一个，那么作用于上下左右间隔；如果指定两个，第一个指横向间距，第二个指纵向间距。

border-spacing 必须在 border-collapse 样式设置为 separate 的时候才起作用。

但是 border-spacing 属性的支持不好。在 IE6 里也看不到效果，而 Mozilla 可以正常显示。所以处理间距最好的方式还是使用 <table cellspacing=".."> 这种写法。

下列文档可分别加载到 Mozilla 和 IE 中测试效果：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


        "http://www.w3.org/TR/html4/strict.dtd">


<html>


<head>


<meta http-equiv="Content-Type" content="text/html;charset=gb2312">


<title> New Document </title>


<meta name="Generator" content="EditPlus">


<meta name="Author" content="Roger Chen">


<meta name="keywords" content="">


<meta name="description" content="">




<style type="text/css">





#board {

}{border-collapse: separate; border: 1px solid green; border-spacing: 10px 40px;}




#board td {

}{border: 1px solid black; padding: 0.5em;}


</style>


</head>


<body>


<table id="board">


    <tr>


        <td>1</td>


        <td>2</td>


    </tr>


</table>


</body>


</html>

IE 中的效果：


Mozilla 中的效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  web mozilla table html border ie
相关文章推荐
新的分享
章节导航