Блог

Я довольно новичок в 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?

Похоже, что это список фильмов, поэтому вы можете начать с превращения его в неупорядоченный список:

 <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) на JSFiddle.

Есть ли причина, по которой вы хотите преобразовать это?

Я бы не стал преобразовывать эту информацию. Это выглядит как данные, подходящие для таблицы.

Когда у вас есть контент, который лучше всего организовать по столбцам и строкам, его, вероятно, следует представить в виде таблицы.

При просмотре на экране это выглядит как форматирование. Однако в какой-то момент у вас были эти заголовки на вашей странице:

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