html - 将表格转换为CSS

Question

我是 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 使这对我来说更简单？

Answer 1

看起来这是一个电影列表，因此您可以先将其转换为无序列表:

<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 .