БлогNot. Таблица без тега table

Таблица без тега table

Когда-то дизайн сайтов делали на таблицах.

Сегодня распространена противоположная крайность - даже для отображения табличных данных используют div'ы, но не тег <table>.

Что ж, так сделать можно, вот типичный изврат, таблица без тега <table>:

таблица без тега table - что вы выиграли?
таблица без тега table - что вы выиграли?

Её код:

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Заголовок окна</title>
 </head>
 <body>

<style>
div {
  margin: 5px;
  padding: 5px;
  border: 1px dotted white;
}
.table {
  display: table;
  padding: 0;
  background-color: #CCCCCC;
  border-color: #333333;
  border-spacing: 5px;
  text-align: center;
}
.row {
  display: table-row;
  background-color: #EEEEEE;
  border-color: #111111;
}
.cell {
  background-color: #DDDDDD;
  border-color: #666666;
  display: table-cell;
}
</style>
<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">500</div>
        <div class="cell">6</div>
        <div class="cell">00:08:05</div>
      </div>
      <div class="row">
        <div class="cell">Нск</div>
        <div class="cell">300</div>
        <div class="cell">4</div>
        <div class="cell">00:06:05</div>
      </div>
    </div>
   
 </body>
</html>

Что удивительно, меня порой щеночки упрекают, что у меня тут подписи к картинкам делаются "вручную", а не через <figcaption>, да ещё и <main> не показан... что фигкэпшэны и мэйны в новом стандарте стали результатом именно моей и многих коллег моего поколения деятельности, им невдомёк :)


теги: css html вебдезигн личное маразм

17.06.2019, 18:37; рейтинг: 180