table元素
如果你已經(jīng)看過我的代碼，就會發(fā)現(xiàn)我的日歷是用table做的。不錯，因為
日歷中顯示的是表列數(shù)據(jù)，所以這樣說來用table布局是合理的。而用table定位制作整個網(wǎng)站是不合適的，但我們完全可以有針對性的將table用在
列表數(shù)據(jù)當中。像日歷，程序表，圖表，時間表我們都可以用table制作。此外試想一下，如果沒有引用CSS，那些用CSS控制的浮動對象和絕對定位的對
象會把頁面變得一團糟。事實上，在我處于用CSS布局狂熱的狀態(tài)下，曾經(jīng)試著不用table制作日歷。相信我，這到最后會非常的頭疼，因為你要考慮到所有
不同的瀏覽器的兼容性并進行調(diào)試。這純粹是浪費時間，還好我走過來了;-)
Molly Holzschlag 寫了一篇很好的文章 “語義的意義”("The Meaning of Semantics")
設(shè)計日歷
每個人都有自己習慣的設(shè)計步驟，我則先用Photoshop設(shè)計頁面。在確定了顏色樣式以后，用CSSEdit和BBEdit編輯代碼。在這個日歷當中只用一個gif圖片，XTHML和CSS代碼如下：
#calendar {
width: 141px;
padding: 0;
margin: 0;
border-left: 1px solid #A2ADBC;
font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #616B76;
text-align: center;
background-color: #fff;
} |
我們用ID選擇器給日歷命名，并且制定必要的屬性比如width,padding,...等等。如果整頁只有一個talbe的話，也可以寫在table標簽中。
td {
border-right: 1px solid #A2ADBC;
border-bottom: 1px solid #A2ADBC;
width: 20px;
height: 20px;
text-align: center;
background: url(images/bg_calendar.gif) no-repeat right bottom;
} |
我們還要對表格的單元格td標簽進行定義。我給table定義了一個左邊框，給每個td定義了一個右邊框和下邊框。當然除了這么定義以外肯定還有其他的方法.
td a:link, td a:visited {
color: #608194;
background: url(images/bg_calendar.gif) no-repeat;
}
td a:hover, td a:active {
color: #6aa3ae;
background: url(images/bg_calendar.gif) no-repeat right top;
} |
日歷中只有一個圖片，在CSS中定義背景的圖片的三種不同位置來3個不同背景,用了幾個樣式定義了日歷月份導航以及當前日期.
*查看CSS
*查看日歷
添加更多有親和力的代碼
有些tables中的元素能夠幫助用屏幕閱讀機的讀者更容易的閱讀,比如在代碼中添加屬性摘要.想了解更多表格親和力的文章首選 Roger Johansson 的 "深入表格(Bring on the tables)"
在
我的日歷中添加了一些為屏幕閱讀機閱讀所必須的縮寫屬性(abbr),來解釋周日的"S",周一的"M",周二的"T"等等.但我搞不懂,縮寫屬性
(abbr)是對內(nèi)容的縮略寫法,而我用在日歷中卻恰恰相反(譯者注:作者用abbr="Sunday"屬性解釋了"S"的意思).所以我想知道我這么做
是否正確.如果你知道正確的寫法請告訴我,謝謝;-)