利用 HTML Table 及其 th td 的背景顏色差異偽裝成 HTML Table 的 border

效果如下：

一四七	二五八	三六九
One	Two	Three
Four	Five	Six
Seven	Eight	Nine

這裡 HTML Table 及其 cell 的背景色偽裝 border 預設 2px。想要該 border 變 1px 就給 table 用 CSS border-spacing:1px。效果如下：

一四七	二五八	三六九
One	Two	Three
Four	Five	Six
Seven	Eight	Nine

原理：table 的背景色同時也是 border 的背景色。td 的背景色與 table 的背景色不同（根據個人需要選擇是否指定 th 的背景色），這樣 td 的背景色就會把 table 的背景色擋掉，然後各個 td 的 cell 之間的空隙就會有 table 的背景色透過來看起來就像是各個 cell 之間的 border。那它其實不是 border 是 table 的背景顏色。

關鍵就是寫 CSS 給 table 和 th/td 指定不一樣的背景顏色：

td {background:#004080}
table {background:black}

（我沒有在 CSS 裡寫 th，如果你有需要就「th, td」把 th 也寫上）

Try it yourself：
把這些 HTML 原始碼拿去複製另存 .htm 檔案在瀏覽器裡測試：
（如果想要預設 2px 的 table cell 間距，就刪除紅字 border-spacing:1px）

<?xml version="1.0" encoding="big5">

<style>
td {background:#004080}
table {background:black;border-spacing:1px}
</style>

<table style=color:white>
<tr><th>　一四七　<th>　二五八　<th>　三六九　</tr>
<tr><td>　One　<td>　Two　<td>　Three　</tr>
<tr><td>　Four　<td>　Five　<td>　Six　</tr>
<tr><td>　Seven　<td>　Eight　<td>　Nine　</tr>
</table>

順便說一下：使用 CSS 把 HTML Table 及其 cell 的 border 都變成 1px 所用的那個 CSS

th, td {border:1px solid #aaa}
table {border-collapse:collapse}

用本文介紹的方法寫就是

th, td {background:white}
table {background:#aaa;border-spacing:1px}

並且網頁的顯示效果在我的 Firefox 3.6 裡一模一樣。但是用本文介紹的方法來達成 table 全 border 1px 並非正統做法。