转换表到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

转换表到CSS

回答

相关问题