維基百科漂亮的桌面css

-3

任何人都可以幫我用css製作一張類似於this table的桌子嗎？謝謝。維基百科漂亮的桌面css

因爲我使用的是WordPress.com的博客，我沒有訪問<head>，所以我已經採取Marty's answer並將其轉化到這一點：

<table style="border-collapse: collapse;"> 
    <tbody valign="middle"> 
     <tr style="background: #EEE;"> 
      <td style="padding: 5px; border: 1px solid #AAA;">title</td> 
      <td style="padding: 5px; border: 1px solid #AAA;">title</td> 
      <td style="padding: 5px; border: 1px solid #AAA;">title</td> 
     </tr> 
     <tr> 
      <td style="padding: 5px; border: 1px solid #AAA;">title</td> 
      <td style="padding: 5px; border: 1px solid #AAA;">title</td> 
      <td style="padding: 5px; border: 1px solid #AAA;">title</td> 
     </tr> 
     <tr> 
      <td style="padding: 5px; border: 1px solid #AAA;">title</td> 
      <td style="padding: 5px; border: 1px solid #AAA;">title</td> 
      <td style="padding: 5px; border: 1px solid #AAA;">title</td> 
     </tr> 
    </tbody> 
</table>

來源

2011-06-01 Zeynel

所以要清楚，你想要一個模仿這個圖像的CSS樣式？ http://science1.files.wordpress.com/2008/12/density1.jpg?w=311&h=123 – jcolebrand 2011-06-01 04:51:34

是的，謝謝。我會更新這個問題。 – Zeynel 2011-06-01 04:53:17

http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/你看過這個網頁嗎？： – jcolebrand 2011-06-01 04:54:16

CSS：

table.mytable 
{ 
    border-collapse: collapse; 
} 

table.mytable td 
{ 
    padding: 5px; 
    border: 1px solid #AAA; 
} 

tr.head 
{ 
    background: #EEE; 
}

HTML：

<table class="mytable"> 
    <tbody valign="middle"> 
     <tr class="head"> 
      <td>title</td> 
      <td>title</td> 
      <td>title</td> 
     </tr> 
     <tr> 
      <td>content</td> 
      <td>content</td> 
      <td>content</td> 
     </tr> 
     <tr> 
      <td>content</td> 
      <td>content</td> 
      <td>content</td> 
     </tr> 
    </tbody> 
</table>

我認爲這裏的關鍵因素是border-collapse。

來源

2011-06-01 04:59:06 Marty

這將是至少一個關鍵因素。我認爲OP真的需要了解更多關於表格樣式的知識，而不是關於「如何匹配這一個圖表」的內容;） – jcolebrand 2011-06-01 05:15:03

@jcolebrand Shrug。 – Marty 2011-06-01 05:20:44

@MartyWallace我知道，這就是爲什麼我給你+1;） – jcolebrand 2011-06-01 05:21:51

維基百科漂亮的桌面css

回答

相關問題