以往传统网页设计都喜欢使用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 <table> 2 <tr> 3 <td>1</td> 4 <td>2</td> 5 <td>3</td> 6 </tr> 7 <tr> 8 <td>1</td> 9 <td>2</td> 10 <td>3</td> 11 </tr> 12 </table>
使用CSS构版的优点
既然表格不推荐，那我们可以考虑改用CSS+DIV來构版。CSS+DIV构版的好处就是将网页样式设定和主要內容分离，透過style.css档案來控制样式，而且可以很方便的改，只要网站架构不变，可以对你开心设计好几个版本的样式表，哪天心情好，换一下style.css的档案，网页就整個大不同。这也就是为什么那一些BSP部落格(例如无名、痞客邦)，会有这么多不同的套版，他們网页架构都相同，就只是CSS档案的不同，透過CSS的变换，可以营造出不一样的效果。
1 <div id="css_table"> 2 <div class="css_tr"> 3 <div class="css_td">1</div> 4 <div class="css_td">2</div> 5 <div class="css_td">3</div> 6 </div> 7 <div class="css_tr"> 8 <div class="css_td">4</div> 9 <div class="css_td">5</div> 10 <div class="css_td">6</div> 11 </div> 12 </div>
开始进行CSS+DIV画表格
咱们以前面的table作为案例，用css+div进行排版：
1 <div id="css_table"> 2 <div class="css_tr"> 3 <div class="css_td">標題</div> 4 <div class="css_td">回應</div> 5 <div class="css_td">日期</div> 6 </div> 7 <div class="css_tr"> 8 <div class="css_td">如何停用WordPress內建搜尋功能？</div> 9 <div class="css_td">5</div> 10 <div class="css_td">2011-10-30</div> 11 </div> 12 </div>
接着套上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：对应<table>标签，以表格方式显示。
- table-row：对应<tr>标签。
- table-row-group：对应<tbody>标签。
- table-cell：对应<td>标签。
- table-caption：对应<caption>标签。
- table-column：对应<col>标签。
- table-column-group：对应<colgroup>标签。
- table-header-group：对应<theader>标签。
- table-footer-group：对应<tfooter>标签。
IE7以下不兼容
沒错，这样的CSS属性很巧的，只有在IE8以上才有支援，如果是IE7以下的浏览器，必须做CSS的相容性校正了，这是小可惜的地方。但目前浏览器的使用量，IE7的比例也逐渐下降，因为大多XP使用者如果要升级浏览器，都会直接升级IE8。如果要校正，那就要善用几个属性：display:block、float:left，还有padding和margin进行校正了。