Почему мы не должны использовать <table> в дизайне?

41

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

Инкогнито
источник
Подробно обсуждается на SO stackoverflow.com/questions/83073/…
Габриэле Петриоли
Google использует сами таблицы, например, в AdWords. С миллионами рекламодателей, которые регистрируются и работают с динамическими данными, гораздо проще писать код по <table>сравнению с сеткой CSS. Я использую datatables.net для нескольких приложений, и вы можете увидеть список тех, кто использует этот плагин jquery на своем сайте. Многие сайты все еще используют таблицы по уважительным причинам. Я использую таблицы только при работе с большим количеством динамических данных, которые должны быть отсортированы по разбивке по столбцам и т. Д., Но не для макетов страниц, для которых предназначен CSS.
Анагио

Ответы:

71

1) Таблицы не должны использоваться для макетов страниц, потому что они:

  • Медленный рендеринг, так как браузер должен загрузить большую часть - если не всю - таблицы, чтобы правильно ее отобразить

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

  • Они могут быть кошмаром для поддержания, поскольку они могут быстро стать сложными

  • Они могут нарушить копирование текста

  • Они негативно влияют на программы чтения с экрана и могут сделать ваш контент недоступным для некоторых пользователей.

  • Они не так гибки, как использование правильной семантической разметки

  • Они никогда не предназначались для макетов страниц.

  • Создание таблиц в адаптивный макет очень сложно контролировать

2) Используйте таблицу для табличных данных. Вот для чего нужны столы.

Смотрите также: Почему люди делают таблицы с div?

Джон Конде
источник
1
Правильно, поэтому, если у меня есть раздел с контактными данными, для которого нормально иметь таблицу, но графический макет страницы в DIVs или что-то в этом роде. Я видел, как некоторые дизайнеры избегают их все вместе в областях, которые имеют табличные данные и используют DIV.
Инкогнито
18
Дизайнеры, которые вообще избегают таблиц, не знают, что делают. Они неправильно поняли, что означает «не использовать таблицы для макетов страниц».
Джон Конде
1
Глупо вообще избегать таблиц, но есть законные альтернативы таблицам для контактной информации. Список определений является хорошей альтернативой, особенно при реализации hCard: cagintranet.com/archive/…
Lèse majesté
2
@Litso: Вы должны прочитать собственные спецификации W3C, DLпрежде чем решить, для чего он хорош или не хорош.
Lèse Majesté
1
Также есть CSS-тег position: table для создания макетов на основе таблиц без помещения их в HTML. Есть несколько нишевых случаев, когда таблицы по-прежнему являются лучшим / простым вариантом для макетов. Взгляните на @ css-tricks.com/fluid-width-equal-height-columns, чтобы понять, что я имею в виду.
Эван Плейс
8

Таблицы для табличных данных, а не дизайн. Люди часто неправильно понимают мотивацию сделать страницы «без таблиц».

Неправильно использовать таблицы для создания макета. Вы должны использовать другие элементы для макета (div, списки, разделы, статьи, верхние и нижние колонтитулы, сторонние элементы и т. Д.). И вы можете добиться отличных результатов с минимальным HTML / CSS (оставляя ваш код семантически значимым, легким и простым в обслуживании).

Конечно, табличные данные должны быть внутри элемента таблицы. Если вы хотите, вы можете улучшить даже семантику таблиц, добавив thead, tfoot, tbody, th, caption и т. Д. Все эти элементы предназначены для использования с таблицами, и поверьте, они могут сделать вашу таблицу намного более информативной. ,

Итак, дело в том, что не стоит использовать дизайн на основе таблиц и использовать любое подходящее решение HTML / CSS. Начните с семантической разметки HTML, а затем создайте дизайн с помощью CSS. Это должно держать кого-нибудь в безопасности. Используйте это как правило.

Дейв
источник
3

Таблицы должны содержать данные, а не элементы дизайна.

sdadffdfd
источник
3

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

Крис Балланс
источник
Почему отрицательный голос?
Крис Балланс
0

Настоящая причина не использовать таблицы:

Макет таблицы по умолчанию: table-layout:fixed

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

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

YardenST
источник
-3

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

Что лучше <br>или <p></p>? Тоже самое

Я и мои старые таблицы в моем новом веб-дизайне 2015 года могут дать задницу любому, у кого мой удобный мобильный телефон шириной 100% и двумя боковыми колонками по 200 пикселей каждая.

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

Те, кто говорит, что расположение таблиц по умолчанию исправлено? Я приведу вам пример

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>

Вы видите потенциал сейчас? Посмотрите на это на ПК и мобильном телефоне. Ах да, и мне даже не нужен бутстрап.

Теперь, чтобы сделать то же самое с div-ами, вам нужно написать много CSS-кода, чтобы выровнять float и crap. Кто написал меньше кода? Меня! Что нужно клиентам? Парень заканчивает страницу через 1 год или через 1 месяц?

Теперь давайте улучшим дизайн с помощью div

<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>
<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>

Так красиво, макет 5 колонок дизайн, используя div и таблицы.

Ваш ответ: они вместе работают лучше и быстрее, и это будет хорошо смотреться на любом дизайне, даже на телевизорах и небольших мобильных телефонах.

Родриго Сантьяборг
источник