html div转换表格,用CSS+DIV画表格(table)进行网页排版（转）

以往传统网页设计都喜欢使用table(表格)來建构网页，這樣的建构方式对于网页整体排版來讲并沒有太大的问题，可以完美相容于各个浏览器。但是時代在进步，还在用table排网页感觉就有点过时了。会这样说并不是想引起table和div之战，而是想要说对于网页的维护，table表格是比较麻烦一点的，再加上程式码不太干净、过多的巢状，对于搜索引擎来讲，也比较难发现其中重要的部分。

那如果用CSS+DIV进行网页排版，就会比较好吗？基本上是可以这样讲，但是大家又会遇到网页校正的问题，一口气要调整四、五种版本的浏览器，这样很可能让网页设计者又跑回去用table表格排版。但其实在CSS中，已经有语法是支援表格的了，并不是对表格进行样简单的样式定义，而是透过CSS的表格属性，完美画出表格，排除浏览器相容的问题，让传统的table排版的设计师，也可以快速转换。

本來想说使用table來产生清单排版，免除浏览器校正问题，但碍于搜索引擎对表格式的网页不好解析其內容，所以还是使用DIV排版，并默默的校正一堆浏览器。

但是这回imXD5因为网页HTML5化，因此所有的CSS与DIV几乎是重构的状态，所以在本來的分类文章清单中，样式也順便进行重构，可是问题來了？「重构=花时间」，因为要用CSS+DIV模拟成table的样式，如果一直使用float來排版，校正上其实很麻烦，当然在浏览器的校正上，更是头大。后來找了一下发现有不错的好东西，在diplay的属性上，有table相关的属性值可以使用！传统的table排版的问题

一般來讲，table打好语法就可以呈现效果了，而且语法很简单，就单纯的table、tr、td，这三个语法就可以画出表格，在各个浏览器下也都可以正常的显示。如果觉得排版不漂亮，就直接在语法內加上width、color等等的属性值，效果很容易就达到了，可是这样会让程式码杂乱。对于搜寻引擎來讲，他们抓网站內容通常不会一次抓完，会先抓到一定的网页大小，之后再來，如果你把样式调整的程式码都放进去，很快的，搜寻引擎可能光收录你的表格样式，还沒抓到重点就已经达到抓取額度了，重要的资料沒被收录，倒是收录了一些不重要的样式设定。

1

1	2	3
1	2	3

使用CSS构版的优点

既然表格不推荐，那我们可以考虑改用CSS+DIV來构版。CSS+DIV构版的好处就是将网页样式设定和主要內容分离，透過style.css档案來控制样式，而且可以很方便的改，只要网站架构不变，可以对你开心设计好几个版本的样式表，哪天心情好，换一下style.css的档案，网页就整個大不同。这也就是为什么那一些BSP部落格(例如无名、痞客邦)，会有这么多不同的套版，他們网页架构都相同，就只是CSS档案的不同，透過CSS的变换，可以营造出不一样的效果。

1

2

3

1

4

2

5

3

6

7

8

4

9

5

10

6

11

12

开始进行CSS+DIV画表格

咱们以前面的table作为案例，用css+div进行排版：

1

2

3

標題

4

回應

5

日期

6

7

8

如何停用WordPress內建搜尋功能？

9

5

10

2011-10-30

11

12

接着套上css的语法：

1 #css_table {2 display:table;3 }4 .css_tr {5 display: table-row;6 }7 .css_td {8 display: table-cell;9 }CSS语法与table比对

事实上，从上面的语法來看，要用table改成css的方式并不困难，所有的样式定义需要全部透過CSS的id或是class全部独立出來，其他部分写起來是差不多的。上面的语法，并沒有对CSS画出的表格做顏色、边线、宽度作定义，可能看起來丑丑的，这部分就请大家自己摸索了。这篇文章主要是要告诉大家，利用CSS也是可以达到table的效果。下面列出一些display对应table的属性：inline-table：显示成前后没有换行的表格table：对应

沒错，这样的CSS属性很巧的，只有在IE8以上才有支援，如果是IE7以下的浏览器，必须做CSS的相容性校正了，这是小可惜的地方。但目前浏览器的使用量，IE7的比例也逐渐下降，因为大多XP使用者如果要升级浏览器，都会直接升级IE8。如果要校正，那就要善用几个属性：display:block、float:left，还有padding和margin进行校正了。