⽤CSS_DIV画表格（table）进⾏⽹页排版【转】
以往传统⽹页设计都喜欢使⽤table(表格)來建构⽹页，這樣的建构⽅式对于⽹页整体排版來讲并沒有太⼤的问题，可以完美相容于各个浏览器。但是時代在进步，还在⽤table排⽹页感觉就有点过时了。会这样说并不是想引起table和div之战，⽽是想要说对于⽹页的维护，table表格是⽐较⿇烦⼀点的，再加上程式码不太⼲净、过多的巢状，对于搜索引擎来讲，也⽐较难发现其中重要的部分。
那如果⽤CSS+DIV进⾏⽹页排版，就会⽐较好吗？基本上是可以这样讲，但是⼤家⼜会遇到⽹页校正的问题，⼀⼝⽓要调整四、五种版本的浏览器，这样很可能让⽹页设计者⼜跑回去⽤table表格排版。但其实在CSS中，已经有语法是⽀援表格的了，并不是对表格进⾏样简单的样式定义，⽽是透过CSS的表格属性，完美画出表格，排除浏览器相容的问题，让传统的table排版的设计师，也可以快速转换。
本來想说使⽤table來产⽣清单排版，免除浏览器校正问题，但碍于搜索引擎对表格式的⽹页不好解析其內容，所以还是使⽤DIV排版，并默默的校正⼀堆浏览器。
但是这回因为⽹页化，因此所有的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>css表格样式
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对应的属性：
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进⾏校正了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。