一般来讲，table打好语法就可以呈现效果了，而且语法很简单，就单纯的table、tr、td，这三个语法就可以画出表格，在各个浏览器下也都可以正常的显示。如果觉得排版不漂亮，就直接在语法内加上width、color等等的属性值，效果很容易就达到了，可是这样会让程式码杂乱。对于搜寻引擎来讲，他们抓网站内容通常不会一次抓完，会先抓到一定的网页大小，之后再来，如果你把样式调整的程式码都放进去，很快的，搜寻引擎可能光收录你的表格样式，还没抓到重点就已经达到抓取额度了，重要的资料没被收录，倒是收录了一些不重要的样式设定。
使用CSS构版的优点
既然表格不推荐，那我们可以考虑改用CSS+DIV来构版。CSS+DIV构版的好处就是将网页样式设定和主要内容分离，透过style.css档案来控制样式，而且可以很方便的改，只要网站架构不变，可以随你开心设计好几个版本的样式表，哪天心情好，换一下style.css的档案，网页就整个大不同。这也就是为什麽那一些BSP部落格(例如无名、痞客邦)，会有这麽多不同的套版，他们网页架构都相同，就只是CSS档案的不同，透过CSS的变换，可以营造出不一样的效果。
开始进行CSS+DIV画表格
为了让大家方便在DIV和table之间的转换，所以在CSS的命名上主要就是使用「css_」作为开头，方便做一个对照。首先，以前面的范例table范例语法：
<table> <tr> <td>標題</td> <td>回應</td> <td>日期</td> <tr> <tr> <td>如何停用WordPress內建搜尋功能？</td> <td>5</td> <td>2011-10-30</td> <tr> </table>
接著，我们将以上语法改成CSS+DIV的切板模式，如同前面所说，为了方便对照，所以CSS的定名开头採用「css_」。
<div id="css_table"> <div class="css_tr"> <div class="css_td">標題</div> <div class="css_td">回應</div> <div class="css_td">日期</div> </div> <div class="css_tr"> <div class="css_td">如何停用WordPress內建搜尋功能？</div> <div class="css_td">5</div> <div class="css_td">2011-10-30</div> </div> </div>
接下来，我们套上CSS的语法，效果就会出现了！
#css_table {
display:table;
}
.css_tr {
display: table-row;
}
.css_td {
display: table-cell;
}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進行校正了。