Таблицы вместо DIV
https://stackoverflow.com/questions/30251
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Возможный дубликат:
Почему бы не использовать таблицы для разметки в HTML?
При каких условиях следует выбирать таблицы вместо DIV в кодировании HTML?
Решение
Вся эта штука «Таблицы против Divs» едва не попадает в цель.Это не «таблица» или «div».Речь идет об использовании семантического HTML.
Даже тег div играет лишь небольшую роль на хорошо продуманной странице.Не злоупотребляйте этим.Вам не понадобится так много, если вы правильно соберете свой HTML.Такие вещи, как списки, наборы полей, легенды, метки, абзацы и т. д., могут заменить большую часть того, для чего часто используются элементы div или span.Div следует использовать в первую очередь, когда имеет смысл указать логическое значение. divи используется для дополнительной компоновки только в случае крайней необходимости.То же самое верно и для таблицы;используйте его, когда у вас есть табличные данные, но не иначе.
Тогда у вас будет более семантическая страница, и вам не понадобится столько классов, определенных в вашем CSS;вместо этого вы можете настроить таргетинг на теги напрямую.Возможно, самое главное, у вас есть страница, которая будет иметь гораздо лучший рейтинг в Google (как ни странно), чем эквивалентная таблица или страница с большим количеством элементов div.Прежде всего, это поможет вам лучше связаться с частью вашей аудитории.
Итак, если мы вернемся и посмотрим на это с точки зрения table и div, то, по моему мнению, мы фактически подошли к моменту, когда div используется чрезмерно, а table используется недостаточно.Почему?Потому что, если серьезно задуматься, существует множество вещей, попадающих в категорию «табличных данных», которые обычно упускают из виду.Ответы и комментарии на этой самой странице, например.Они состоят из нескольких записей, каждая из которых имеет одинаковый набор полей.Они даже хранятся в таблице сервера sql, чтобы громко кричать.Это точное определение табличных данных.Это означает, что тег таблицы html будет абсолютно хорошим семантическим выбором для макета чего-то вроде сообщений здесь, в Stack Overflow.Тот же принцип применим и ко многим другим вещам.Возможно, использование тега таблицы для настройки трехколоночного макета — не лучшая идея, но его, безусловно, вполне можно использовать для сеток и списков...за исключением, конечно, случаев, когда вы действительно можете использовать теги ol или ul (список).
Другие советы
Когда данные, которые я представляю, действительно табличные.
Мне кажется смешным, что некоторые веб-дизайнеры использовали элементы div для табличных данных на некоторых сайтах.
Еще одно применение, которое я бы мог использовать, — это формы, в частности label :пары текстовых полей.Технически это можно сделать в блоках div, но гораздо проще сделать это в таблицах, и можно утверждать, что пары метка:текстовое поле на самом деле имеют табличную природу.
Раньше я использовал чистый CSS, но отказался от этого стремления в пользу гибридного подхода таблицы/CSS как наиболее прагматичного подхода.По иронии судьбы, это также из-за доступности.Вы когда-нибудь пробовали использовать CSS на Sidekick?Какой кошмар!Вы когда-нибудь видели, как веб-сайты на основе CSS отображаются в новых браузерах?Элементы перекрывались или просто отображались неправильно, поэтому мне пришлось отключить CSS.Вы когда-нибудь пробовали изменить размер веб-сайтов на основе CSS?Они выглядят ужасно и зачастую вредно для слепых, если используют функции масштабирования в браузере!Если вы сделаете то же самое с таблицами, они масштабируются намного лучше.Когда люди говорят о доступности, я обнаруживаю, что многие понятия не имеют, и это меня раздражает, потому что я инвалид, а они нет.Неужели они действительно работали со слепыми?Глухие?Если доступность является главной проблемой, то почему, черт возьми, 99% видео не имеют субтитров?Многие пуристы CSS используют AJAX, но не понимают, что AJAX часто делает контент недоступным.
С прагматической точки зрения вполне нормально использовать одну таблицу в качестве основного макета, ДЛИННУЮ, поскольку вы предоставляете информацию в логическом потоке, если ячейки расположены друг над другом (что-то, что вы видите на мобильных устройствах).Теория CSS звучит великолепно, но частично работоспособен в реальной жизни со слишком большим количеством хаков, что противоречит идеалам «чистоты».
Благодаря использованию подхода CSS с таблицами я сэкономил много времени на разработке веб-сайта, и его обслуживание стало намного проще.Меньше хаков, больше интуитивности.Я получаю меньше звонков от людей, говорящих: «Я вставил Div, и теперь все выглядит все испорченным!» И еще более важно, абсолютно никаких проблем с доступностью.
Обычно, когда вы не используете таблицу для создания макета.
Таблицы -> данные
Разделы -> макет
(в основном)
Примечание:В то время, когда был задан вопрос, существовали практические причины использовать таблицы для некоторых целей макетирования.В этом больше нет необходимости из-за улучшений браузера, поэтому я обновил ответ.
HTML <table>-элементы следует использовать, когда данные логически имеют двумерную структуру.Если данные можно структурировать по строкам и столбцам и вы можете осмысленно применять заголовки как к строкам, так и к столбцам, то, вероятно, у вас есть табличные данные.
Если у вас есть только одна строка или один столбец данных, то это не табличные данные, а просто линейное содержимое.Вам нужны как минимум две строки и два столбца, прежде чем их можно будет считать табличными данными.
Некоторые примеры:
Использование таблиц для размещения боковых панелей и верхних/нижних колонтитулов страниц.Это не табличные данные, а макет страницы.Что-то вроде CSS Grid или flexbox более подходит.
Использование таблиц для колонок газетного типа.Это не табличные данные — вы все равно читали бы их линейно.Что-то вроде столбцов CSS является более подходящим.
Я бы провел различие между HTML для общедоступных веб-сайтов (таблицы нет-нет-нет, элементы div да-да-да) и HTML для полупубличных или частных веб-приложений, где я предпочитаю таблицы даже для макета страницы.
Большинство респектабельных причин, почему «Таблицы плохи», обычно являются проблемой только для общедоступных веб-сайтов, но не являются большой проблемой для веб-приложений.Если я могу получить один и тот же макет и более единообразный вид в разных браузерах, используя TABLE, чем сложный CSS+DIV, то я обычно иду дальше и одобряю TABLE.
Как уже упоминалось во многих плакатах, для отображения табличных данных следует использовать таблицы.
Таблицы были введены в HTML 3.2 вот соответствующий абзац из спецификации об их использовании:
[таблицы] можно использовать для разметки табличного материала или для макетирования...
Согласитесь с Томасом: общее практическое правило заключается в том, что если это имеет смысл в электронной таблице, вы можете использовать таблицу.В противном случае нет.
Только не используйте таблицы в качестве макета страницы, это основная проблема, с которой они сталкиваются.
Я вижу аргумент в пользу таблиц для форм, но есть более приятная альтернатива...вам просто нужно засучить рукава и выучить CSS.
например:
<fieldset>
<legend>New Blog Post</legend>
<label for="title">Title:</label>
<input type="text" name="title" />
<label for="body">Body:</label>
<textarea name="body" rows="6" cols="40">
</textarea>
</fieldset>
Вы можете взять этот HTML-код и разместить в форме либо расположенные рядом метки, либо метки поверх текстовых полей (что проще).Наличие гибкости действительно помогает.Это также меньше HTML, чем их табличный эквивалент.
Отличные примеры форм CSS можно найти в следующих замечательных примерах:
http://jeffhowden.com/code/css/forms/
http://www.sitepoint.com/article/fancy-form-design-css/
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
Обычно я выбираю таблицы для отображения информации типа формы (имя, фамилия, адрес и т. д.), где важно расположить метки и поля в нескольких строках.DIV, которые я использую для макета.
Конечно, таблица обернута в DIV :)
Таблицы были разработаны для табличного содержимого, а не для макета.
Так что никогда не расстраивайтесь, если вы используете их для отображения данных.
Я использую таблицы в двух случаях:
1) Табличные данные
2) Каждый раз, когда я хочу, чтобы мой макет динамически изменял размер своего содержимого.
Если ваши данные можно разместить в двумерной сетке, используйте <table>.Если не может, не делайте этого.С использованием <table> все остальное — это хак (хотя часто не имеющий подходящих альтернатив, особенно когда речь идет о совместимости со старыми браузерами). Нет с использованием <table> для то, что явно должно быть таковым, одинаково плохо. <div> и <span> не для всего;на самом деле, поскольку они совершенно бессмысленны на семантическом уровне, их следует избегать любой ценой в пользу более семантических альтернатив.
На эту тему я подумал этот сайт был довольно забавным.
1) Для отображения табличных данных.Календарь — это один из примеров табличных данных, который на первый взгляд не всегда очевиден.
2) Я работаю в медицинской компании, занимающейся выставлением счетов, и почти вся верстка нашей внутренней работы выполняется с использованием CSS.Однако время от времени мы получаем от страховых компаний бумажные формы, которые приходится использовать нашим счетоводам, и программа преобразует их в формат HTML, который они могут заполнить и распечатать через интранет.Чтобы убедиться, что формы приняты, они должны очень точно соответствовать исходной бумажной версии.Для них просто вернуться к таблицам.
Таблицы используются для табличных данных.Если имеет смысл поместить это в электронную таблицу, используйте таблицу.В противном случае вы можете использовать тег получше, например div, span, ul и т. д.
Я считаю, что только табличное содержимое.Например, если вы распечатали таблицу базы данных или данные, подобные электронной таблице, в формате HTML.
Если вы хотите иметь семантически правильный HTML, вам следует использовать таблицы только для табличных данных.
В противном случае вы используете таблицы для всего, что хотите, но, вероятно, есть способ сделать то же самое, используя divs и CSS.
@Мариус:
Является ли макет табличными данными?Нет, хотя несколько лет назад это было стандартом, сейчас это не так :-)
Еще одно применение, которое я бы мог использовать, — это формы, в частности label :пары текстовых полей.Технически это можно сделать в блоках div, но гораздо проще сделать это в таблицах, и можно утверждать, что пары метка:текстовое поле на самом деле имеют табличную природу.
Я предпочитаю присваивать метке фиксированную ширину или отображать ее в строке выше.
@Джон Лимджап
Для этикетки:текстовое поле, ни элементы div, ни таблицы не подходят: <dl>это
Еще одно использование, которое я бы использовал для этого, будут формы, особенно этикетка:пары текстовых полей.Технически это может быть сделано в ящиках Div, но это намного проще сделать в таблицах, и можно утверждать, что этикетки: Пары текстовых поток на самом деле таблицы по своей природе.
Я вижу, что это изрядное количество, особенно среди разработчиков MS.И в прошлом я делал это немало.Это работает, но игнорирует некоторые факторы доступности и передового опыта.Для макетирования форм следует использовать метки, поля ввода, наборы полей, легенды и CSS.Почему?Потому что они для этого и нужны, это более эффективно, и я думаю, что доступность важна.Но это только мое личное предпочтение.Я думаю, что каждый должен сначала попробовать это, прежде чем осуждать.Это быстро, легко и чисто.
Когда страница, содержащая таблицы, загружается каким-либо браузером, браузеру требуется больше времени для правильной обработки тега.Там, где используется div, браузер занимает меньше времени, поскольку он легче.Более того, мы можем применить CSS, чтобы элементы div отображались в виде таблицы,
Таблицы обычно тяжелые, а элементы div легкие.
Понятно, что DIV используются для макета, но мне пришлось «вынудить» использовать электронные таблицы для создания макета сетки внутри структуры div по следующим причинам:
добавление процентных значений не позволило правильно совместить с div, в то время как те же значения, выраженные в ячейках таблиц, дали ожидаемый результат.
Поэтому я думаю, что таблицы по-прежнему полезны не только для данных, но и для описанной выше ситуации, кроме того, таблицы по-прежнему являются браузерами, совместимыми с W3C, и альтернативные браузеры (например, для людей с ограниченными возможностями) правильно интерпретируют свои.
Дивы — это просто divisions, они не предназначены для группировки разделов страницы, связанных в семантическом смысле.Они не несут никакого скрытого смысла, кроме этого.
Таблицы изначально предназначались для отображения научных данных, таких как результаты лабораторных исследований, на экране.Дэйв Рэггетт определенно не хотел, чтобы их использовали для реализации макета.
Я считаю, что это достаточно четко запомнится вам, если вы помните вышеизложенное: если вы обычно ожидаете прочитать это в таблице, то это подходящий тег, если это чистый макет, тогда используйте что-то еще для удовлетворения ваших потребностей.
