CSS Display的inline-table屬性(讓DIV也能夠像Table一樣)

測試環境
JQuery版本	jquery-1.11.1.min.js(jquery-2.1.1.min.js也可使用)
測試瀏覽器	Chrome36.0,Firefox31.0

在查資料的時候突然發現原來CSS也有類似Table一樣的樣式設定方案
真是令我開心忍不住就想要來嘗試一下了
接下來就讓我們開始了解一下CSS仿Table的操作方式吧~!

首先我們先來看一下Table跟DIV標籤結構的差異

Table結構

<table>
  <tr>
    <td>學號</td>
    <td>姓名</td>
  </tr>
  <tr>
    <td>001</td>
    <td>路人甲</td>
  </tr>
</table>

接下來為Table套上簡單的CSS樣式

table{border-collapse: collapse;}
table td{border:1px solid #000;}

然後顯示出來的結果如下

學號	姓名
001	路人甲

DIV仿Table結構

<div id="C_table">
  <div class="C_tr">
    <div class="C_td">學號</div>
    <div class="C_td">姓名</div>
  </div>
  <div class="C_tr">
    <div class="C_td">001</div>
    <div class="C_td">路人甲</div>
  </div>
</div>

接下來為DIV套上CSS樣式

#C_table {
  display:table;
  border:1px solid #000;  
}
.C_tr {display: table-row;}
.C_td {
  border:1px solid #000;
  display: table-cell;
}

然後就會變成下面這種情況

學號

姓名

001

路人甲

實際操作之後，我們可以發現若是將DIV的高度增加，DIV內的內容不會像Table一樣垂直置中這樣就需要另外花時間再去設定垂直置中的樣式了。

學號

姓名

001

路人甲

接下來疑問就出現了，既然還要再另外花時間去設定樣式幹嘛不直接用Table就好?
根據香腸炒魷魚「用CSS+DIV畫表格(table)進行網頁排版」的這篇文章陳述，
我們可以了解到DIV跟Table兩者對搜尋引擎的影響

DIV本身是使用在網頁布局上面，因為可以用CSS操控區塊的定位所以很方便
Table本身是屬於顯示表格格式(也可以說是在顯示內容的啦~)，並不是用於網頁布局上

但早期因為沒有DIV跟CSS所以很多人都會拿Table做頁面布局正如同香腸炒魷魚所提到的
「對於搜尋引擎來講，他們抓網站內容通常不會一次抓完，會先抓到一定的網頁大小，之後再來，如果你把樣式調整的程式碼都放進去，很快的，搜尋引擎可能光收錄你的表格樣式，還沒抓到重點就已經達到抓取額度了，重要的資料沒被收錄，倒是收錄了一些不重要的樣式設定。」

這段話是什麼意思呢?
就是指用Table做排版布局常常會用到巢狀式的Table 而搜尋引擎在收錄網頁頁面時有一定的額度，太多的巢狀Table容易造成還沒收錄到網頁真正的內容前，
就達到搜尋引擎限定的額度，進額造成搜尋引擎只收錄了無關緊要的內容
(什麼?妳問我什麼是巢狀標籤?? 請看下面的Code了解一下)

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>巢狀Table</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

當然並不是叫大家快點把自己網站的Table都改成Div的Table
這裡只是想要強調DIV跟Table這兩個標籤，是因為不同的目的而誕生的請大家善用這兩個表籤。
另外根據網路上看到的資料DIV跟Table的加載方式也是不同的
DIV是即時加載，就是讀到哪裡加載到哪裡
Table則是要等讀完Table中的內容後才會加載

但是因為現在網路傳輸速度越來越快，說實話沒有認真去測試，我真的是無感
~~(就像每次政府加完最低薪資，我的戶頭還是一樣沒變化的那種感覺一樣)~~

也有人主張用DIV或用Table排版對SEO沒什麼差別，但是小弟我個人的淺見是認為有差的
畢竟搜尋引擎計算積分的方式我們並不能確定，相同等級的對手分出勝負總是差在這個細微的地方您說是不是!
可以確認的是搜尋引擎也是有遵照W3C的規範走的，那符合規定總是比較有保障，畢竟W3C不是GMP標章。

希望以上內容對各位有所幫助，若發現我有觀念錯的地方也歡迎指教謝謝

Pages

進擊的IT

標題

2014/09/24