Таблицы вместо DIVs
Возможный дубликат:
Почему бы не использовать таблицы для разметки в HTML?
При каких условиях вы должны выбирать таблицы вместо DIVs в HTML-кодировании?
24 ответа
Вся вещь "Таблицы против Дивов" едва ли попала в цель. Это не "таблица" или "div". Речь идет об использовании семантического HTML.
Даже тег div играет лишь небольшую роль на хорошо выложенной странице. Не злоупотребляйте этим. Вам не нужно много, если вы правильно сложите html. Такие вещи, как списки, наборы полей, легенды, метки, абзацы и т. Д., Могут заменить большую часть того, для чего часто используется div или span. Div следует использовать в первую очередь, когда имеет смысл указать логическое деление, и использовать его только для дополнительной разметки, когда это абсолютно необходимо. То же самое верно для таблицы; используйте его, когда у вас есть табличные данные, но не иначе.
Тогда у вас есть более семантическая страница, и вам не нужно столько классов, определенных в вашем CSS; вместо этого вы можете настроить таргетинг на теги. Возможно, самое главное, у вас есть страница, которая будет показывать намного лучше с Google (анекдотично), чем эквивалентная таблица или страница с большим количеством страниц. Больше всего это поможет вам лучше общаться с частью вашей аудитории.
Так что, если мы вернемся назад и посмотрим на это с точки зрения таблицы против div, то я считаю, что мы на самом деле пришли к тому, что div используется слишком часто, а таблица используется недостаточно. Зачем? Потому что, когда вы действительно думаете об этом, есть много вещей, которые попадают в категорию "табличных данных", которые, как правило, упускаются из виду. Ответы и комментарии на этой самой веб-странице, например. Они состоят из нескольких записей, каждая с одинаковым набором полей. Они даже хранятся в таблице сервера sql для громкого крика. Это точное определение табличных данных. Это означает, что HTML-тег таблицы будет абсолютно хорошим семантическим выбором для размещения чего-то вроде постов здесь в Stack Overflow. Тот же принцип применим и ко многим другим вещам. Может быть, не очень хорошая идея использовать тег таблицы для настройки трехколоночной разметки, но, безусловно, очень хорошо использовать его для сеток и списков... за исключением, конечно, когда вы действительно можете использовать ol или ul (список) теги.
Когда данные, которые я представляю, действительно являются табличными.
Мне кажется смешным, что некоторые веб-дизайнеры использовали div на табличных данных на некоторых сайтах.
Еще одно использование, которое я использовал бы для этого, было бы формами, особенно пары label: textbox. Технически это можно сделать в блоках div, но гораздо проще сделать это в таблицах, и можно утверждать, что метка: пары текстовых полей на самом деле имеют табличный характер.
Раньше я делал чистый CSS, но я отказался от этого стремления в пользу гибридного подхода table / css как наиболее прагматичного подхода. По иронии судьбы, это также из-за доступности. Вы когда-нибудь пытались сделать CSS на Sidekick? Какой кошмар! Когда-нибудь видели, как CSS-сайты отображаются в новых браузерах? Элементы будут перекрываться или просто неправильно отображаться, что мне пришлось отключить CSS. Вы когда-нибудь пытались изменить размер CSS-сайтов? Они выглядят ужасно и часто вредны для слепых, если они используют функции масштабирования в браузере! Если вы делаете это с таблицами, они масштабируются намного лучше. Когда люди говорят о доступности, я обнаруживаю, что многие понятия не имеют, и это раздражает меня, потому что я инвалид, а они нет. Они действительно работали со слепыми? Глухой? Если доступность - главная проблема, почему, черт возьми, 99% видео не закрыты с субтитрами? Многие пуристы CSS используют AJAX, но не понимают, что AJAX часто делает контент недоступным.
С практической точки зрения, можно использовать одну таблицу в качестве основного макета как LONG, так как вы предоставляете информацию в логическом потоке, если ячейки сложены (то, что вы увидите на мобильных устройствах). Теория CSS звучит великолепно, но частично работает в реальной жизни со слишком большим количеством хаков, что противоречит идеалам "чистоты".
Поскольку с использованием подхода CSS с таблицами, я сэкономил так много времени на разработку веб-сайта, и обслуживание стало намного проще. Меньше хаков, более интуитивно понятный. Я получаю меньше звонков от людей, говорящих: "Я вставил DIV, и теперь он выглядит испорченным!" И что еще более важно, абсолютно никаких проблем с доступностью.
Обычно, когда вы не используете таблицу для предоставления макета.
Таблицы -> данные
Divs -> макет
(в основном)
Примечание: на момент, когда был задан вопрос, были практические причины для использования таблиц в некоторых целях макета. Это больше не нужно из-за улучшений браузера, поэтому я обновил ответ.
HTML <table> -элементы должны использоваться, когда данные логически имеют двумерную структуру. Если данные могут быть структурированы в строки и столбцы, и вы можете применять заголовки как к строкам, так и к столбцам, то у вас, вероятно, есть табличные данные.
Если у вас есть только одна строка или один столбец данных, то это не табличные данные - это просто линейный контент. Вам нужно как минимум две строки и два столбца, прежде чем они будут считаться табличными данными.
Некоторые примеры:
Использование таблиц для размещения боковых панелей и колонтитулов. Это не табличные данные, а макет страницы. Что-то вроде css grid или flexbox более уместно.
Использование таблиц для газетных столбцов. Это не табличные данные - вы все равно будете читать их линейно. Что-то вроде столбцов CSS больше подходит.
Я бы сделал различие между HTML для общедоступных веб-сайтов (таблицы "нет-нет-нет", "divs yes-yes-yes") и "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/
Я обычно выбираю таблицы для отображения информации о типе формы (Имя, Фамилия, Адрес и т. Д.), Где важны выравнивание надписей и полей в нескольких строках. DIVs я использую для макета.
Конечно, стол завернут в DIV:)
Таблицы были предназначены для табличного контента, а не для макета.
Так что никогда не расстраивайтесь, если используете их для отображения данных.
Я использую таблицы в двух случаях:
1) Табличные данные
2) Каждый раз, когда я хочу, чтобы мой макет динамически изменял размер своего содержимого
Если ваши данные могут быть размещены в двумерной сетке, используйте <table>, Если нет, не надо. С помощью <table> для всего остального это взлом (хотя часто не тот, у которого есть правильные альтернативы, особенно когда речь идет о совместимости со старыми браузерами). Не использую <table> что-то, что должно быть ясно, одинаково плохо. <div> а также <span> не для всего; фактически, будучи совершенно бессмысленными на семантическом уровне, их следует избегать любой ценой в пользу более семантических альтернатив.
Таблицы используются для табличных данных. Если имеет смысл поместить это в электронную таблицу, тогда используйте таблицу. В противном случае есть лучший тег для использования, например, div, span, ul и т. Д.
1) Для отображения табличных данных. Календарь - это один из примеров табличных данных, которые поначалу не всегда очевидны.
2) Я работаю в медицинской компании, занимающейся выставлением счетов, и почти вся верстка для нашей внутренней работы выполняется с использованием CSS. Тем не менее, время от времени мы получаем бумажные формы от страховых компаний, которые должны использовать наши составители счетов, и программа преобразует их в формат HTML, который они могут заполнять и распечатывать через интранет. Чтобы убедиться, что формы приняты, они должны очень точно соответствовать оригинальной бумажной версии. Для них просто вернуться к таблицам.
Если вы хотите иметь семантически корректный HTML, то вам следует использовать таблицы только для табличных данных.
В противном случае вы используете таблицы для всего, что вы хотите, но, вероятно, есть способ сделать то же самое, используя divс и CSS.
Я считаю, просто табличные содержания. Например, если вы распечатали таблицу базы данных или данные, похожие на электронную таблицу, в HTML.
@Marius:
Является ли макет табличными данными? Нет, хотя несколько лет назад это было стандартным, сейчас его нет:-)
Еще одно использование, которое я использовал бы для этого, было бы формами, особенно пары label: textbox. Технически это можно сделать в блоках div, но гораздо проще сделать это в таблицах, и можно утверждать, что метка: пары текстовых полей на самом деле имеют табличный характер.
Я склонен придавать метке фиксированную ширину или отображать ее в строке выше.
@Jon Limjap
Для метки: текстовое поле ни div, ни таблицы не подходят: <dl>с
Ясно, что DIV используются для разметки, но мне случалось, что меня "заставили" использовать электронные таблицы для создания разметки сетки внутри структуры div по следующим причинам:
добавление процентных значений не позволило правильно выровнять их с div, в то время как те же значения, которые были указаны в ячейках таблиц, дали ожидаемый результат.
Поэтому я думаю, что таблицы по-прежнему полезны не только для данных, но и для описанной выше ситуации. Кроме того, таблицы по-прежнему являются браузерами, совместимыми с W3C, и альтернативные браузеры (например, для отключенных) правильно интерпретируют их.
Еще одно использование, которое я использовал бы для этого, было бы формами, особенно пары label: textbox. Технически это можно сделать в блоках div, но гораздо проще сделать это в таблицах, и можно утверждать, что метка: пары текстовых полей на самом деле имеют табличный характер.
Я вижу, что изрядное количество, особенно среди разработчиков MS. И я сделал это изрядное количество в прошлом. Это работает, но игнорирует некоторые факторы доступности и передовой практики. Вы должны использовать метки, входные данные, наборы полей, легенды и CSS для макета ваших форм. Зачем? Потому что это то, для чего они нужны, это более эффективно, и я думаю, что доступность важна. Но это только мое личное предпочтение. Я думаю, что каждый должен попробовать это таким образом, прежде чем осудить это. Это быстро, легко и чисто.
Когда какой-либо браузер загружает страницу, содержащую таблицы, браузеру требуется больше времени для правильного отображения тега. Где, как будто div используется, браузер занимает меньше времени, поскольку он легче. И более того, мы можем применить CSS, чтобы div'ы отображались в виде таблицы,
Столы, как правило, тяжелые, а div легкие.
Дивы просты divisionsони не предназначены для группирования разделов страницы, которые в семантическом смысле связаны между собой. Они не имеют никакого неявного значения, кроме этого.
Изначально таблицы предназначались для отображения научных данных, таких как результаты лабораторных исследований, на экране. Дейв Раггетт, конечно же, не собирался использовать их для реализации макета.
Я нахожу, что это достаточно ясно в вашем уме, если вы помните вышеизложенное, если это то, что вы обычно ожидаете прочитать в таблице, то это подходящий тег, если это чистый макет, тогда используйте что-то другое для выполнения ваших потребностей.