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

Похоже, вы хотите отобразить таблицу, не так ли? Так что продолжайте и используйте тег <table>.

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

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

Чтобы текст отображался в одной строке, вам нужно будет использовать display = "inline"

Более того, вам действительно стоит использовать списки, чтобы добиться этого эффекта.

<ul class = "headers">
  <li>Title</li>
  <li>Subject</li>
  <li>Summary</li>
  <li>Date</li>
</ul>

Стиль будет выглядеть так:

.headers {padding: 0; маржа: 0}

.headers li {display: inline; отступ: 0 10px} / Заполнение будет контролировать пространство по бокам текста в заголовке. /

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

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

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

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

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

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

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

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

Вам нужно убедиться, что все ваши «ячейки» плавают влево или вправо (в зависимости от их внутреннего порядка), и им также нужна фиксированная ширина.

Также убедитесь, что их «строка» имеет фиксированную ширину, равную сумме ширины ячеек + поля + отступа.

Наконец, убедитесь, что на уровне div "таблица" установлена ​​фиксированная ширина, которая является суммой ширины строки + поля + отступа.

Но если вы хотите отображать табличные данные, вам действительно следует использовать таблицу, некоторые браузеры (более распространенные в предыдущем поколении) по-разному обрабатывают поплавки, отступы и поля (помните знаменитую ошибку IE 6, которая удвоила маржу?).

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

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

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

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

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

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

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

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

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

display: block

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

display: inline

или переместите все влево, затем разместите их соответствующим образом

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

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

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

Если вы создали домашнюю страницу igoogle, просто запишите их код. Я сделал систему столбцов и разделов внутри столбцов для страницы. Обратите внимание, что с помощью Google вы не можете иметь бесконечное количество столбцов, и это оскорбляет нашу чувствительность как объектных людей. Вот некоторые из моих выводов:

• Вам нужно знать ширину столбцов
• Вам нужно знать количество столбцов
• Вам нужно знать ширину пространства, в котором находятся колонны.
• Вам нужно убедиться, что пробелы не переполняются

Я сделал календарь с тегами DIV, потому что невозможно заставить XSL проверить без жесткого кодирования максимальное количество недель в месяце, что очень оскорбительно.

CSS-свойство float - это то, что вам нужно, если вы хотите расположить div горизонтально.

Вот хороший учебник по поплавкам: http://css.maxdesign.com.au/floatutorial/

Предисловие: Я немного смущен ответами, поскольку создание столбцов с использованием DIV и CSS довольно хорошо документировано, но не похоже, что ни один из ответов до сих пор охватывал то, как это обычно делается. Что вам нужно, так это четыре отдельных DIVS, каждый с большим атрибутом left:. Вы добавляете свои данные для каждого столбца в соответствующий DIV (столбец).

Вот веб-сайт, который должен вам помочь. У них есть много примеров создания столбцов с тегами CSS / DIV: http://www.dynamicdrive.com/style/layouts/

Все, что вам нужно сделать, это экстраполировать их примеры с двумя столбцами на ваши потребности в четырех столбцах.

Используя этот код:

<div class = "title">MyTitle</div><div class = "subject">MySubject</div><div class = "Summary">MySummary</div>

У вас есть 2 решения (адаптируйте селекторы css к вашему случаю):

1 - Используйте встроенные блоки

div 
{
    display: inline;
}

Это приведет к размещению блоков на одной линии, но лишит вас возможности контролировать их размеры.

2 - Используйте поплавок

div 
{
    width: 15%; /* size of each column : adapt */
    float: left; /* this make the block float at the left of the next one */
}

div.last_element /* last_element must be a class of the last div of your line */
{
   clear: right; /* prevent your the next line to jump on the previous one */
}

Свойство float очень полезно для позиционирования CSS: http://www.w3schools.com/css/pr_class_float.asp

Причина, по которой страница вопросов при переполнении стека может использовать DIV, заключается в том, что счетчик голосов / ответов имеет фиксированную ширину.

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

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

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

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

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

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

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

Вы должны использовать промежутки с:

display:inline-block

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

Теперь, чтобы успокоить противников - конечно, табличные данные должны быть в таблице. Но он очень конкретно НЕ ХОЧЕТ стол. Вышесказанное является ответом на ЕГО ВОПРОС !!!

Табличные данные также могут быть представлены в виде вложенных списков, то есть списков списков:

<ul>
    <li>
        heading 1
        <ul>
            <li>row 1 data</li>
            <li>row 2 data</li>
        <ul>
    </li>
    <li>
        heading 2
        <ul>
            <li>row 1 data</li>
            <li>row 2 data</li>
        <ul>
    </li>
</ul>

Который вы можете разметить как таблицу, а также семантически правильный (ish).

Первый display:block должен быть display:inline-block, хотя вы, возможно, уже догадались. Во-вторых, вы также можете использовать display:table, display:table-cell, display:table-row и другие свойства. Хотя это не так хорошо, как использование table.