Таблицы для div, пожалуйста, помогите!

oak1987

У меня есть много данных, которые необходимо проиндексировать на веб-сайте, вся информация находится в таблицах, но сложность в том, что для результатов поиска вам действительно нужно использовать элементы div, иначе вы получите, см. приложение ниже, что отсекает всю правую сторону.
Страница

который, как вы можете видеть, отображает таблицы с идеальной видимостью. Вот как выглядит код с использованием конвертера div: таблицы, преобразованные в div на сайте tableodivconverter.com, здесь представлены результаты сравнения таблиц с сгенерированными div. https://justpaste.it/denver-aa-meetings-tables

и https://justpaste.it/denver-aa-meetings-divs

Результаты настолько разные, что было бы сложно сравнить их с таблицами, или есть ли какая-то разметка, которую вы можете добавить в сам HTML, чтобы поместить оба кода, а с помощью html выбрать отображение одного из других в зависимости от того, будет ли пользователь использует настольный компьютер или мобильный телефон.

CMS использует разные шаблоны, но извлекаемые SQL-данные одни и те же. Идеи? Может лучше конвертер? Некоторые из онлайн-конвертеров допускают пару строк и «требуют» от вас обратной ссылки на них, поэтому я не буду идти по этому пути.

Ищу предложения, пожалуйста.

kiselevnkt

Хм... на самом деле это похоже на табличные данные; между столбцами существует семантическая связь, а строки являются записями. На таких однородных табличных данных таблица — ЭТО СЕМАНТИЧЕСКИ ПРАВИЛЬНАЯ РАЗМЫТКА ДЛЯ ИСПОЛЬЗОВАНИЯ!!!

Почему вы пытаетесь это изменить? Кто-то набил вас ложью о том, что «никогда не используйте таблицы», потому что не понимал, что означает «не использовать таблицы для макетирования»?

Что нужно сделать, так это очистить эти таблицы, чтобы они были семантически правильными, и получить из них презентацию, а НЕ тратить время, пытаясь превратить их в семантически НЕПРАВИЛЬНЫЕ теги.

 


<table class="meetings">


<caption>


<a href="[URL='https://lumtu.com/yti/Z4WW4Z3NodHRwczovL2RlbnZlcmRvbmF0ZS5jb20vZGVudmVyLWNvLWFhLW1lZXRpbmdzL2V2ZW50LzEtZGVudmVyLXN1bmRheS1hYS1tZWV0aVWZ']https://www.denverdonate.com/denver-co-aa-meetings/event/1-denver-sunday-aa-meetings[/URL]">


Denver AA Meetings


</a>


</caption>


<thead>


<tr>


<th scope="col">Day</th>


<th scope="col">Time</th>


<th scope="col">Group Name</th>


<th scope="col">Address</th>


<th scope="col">City</th>


<th scope="col">District</th>


<th scope="col">Codes</th>


</tr>


</thead>


<tbody>


<tr>


<td>Sunday</td>


<td>06:30 AM</td>


<th scope="row">Keeping It Simple</th>


<td>3600 S. Clarkson (NE of Ch)</td>


<td>Englewood</td>


<td>11</td>


<td>*n</td>


</tr><tr>


<td>Sunday</td>


<td>06:30 AM</td>


<th scope="row">Sunrise Serenity</th>


<td>3355 S. Wadsworth #H125, 989-2816</td>


<td>Lakewood</td>


<td>30</td>


<td>*n</td>


</tr><tr>


<td>Sunday</td>


<td>06:45 AM</td>


<th scope="row">Upon Awakening</th>


<td>8817 S. Broadway (Ch)</td>


<td>Highlands Ranch</td>


<td>11</td>


<td>*n</td>


</tr>


<!-- etc, etc... -->


</tbody>


</table>

Код (разметка): ВСЕ остальные действия относятся к внешней таблице стилей.

С точки зрения отображения на маленьком экране, да, таблицы — это головная боль, но, поскольку вы можете ориентироваться на мобильные устройства с помощью медиа-запросов, лучшим вариантом будет заставить эти TD использовать поведение гибкого блока, чтобы вы могли разбить эту одну строку таблицы на несколько строк.

имя и адрес группы являются очевидными объектами изменения поведения.

Flex-wrap и nth-child спешат на помощь.

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

kostik155

Для общих целей использования используйте DIV. Для таблиц используйте ТАБЛИЦЫ! Не существует ни одной веской причины использовать DIV, если у вас явно есть табличная структура.

Эта индексация — что угодно — чушь.

Если это не очевидно, используйте TABLE только для таблиц... Что касается второго поста, вертикальные полосы предназначены для представления, поместите их в CSS, а не в разметку.

Вы неправильно используете атрибут имени.

Вы неправильно используете элемент привязки.

