Использование Div для отображения табличных данных

Question

Я хочу отобразить данные, подобные следующим:

 Title     Subject    Summary    Date

Так что мой HTML выглядит так:

<div class="title"></div>
<div class="subject"></div>
<div class="summary"></div>
<div class="date"></div>

Проблема в том, что весь текст не отображается в одной строке. Я пытался добавить display="block", но это не сработало.

Что я здесь не так делаю?

Важно: В этом случае я не хочу использовать элемент table, но придерживаюсь тегов div.

Answer 1

Похоже, вы хотите отобразить таблицу, верно? Итак, используйте тег

Answer 2

Я бы использовал следующую разметку:

<table>
  <tr>
    <th>Title</th>
    <th>Subject</th>
    <th>Summary</th>
    <th>Date</th>
  </tr>
  <!-- Data rows -->
</table>

Еще одна вещь, о которой следует помнить со всеми этими макетами на основе div и списков, даже с теми, которые задают фиксированную ширину, заключается в том, что если у вас есть немного текста, который шире ширины (скажем, URL), макет сломается. Хорошая вещь о таблицах для табличных данных состоит в том, что у них фактически есть понятие столбца, чего нет ни у одной другой html-конструкции.

Даже если на этом сайте есть некоторые вещи, такие как главная страница, которые реализованы с помощью div, я бы сказал, что табличные данные (такие как голоса, ответы, заголовок и т. Д.) ДОЛЖНЫ быть в таблице. Люди, которые используют div, обычно делают это для семантической разметки. Вы преследуете противоположное этому.

Answer 3

Я не хочу звучать покровительственно; если я это сделаю, я вас неправильно понял, и мне жаль.

Большинство людей осуждают столы, потому что люди используют их по неправильной причине. Часто люди используют огромные таблицы для позиционирования вещей на своем сайте. Это - это то, для чего нужно использовать div. Не столы!

Однако, если вы хотите отобразить табличные данные , такие как список футбольных команд, побед, поражений и ничьих, вам определенно следует использовать таблицы. Для этого почти неслыханно (хотя и не невозможно) использовать div для этого.

Просто помните, что если это для отображения данных, вы определенно можете использовать таблицу!

Answer 4

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

div.title {
    width: 150 px;
    float: left;
}

Answer 5

Есть ли причина не использовать таблицы? Если вы отображаете табличные данные, лучше всего использовать таблицы - для этого они и предназначены.

Чтобы ответить на ваш вопрос, возможно, лучше всего назначить фиксированную ширину каждому элементу и установить float: left. Вам понадобится либо фиктивный элемент в конце, который имеет clear: both, либо вы должны будете указать clear: both в первом элементе в каждой строке. Этот метод все еще не защищен от ошибок, если содержимое одной ячейки приводит к расширению div, он не изменит размер всего столбца, только этой ячейки. Возможно, вы можете избежать изменения размера, используя overflow: auto или overflow: hidden, но это не будет работать как обычные таблицы.

Answer 6

или действительно так, который буквально использует таблицы для табличных данных: https://stackoverflow.com/badges

Answer 7

Извините, но я скажу вам использовать таблицы. Потому что это табличные данные.

Возможно, вы могли бы сказать нам, почему вы не хотите использовать таблицы?

Мне кажется, и я уверен многим другим, что вы не понимаете идею "не используйте таблицы". Это не «не использовать таблицы», это «не использовать таблицы для создания макета страницы».

То, что вы здесь делаете, это выкладывает табличные данные, поэтому, конечно, они должны быть в таблице.

В случае, если вам не ясна идея «табличных данных», я определяю ее следующим образом: биты данных, значение которых не ясно из одних только данных, это нужно определить, посмотрев на заголовок.

Скажем, у вас есть расписание поездов или автобусов. Это будет огромный блок раз. Что означает конкретное время? Вы не можете определить, посмотрев на само время, но обратитесь к заголовкам строк или столбцов, и вы увидите, что это время, когда оно отходит от определенной станции.

У вас есть строки текста. Это заголовок, резюме или дата? Люди скажут это по проверке заголовков столбцов. Так что это стол.

Answer 8

Просто чтобы проиллюстрировать замечания предыдущих ответов, призывающих вас использовать таблицу вместо div для tabular data:

Галерея CSS-таблиц - отличный способ отобразить красивые таблицы во многих различных визуальных стилях.

Answer 9

Дисплей

: блок гарантирует, что элементы не появятся в одной строке. Плавание для макета - это злоупотребление, точно так же, как таблицы для макета - это злоупотребление (но в настоящее время необходимо злоупотребление) Единственный способ гарантировать, что все они появляются в одной строке, - это использовать табличный тег. Это или отображать: встроенный, и использовать только & NBSP; (Неразрывный пробел) между вашими элементами и словами вместо обычного пробела. & Nbsp; поможет вам предотвратить перенос слов.

Но да, если нет законной причины избегать таблиц, используйте таблицы для табличных данных. Вот для чего они.

Answer 10

В эпоху фреймворков CSS я действительно не вижу смысла полностью отходить от тега таблицы. Хотя теперь можно делать display: table-* для любого элемента, который вам нравится, но таблица по-прежнему является предпочтительным тегом для форматирования данных в табличной форме (не забывая, что это более семантически правильно). Просто выберите один из популярных CSS-фреймворков, чтобы табличные данные выглядели хорошо, вместо того чтобы взламывать представление тегов <div>, чтобы достичь того, для чего они не предназначены.

---

display: block

конечно не подойдет, попробуйте

display: inline

или поместите все влево, затем расположите их соответственно

но если у вас есть табличные данные, то лучше всего разметить в <table> tag

некоторые ссылки: с точки сайта