在表格的設計中，當你在表格的資料越多的時候，可能有好幾十列的資料，當使用者在看的時，會看不清他要的是那一行資料，

又特別拿尺來對齊，才能明顯看後到資料，此時對於網路的使用者來說，是一件很麻煩的事。

我們就利用像excel 的分色，可讓資料更明顯清楚

2012-08-01_143536  

那網頁的表格是要如何設計呢？當然，你在<tr>裡 面設 id ，一個一個設，單數設紅，雙數設白，但是資料量大的時候，對於寫網頁的來說是一個很白痴的事

當然，也許資料量大的時候，也可以考慮用php 資料庫等東西來設計，但是這個事情交給php或javascript，就有點大才小用了！

我們先來設計一個基本的表格網頁：

 

<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>魚和橙的結合</title>

<style type="text/css">
table {
    border-collapse: collapse;
}
</style>
</head>
<body>
   <table border="1">
        <caption>
        ● 產品規格(Specifications)
        </caption>
        <tr>
          <th scope="col">編號(No.)</th>
          <th scope="col">刃徑(D)</th>
          <th scope="col">刃長(H)</th>
          <th scope="col">全長(L)</th>
          <th scope="col">柄徑(d)</th>
          <th scope="col">刃數(F)</th>
        </tr>
        <tr>
          <td>001</td>
          <td>1</td>
          <td>2.5</td>
          <td>50</td>
          <td>4</td>
          <td>2</td>
        </tr>
        <tr>
          <td>002</td>
          <td>1</td>
          <td>2.5</td>
          <td>50</td>
          <td>6</td>
          <td>2</td>
        </tr>
        <tr>
          <td>003</td>
          <td>1.5</td>
          <td>4</td>
          <td>50</td>
          <td>4</td>
          <td>2</td>
        </tr>
        <tr>
          <td>004</td>
          <td>1.5</td>
          <td>4</td>
          <td>50</td>
          <td>6</td>
          <td>2</td>
        </tr>
        <tr>
          <td>005</td>
          <td>2</td>
          <td>5</td>
          <td>50</td>
          <td>4</td>
          <td>2</td>
        </tr>
        <tr>
          <td>006</td>
          <td>2</td>
          <td>5</td>
          <td>50</td>
          <td>6</td>
          <td>2</td>
        </tr>
        <tr>
          <td>007</td>
          <td>2.5</td>
          <td>7</td>
          <td>50</td>
          <td>4</td>
          <td>2</td>
        </tr>
        <tr>
          <td>008</td>
          <td>2.5</td>
          <td>7</td>
          <td>50</td>
          <td>6</td>
          <td>2</td>
        </tr>
      </table>
</body>
</html>

 此時我們加入css，讓他有所變化： 

<style type="text/css">
table {
    border-collapse: collapse;
}
caption {
    font-size: 1.5em;
}

th {
    background-color: #999;    
}

</style>

 看看結果：

2012-08-01_150812  

改好之後，我們再加入以下的css 

<style type="text/css">
tr:nth-of-type(even) {
    background-color: #f3f3f3;
}
tr:nth-of-type(odd) {
    background-color: #ddd;
}
</style>

 再看結果唄：

2012-08-01_151129  

由上面改完之後加入了 tr:nth-of-type(even) [偶數]和 nth-of-type(odd) [奇數] ，這個是所謂的虛擬類別選擇器，也就是將在<tr>加入，設計他在偶數和奇數做設定，而橙子在此例中，亦加了灰色和淺灰色的顏色！

此時，如果你再加入表格，電腦會自動判定偶數及奇數欄，也就不用人為去定義id ，這就可省去不少麻煩！

各位可以試試喔！

 

 

arrow
arrow
    文章標籤
    網頁設計
    全站熱搜

    雲橙雨林 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