在表格的設計中，當你在表格的資料越多的時候，可能有好幾十列的資料，當使用者在看的時，會看不清他要的是那一行資料，又特別拿尺來對齊，才能明顯看後到資料，此時對於網路的使用者來說，是一件很麻煩的事。
我們就利用像excel 的分色，可讓資料更明顯清楚
那網頁的表格是要如何設計呢？當然，你在<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>
看看結果：
改好之後，我們再加入以下的css
<style type="text/css"> tr:nth-of-type(even) { background-color: #f3f3f3; } tr:nth-of-type(odd) { background-color: #ddd; } </style>
再看結果唄：
由上面改完之後加入了 tr:nth-of-type(even) [偶數]和 nth-of-type(odd) [奇數] ，這個是所謂的虛擬類別選擇器，也就是將在<tr>加入，設計他在偶數和奇數做設定，而橙子在此例中，亦加了灰色和淺灰色的顏色！
此時，如果你再加入表格，電腦會自動判定偶數及奇數欄，也就不用人為去定義id ，這就可省去不少麻煩！
各位可以試試喔！
沒有留言:
張貼留言