採用 web standard 開發時如何設定表格的單元格間距
阿新 • • 發佈：2019-02-20
答案是仍然使用 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 中測試效果：
"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
<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 中的效果：
<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 中測試效果：
"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<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 #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 中的效果：