轉換表到CSS - 優文庫

我非常新的CSS，我希望這個錶轉換成CSS：轉換表到CSS

<table dir="ltr" width="500" border="0" align="center"> 
    <caption><font face="Helvetica">Movies</font></caption> 
    <colgroup width="50%" /> 
    <colgroup id="colgroup" class="colgroup" align="center" 
      valign="middle" title="title" width="1*" 
      span="2" style="background:#ddd;" /> 
    <thead> 
     <tr> 
      <!--th scope="col">Artwork</th> 
      <th scope="col">Title</th> 
      <th scope="col">Genre</th> 
      <th scope="col">Format</th> 
      <th scope="col">Year</th --> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td align="center"><font face="Georgia"><img src="http://3.bp.blogspot.com/-AGAaic1-yrM/TcWmj77lHzI/AAAAAAAAAkQ/K6zzSk1WgUY/s1600/thor-movie-poster-1.jpg" alt="Thor" width="175" height="200"/><br/>THOR<br/>Action<br/>DVD<br/>2011</td> 
      <td align="center"><font face="Georgia"><img src="http://www.galacool.com/wp-content/uploads/2010/02/hangover2.jpg" alt="Hangover" width="175" height="200"/><br/>Hangover<br/>Comedy<br/>DVD<br/>2009</td> 
      <td align="center"><font face="Georgia"><img src="http://4.bp.blogspot.com/_E5cSkRNNzuk/TBxZ20kWzTI/AAAAAAAAJAk/Xo6O12VdYgA/s1600/ToyStory3aa.jpg" alt="Toy Story 3" width="175" height="200"/><br/>Toy Story 3<br/>Animation<br/>DVD<br/>2010</td> 
     </tr> 
     <tr> 
      <td align="center"><font face="Georgia"><img src="http://www.dvdactive.com/images/news/screenshot/2011/6/insidious2d.jpg" alt="Insidious" width="175" height="200"/><br/>Insidious<br/>Horror<br/>DVD<br/>2010</td> 
      <td align="center"><font face="Georgia"><img src="http://www.femalefirst.co.uk/image-library/port/376/1/127-hours-dvd.jpg" alt="127 Hours" width="175" height="200"/><br/>127 Hours<br/>Drama<br/>DVD<br/>2010</td> 
     </tr> 
    </tbody> 
</table>

是否有導遊或鏈接做到這一點？

此外，我將從MySQL導入這些圖像以及電影的標題，年份，流派等。我如何通過使用CSS來簡化我的工作？

來源

2011-10-04 exxcellent

'table' - >'div's？ ;） – Shaz

你嘗試過什麼嗎？你在哪裏堅持使用CSS？此外，對於表格來說，這看起來像一個*好用*（雖然不是一個好的表格），因爲它是*表格數據*。 – deceze

這不是真正的表格數據。這是'

'被用於佈局！ – thirtydot

回答

它看起來就像是電影的一個列表，這樣就可以通過把它變成一個無序列表開始：

<ul class="grid"> 
    <li> 
     <p class="image"><img src="..." alt="movie picture" /></p> 
     <p class="name">Movie 1</p> 
     <p class="genre">Action</p> 
     <p class="format">DVD</p> 
     <p class="year">2010</p> 
    </li> 
    <li> 
     <p class="image"><img src="..." alt="movie picture" /></p> 
     <p class="name">Movie 2</p> 
     <p class="genre">Romance</p> 
     <p class="format">DVD</p> 
     <p class="year">2011</p> 
    </li> 
</ul>

就這樣，然後你可以應用樣式列表中：

ul.grid, ul.grid > li { 
    margin: 0; 
    padding: 0; 
} 
ul.grid { 
    overflow-y: auto; 
} 
ul.grid > li { 
    width: 175px; 
    float: left; 
    list-style-type: none; 
}

查看演示（稍微更多的樣式以匹配舊的基於表格的HTML）on JSFiddle。

來源

2011-10-04 04:40:51 icktoofay

你不應該打擾包裝img在一個段落，只是讓它阻止，而不需要一個額外的類來識別它...其餘的段落可能不是你應該使用（不是很語義，他們不是真正的段落？）。 – sg3s

@ sg3s：的確如此。我正在考慮讓'img'成爲一個塊，但我認爲它可能會更像它們一樣一致。另外，你對段落是正確的。我正在考慮使用定義列表，但我認爲這可能有點冗長。 – icktoofay

@icktoofay您好，感謝您的代碼，我有一個問題..我如何確保這個網格總是隻有3列和2行？ – exxcellent

是否有你想要轉換它的原因？

我不會轉換這些信息。它看起來像適合於表格的數據。

當您的內容最好按列和行組織時，可能應該在表格中顯示。

在屏幕上看到時，它看起來像格式化。但是，在某一時刻，您的頁面上確實有這些標題：

<th scope="col">Artwork</th> 
    <th scope="col">Title</th> 
    <th scope="col">Genre</th> 
    <th scope="col">Format</th> 
    <th scope="col">Year</th>

您想達到什麼目的？

如果你正在編制一個列表，並想比較的信息，我仍然認爲一張桌子是最好的。

但是，如果您使用此功能作爲您正在出售或租用的視頻的展示廣告資源，請查看我們的@icktoofay回覆。

來源

2011-10-04 04:38:09

謝謝@thirtydot –

嘗試使用HTML。這不是表格數據。這是一個網格物品。 – icktoofay

我刪除了我以前的評論，因爲您已經爲答案添加了更多內容，現在看起來更像是一個答案，而不是評論。 – thirtydot

相關問題