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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я использую таблицы для структуры веб-дизайна в жидкости, смешанной с фиксированной, и я знаю, что многие говорят, что таблицы предназначены для новичков, другие говорят, что они для парней старой школы, которые всегда говорят, что 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 и таблицы.

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