最近在翻一些古早實作書籍,看到幾個別開生面的 HTML 屬性:BorderColorLight, BorderColorDark,使用 Chrome、FireFox 等支援 HTML5 的瀏覧器來開時會是這樣:
當時只覺得為什麼都是黑白線條,現在該是回來解謎的時候!😉
圖片中的上半部使用到 BorderColorLight, BorderColorDark 屬性,經查才知道是 IE 限定,之後在 IE 裡開啟效果如下:
效果還蠻好看的,原來表格也可以上色彩。
IE 真的好,用 CSS 才驚覺這 BorderColorLight 和 BorderColorDark 是神馬黑技術!
拆解 BorderColorLight 和 BorderColorDark
Linuxtopia 的圖片真的太到位,連光源都送你了,Light 是指被太陽照到的地方,圖片以淺藍色表示;Dark 則是太陽照不到的地方,圖片以深藍色表示。
理解意思後,就要找 CSS 有沒有可以解的解方。
答案是有的,只是和 IE 相比在 CSS 上並不容易呈現,必須以上下左右獨立設置,回頭看看 IE,簡單明瞭!
原 IE 程式碼:
<table border="2" cellspacing="2" cellpadding="2"
width="99%" bordercolordark="#99cc66" bordercolorlight="#ffcccc">
<caption>Eden IE Table Test</caption>
<tr>
<td>IE Column 1</td>
<td>IE Column 2</td>
<td>IE Column 3</td>
</tr>
</table>
改 CSS 程式碼:
在修改前還要說明下,cellspacing 和 cellpadding 這兩個 HTML 屬性又是 IE 限定,這下又多了一道關卡:
|
圖片來源:維基百科 |
簡單的說就是填上一堆空白或留白,好在 CSS 這裡相對容易理解,就是多了一道標籤手工活。
<style>
.cssIETable
{
border-top: 2px solid #ffcccc;
border-left: 2px solid #ffcccc;
border-right: 2px solid #99cc66;
border-bottom: 2px solid #99cc66;
border-collapse: separate; /*cellspacing */
border-spacing: 2px;
}
.cssIETable TD {
padding: 2; /*cellpadding*/
}
</style>
<body>
<table class="cssIETable" border="2"
width="99%">
<caption>Eden CSS Table Test</caption>
<tr>
<td>CSS Column 1</td>
<td>CSS Column 2</td>
<td>CSS Column 3</td>
</tr>
</table>
</body>
嗯,那復古風味感終於又回來了!😎
See also