从table转而使用div+css

老白 4个月前 186浏览 0评论

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

从table转而使用div+css CSS学习 第1张

从table转而使用div+css CSS学习 第2张

使用CSS构版的优点

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

从table转而使用div+css CSS学习 第3张

开始进行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,還有paddingmargin進行校正了。


发表评论