Этот полный URI указывает на то, что с архитектурой вашего веб-сайта тоже что-то не так. Хотя при чем тут ваш костыль? Кусок разметки сам по себе ничего не объясняет, тем более, что не имеет никакого смысла.

Вячеслав Бабкин1

 <a name="desktopmeetinglist">Desktop meetings list</a> | <a href="[URL='https://lumtu.com/yti/ckGGkc3RodHRwczovL2RlbnZlcmRvbmF0ZS5jb20vZGVudmVyLWNvLWFhLW1lZXRpbmdzL2V2ZW50LzEtZGVudmVyLXN1bmRheS1hYS1tZWV0aW5ncyNtb2JpbGVtZWV0aW5nb5Wa']https://www.denverdonate.com/denver-co-aa-meetings/event/1-denver-sunday-aa-meetings#mobilemeetinglist[/URL]">Mobile meeting list</a><br />


{module Denver Sunday AA Meetings}






<a name="mobilemeetinglist">Mobile meeting list</a> | <a href="[URL='https://lumtu.com/yti/cpxxpc3RodHRwczovL2RlbnZlcmRvbmF0ZS5jb20vZGVudmVyLWNvLWFhLW1lZXRpbmdzL2V2ZW50LzEtZGVudmVyLXN1bmRheS1hYS1tZWV0aW5ncyNkZXNrdG9wbWVldGluZ2ulG']https://www.denverdonate.com/denver-co-aa-meetings/event/1-denver-sunday-aa-meetings#desktopmeetinglist[/URL]">Desktop meeting list</a><br />


{module Denver Sunday AA Meetings Mobile}

Code (markup): This is my crutch for the time being:
Desktop meetings list

| https://www.denverdonate.com/denver...1-denver-sunday-aa-meetings#mobilemeetinglist

">Mobile meeting list

{module Denver Sunday AA Meetings}
Mobile meeting list

| https://www.denverdonate.com/denver...-denver-sunday-aa-meetings#desktopmeetinglist

">Desktop meeting list

{module Denver Sunday AA Meetings Mobile}

psihoserver

Да, и поля «ключи» ниже — это, вероятно, должны быть списки определений, а НЕ таблица.

 <div class="key">


<h2>Meeting Codes</h2>


<dl>


<dt>O</dt><dd>Open</dd>


<dt>C</dt><dd>Closed</dd>


<dt>SP</dt><dd>Speaker</dd>


<dt>ST</dt><dd>Step</dd>


<dt>BB</dt><dd>Big Book</dd>


<dt>GV</dt><dd>Grapevine</dd>


<dt>T</dt><dd>Traditions</dd>


<dt>CA</dt><dd>Candlelight</dd>


<dt>Spn</dt><dd>Spanish</dd>


<dt>B</dt><dd>Beginners</dd>


<dt>M</dt><dd>Men</dd>


<dt>W</dt><dd>Women</dd>


<dt>G</dt><dd>Gay</dd>


<dt>Y</dt><dd>Young People</dd>


<dt>Frn</dt><dd>French</dd>


<dt>Pol</dt><dd>Polish</dd>


<dt>s</dt><dd>Smoking</dd>


<dt>ASL</dt><dd>Sign Language Interpreter</dd>


<dt>*</dt><dd>Wheelchair</dd>


<dt>n</dt><dd>Non-Smoking</dd>


<dt>Sit</dt><dd>Sitter</dd>


</dl>


<!-- .key --></div>

Код (разметка): вам нужны знаки равенства, добавьте их в сгенерированный контент.

DE_Prokaznik

Я не очень разбираюсь в разметке таблиц, а вы, похоже, очень опытны. Я только что заметил, что в Joomla все CSS/divs и специфично для страниц, удобных для мобильных устройств. Будут ли таблицы, о которых вы говорите, сворачиваться для просмотра на мобильных устройствах?

Похожие темы	Дата
Где можно скачать классные картинки?	19.10.2024, 18:10
Как соединить несколько картинок в одну?	19.10.2024, 18:10
В каких программах делается дизайн для сайта?	19.10.2024, 18:10
Как изменить шаблон и сделать более светлый фон?	19.10.2024, 18:10
Помогите с кодом для мобильного	19.10.2024, 18:10
Тема/плагин для партнерского сайта по ставкам на спорт?	19.10.2024, 18:10
Внезапно в некоторых браузерах изображение видео больше не отображается.	19.10.2024, 18:10
WordPress потерял доверие дизайнеров веб-сайтов	19.10.2024, 18:10
Проблема CSS с формой	19.10.2024, 18:10
Есть идеи, как сохранить этот текст статическим	19.10.2024, 18:10

Таблицы для div, пожалуйста, помогите!

oak1987

kiselevnkt

kostik155

Вячеслав Бабкин1

psihoserver

DE_Prokaznik

I AM

Интересно