Question

I am pretty new to CSS and I wish to convert this table into 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>

Is there any guides or links to do this?

Additionally, I will be importing these images from MySQL as well as the movie’s title, year, genre, etc. How do I make this simpler for me by using CSS?

Answer 1

It looks like that’s a list of movies, so you could start by turning it into an unordered list:

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

With that, you could then apply a style on the list:

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;
}

See a demo (with slightly more styles to match your old table-based HTML) on JSFiddle.