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

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

40 голосов | спросил Incognito 29 12010vEurope/Moscow11bEurope/MoscowMon, 29 Nov 2010 18:28:00 +0300 2010, 18:28:00

6 ответов


69

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

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

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

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

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

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

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

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

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

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

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

ответил John Conde 29 12010vEurope/Moscow11bEurope/MoscowMon, 29 Nov 2010 18:35:42 +0300 2010, 18:35:42
8

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

Неправильно использовать таблицы для создания макета. Вы должны использовать другие элементы для макета (divs, lists, sections, articles, headers, footers, asides и т. Д.). И вы можете добиться больших эффектов с минимальным HTML /CSS (оставляя свой код семантически значимым, легким и простым в обслуживании).

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

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

ответил Dave 30 22010vEurope/Moscow11bEurope/MoscowTue, 30 Nov 2010 03:44:44 +0300 2010, 03:44:44
3

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

ответил sdadffdfd 29 12010vEurope/Moscow11bEurope/MoscowMon, 29 Nov 2010 19:31:47 +0300 2010, 19:31:47
3

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

ответил Chris Ballance 30 22010vEurope/Moscow11bEurope/MoscowTue, 30 Nov 2010 01:29:33 +0300 2010, 01:29:33
0

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

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

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

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

ответил YardenST 3 J000000Tuesday12 2012, 01:07:39
-3

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

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

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

Очевидно, что внутри таблиц уродливо ставить все больше и больше таблиц, поэтому DIVS подходит. Таблицы могут делать то, что divs не может, и divs могут делать то, что таблицы не могут.

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

<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>

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

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

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

<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 колонок с использованием divs и таблиц.

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

ответил Rodrigo Santiaborg 5 MaramThu, 05 Mar 2015 07:11:59 +03002015-03-05T07:11:59+03:0007 2015, 07:11:59

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132