用CSS+DIV画表格(table)进行网页排版(转)

作者: 来源: 更新时间:2012-12-11 11:28:50 点击:

以往传统网页设计都喜欢使用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进行校正了。