Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Как по правилам html5 сверстать такую "таблицу".

Автор: VovikDimchenko 26.2.2012, 12:06

http://www.freeimagehosting.net/dgycn
Нужно список продуктов отобразить таким образом. Как-то это делается через div-ы, но в html5 вроде не рекомендуется.
Спасибо.

Автор: ksnk 26.2.2012, 12:36

Ух ты.... png больше метра 1187 x 1216 smile

Надо срочно осваивать jpeg и уменьшение изображений.

border-image будет в будущем универсалььным решением, а пока можно побалловатся с бякграундом table, и table td

Код


<!doctype html>
<body>
<style>
table { 
    background: blue;
    padding :10px;
    border-collapse: separate;
    border-spacing: 0px 10px;
}
table td {
    border:2px solid lightgray;
    background: yellow;
}
</style>

<table>
<tr><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td></tr><tr><td>111</td><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td><td>111</td></tr>
</table>
</body>

doctype- самая важная часть в этом файле smile

Автор: VovikDimchenko 26.2.2012, 13:02

Вариант с table мне хорошо известен. Но вроде как он самый не красивый. С div у меня так сверстать не получилось. Но вроде как в html5 можно сделать и получше чем с использованием div. Хотя интересно было бы посмотреть как это сделать с использованием div’ов тоже.

Добавлено через 2 минуты и 7 секунд
Меня интересует не цвет, цвет я привёл чтобы понятно было где какой блок. Меня интересует именно расположение в виде таблицы.

Автор: 0Scrum 26.2.2012, 13:12

Можно примерно так, можно через flexbox, или через inline-block, или float. Все зависит от поставленной задачи.

Код


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
  .table {
      display: table;
  }
  .row {
      display: table-row;
  }
  .cell {
      display: table-cell;
  }

  /*]]>*/
  </style>
 </head>
 <body>
      <div class="table">
            <div class="row">
                  <div class="cell"></div>
                  <div class="cell"></div>
                  <div class="cell"></div>
                  <div class="cell"></div>
            </div>
            <div class="row">
                  <div class="cell"></div>
                  <div class="cell"></div>
                  <div class="cell"></div>
                  <div class="cell"></div>
            </div>
      </div>
 </body>
</html>

Автор: ksnk 26.2.2012, 13:18

Цитата(VovikDimchenko @ 26.2.2012, 13:02

)

Но вроде как он самый не красивый.

Верстать дивами табличные данные - вот это и будет на самом деле некрасивое решение smile

Автор: Logo 26.2.2012, 13:27

Тег table в HTML для того и создан, что бы отображать табличные данные. "Не красиво" изменять смыл HTML используя для верстки _макета_ таблицы, а для верстки таблиц - дивы.
ksnk прав)

Автор: 0Scrum 26.2.2012, 13:27

Цитата(ksnk @ 26.2.2012, 13:18)

Верстать дивами табличные данные - вот это и будет на самом деле некрасивое решение smile

Подтедрживаю, таблицы преднозначены для предоставления данных.

Автор: Logo 26.2.2012, 13:34

ADD: Красивая, семантическая верстка - это когда у тебя таблицы заданы с помощью тега <table>, аббревиатуры - тега <abbr>, программный код - <code>, переменные в коде - <var>, шапка сайта (HTML5) - <header>, футер сайта (HTML5) - <footer>, и так далее.

Добавлено через 6 минут и 50 секунд

Цитата

Надо срочно осваивать jpeg и уменьшение изображений.

[offtop]а пожатый png по меньше будет весить;) (на глаз)[/offtop]