Чому ми не повинні використовувати <table> у дизайні?

Які існують чіткі та логічні причини, чому ми не повинні створювати веб-сайти за допомогою таблиць? Де переваги, що сприяло цій ідеї в галузі? Коли добре використовувати таблицю?

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

• Повільно візуалізувати, оскільки браузер повинен завантажувати більшу частину (якщо не всю) таблиці, щоб правильно її відтворити

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

• Вони можуть бути кошмаром для підтримки, оскільки вони можуть швидко отримати складний стан

• Вони можуть порушити копіювання тексту

• Вони негативно впливають на читачі екранів і можуть зробити ваш вміст недоступним для деяких користувачів

• Вони не такі гнучкі, як використання правильної семантичної розмітки

• Їх ніколи не передбачалося використовувати для макетів сторінок

• Перетворення таблиць на чуйний макет дуже важко контролювати

2) Використовуйте таблицю для табличних даних. Ось для чого призначені таблиці.

Дивіться також: Чому люди роблять столи з дівами?

Таблиці призначені для табличних даних, а не для дизайну. Люди часто неправильно розуміють мотивацію, що робить сторінки "столовими".

Неправильно використовувати таблиці для створення вашого макета. Для компонування слід використовувати інші елементи (divs, списки, розділи, статті, заголовки, колонтитули, відсторонення тощо). І ви можете домогтися чудових ефектів за допомогою мінімального HTML / CSS (залишаючи свій код семантично значущим, легким та простим у обслуговуванні).

Звичайно, табличні дані повинні бути всередині елемента таблиці. Якщо ви хочете, ви можете покращити навіть семантику таблиць, додавши thead, tfoot, tbody, th, заголовки тощо. Усі ці елементи призначені для використання з таблицями, і повірте, вони можуть зробити вашу таблицю набагато більш самоописовою. .

Отже, справа не в тому, щоб не розробляти дизайн на основі таблиць і не використовувати будь-яке рішення HTML / CSS, яке підходить. Почніть з семантичної розмітки HTML, а потім створити дизайн за допомогою CSS. Це повинно будь-кого захистити. Використовуйте це як правило.

Таблиці повинні містити дані, а не елементи дизайну.

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

Справжня причина не використовувати таблиці:

Типовий макет таблиці: table-layout:fixed

Це спонукає браузер проаналізувати таблицю та виправити комірки, щоб містити елементи всередині них, на що потрібно певний час. (саме тому таблиці настільки гарні для складних даних)

Підсумок: таблиця відображатиметься після того, як весь вміст всередині неї буде виведений, на відміну від використання, наприклад, елементів DIV.

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

Що краще а <br>чи а <p></p>? Те ж саме

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

Очевидно, що всередині столів некрасиво ставити все більше та більше таблиць, саме тут 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 місяць?

Тепер давайте вдосконалюємо дизайн за допомогою дівок

<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 та таблиць.

Ваша відповідь: вони обидва разом працюють краще і швидше, і це буде добре виглядати на будь-якому дизайні, навіть на телевізорах та невеликих мобільних телефонах.