VPF::Как по правилам html5 сверстать такую "таблицу".

VovikDimchenko

Дата 26.2.2012, 12:06 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 25.2.2012

Репутация: нет
Всего: нет

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

ksnk

Дата 26.2.2012, 12:36 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Ух ты.... 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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

VovikDimchenko

Дата 26.2.2012, 13:02 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 25.2.2012

Репутация: нет
Всего: нет

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

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

0Scrum

Дата 26.2.2012, 13:12 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

Можно примерно так, можно через 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 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

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

)

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

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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Logo

Дата 26.2.2012, 13:27 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 694
Регистрация: 22.7.2008

Репутация: нет
Всего: 10

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

0Scrum

Дата 26.2.2012, 13:27 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

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

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

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

Logo

Дата 26.2.2012, 13:34 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 694
Регистрация: 22.7.2008

Репутация: нет
Всего: 10

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

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

Цитата

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

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

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »