← Register for OSDC

A Man With Great Power… →

網頁表格設計

March 3rd, 2006 | CSS, 組織活動

上一篇講到OSDC的網站設計問題。喔，附帶一提，沒報名的要動作快，剛剛看到還剩不到六十個名額。

講別人設計不好，自己當然不能光說不練。所以我弄了個議程表的範例，它們看起來像這樣：1, 2。有興趣的話，你可以用這種網址試試看自己寫的樣式表：

http://hlb.yichi.org/design/css/table/osdc/schedule.php?css=YOUR_CSS_FILE_URL

我的樣式表裡面，並沒有什麼特殊技巧，也沒有半張圖片（我有在想，三個議程表格，背景應該各放「鐵拳無敵孫中山」、「穿林北腿蔣中正」、「共殘狂人毛澤東」的……）下面大概提到幾個地方，跟大家作個分享。

內容置中的部份，就是 margin: auto 配合IE的 text-align: center。如果你不知道為什麼，可以參考這篇翻譯裡「追求卓越」的部份：


/* center DIV */
body {
text-align: center; /* IE */
}

#content {
margin: 0 auto;
text-align: left; /* IE */
width: 760px;
}

表格邊框的部份，就是裡面欄位畫左、上邊框，表格本身畫右、下邊框：


/* TABLE */
table {
border-bottom: 1px solid #999; 
border-right: 1px solid #999; /* Safari render <caption> width incorrectly */
}

th,
td {
border-left: 1px solid #999;
border-top: 1px solid #999;
}

因為同時有三個議程並行，所以就用float: left; width: 32%;，中間的表格加點邊界(margin)比較好看。因為三個表格都是浮動元件，所以後面要加上<hr class="split" />：


/* TABLE: 3 col */
.col3 { }

    .col3 table {
    float: left;
    width: 32%;
    }

    .col3 table.second {
    margin: 0 4px;
    }

.split {
clear: both;
visibility: hidden;
}

最後呢，雖然手寫字體有不容易辨識的問題，不過在這邊用起來倒是挺不錯的：


h2, caption {
font-family: 'Lucida Handwriting', cursive;
font-weight: normal;
}

如果你改出什麼有趣的作品，一定要告訴我喔！ XD

9 comments ↓

#1 b6s on 03.03.06 at 7:04 pm

大師幫我改一下吧 XD http://taipedia.info/mono-wide.css

#2 hlb on 03.03.06 at 7:24 pm

別鬧了，我有一堆事情等著做 :p 好久沒在 IRC 看到你 :p

#3 Once in a blue moon on 03.03.06 at 7:30 pm

表格排版小技實例

#4 b6s on 03.03.06 at 7:31 pm

再過五天我應該就會出現了，如果考試沒有爆炸的話 XD

#5 hlb on 03.03.06 at 8:34 pm

gtalk 上也看不到你，有事情要問你的說（羞）

#6 b6s on 03.06.06 at 7:10 am

hum? 那我今天就掛著，留言吧～

#7 Project :: penk i blog » Blog Archive » 本日書籤 on 03.19.06 at 1:47 am

[...] http://hlb.yichi.org/blog/2006/03/03/57 [...]

#8 LIN on 07.23.06 at 10:00 pm

我是個年近60的老者，買了一本css事作了些東 有了一點點基礎．最近把世界杯足球賽的網頁作了 修改，在家電腦跑都可以，但把它置放網站上速度 切慢了半拍，大師若有空也有興趣挑戰看看歡迎指 導一下， http://www.chinesefreewebs.com/lim2180/ 由此進入 http://www.chinesefreewebs.com/community/index.php 帳號：lim2180 密碼：***

#9 hlb on 07.24.06 at 8:51 am

林（？）先生您好，

謝謝您的留言。六十歲學網站設計，真是了不起。我知道國外有一位 CSS 大師級人物，叫做 Stu Nicholls，他今年也 59 歲了呢。

我的網站大家都看得到，您把帳號密碼留在這裡，是一件很危險的事情，所以我把您留言裡密碼的部份給拿掉了。

您的網站速度會慢，最主要的原因是圖片太多，總共有31張圖，圖片檔案大小加起來甚至超過150KB，光下載完圖片都要很久。另外有些圖片連結有問題，找不到圖片，所以會耗掉更長的等待時間。

我會建議您，先多花一點點時間，把 HTML 這部份的基礎打穩，這對 CSS 做網頁設計很有幫助。Jedi 最近的網頁設計投影片，是個不錯的開始。他的課程另外有講義，您也可以寄信跟他索取：

http://jedi.org/blog/archives/005444.html

不過講了半天，倒是沒提到什麼 CSS 的事情？也許我該先問的是，您想做的是怎麼樣的一個網站呢？ :-)

Leave a Comment