# [CSS]用DIV畫表格 Grid layout!

- URL: https://justfly.idv.tw/css%e7%94%a8css%e7%95%ab%e8%a1%a8%e6%a0%bc-grid-layout/
- 日期: 2009-06-07
- 分類: WEB&RIA
- 標籤: css, web

常常我們會希望在網頁中把須要做整理的資訊放在表個中呈現給使用者觀賞

但是TABLE太多對SEO有反效果也不是甚麼新聞了

於是有很多人開始研究怎麼用CSS+DIV畫出像是TABLE的效果

在這邊就有兩個不錯的解決方案:

- 工具網站:[Grid Designer 2](http://grid.mindplay.dk/)

- 進入網站就可以很視覺性的用上面四排按鈕控制,畫出想要的表格

http://farm4.static.flickr.com/3615/3603674148_30f3759d98.jpg

- 微調每一個欄位的文字樣式

http://farm4.static.flickr.com/3352/3602862079_55efa930b1.jpg

- 愉快的複製程式碼來用~

http://farm4.static.flickr.com/3354/3603674436_ea4335d523.jpg

打完收工!!

- 一行的CSS:[1 line CSS Grid Framework](http://www.vcarrer.com/2009/06/1-line-css-grid-framework.html)

這個就更加簡單明瞭了

用一行的CSS就可以搞定

```
.dp50 {width:50%;  float:left;  display: inline;  *margin-right:-1px; }
```

http://farm4.static.flickr.com/3618/3603673936_5c522c6098.jpg http://farm4.static.flickr.com/3645/3602861809_4cfb86dcff.jpg

缺點就是它只能等分(2,4,8,16…..)

不過還算是很好用的一個技巧囉

這下可以省下大把的時間跟腦細胞來拉 ^^”