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。

Answer 2

你有什么理由要转换它吗？

我不会转换此信息。它看起来像适合表格的数据。

如果您的内容最好按列和行进行组织，则可能应该在表格中显示。

在屏幕上看到时，它看起来像格式化。但是，有一次，您的页面上确实有这些标题：

    <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的回复。

将表转换为css

2 个答案: