Таблица для макета против таблицы для данных

Кратко

Два устаревших приёма: таблица для вёрстки макета и поле без подписи. Современно: таблица — только для данных, у каждого поля — свой <label>.

1. Таблица для макета → таблица только для данных

Раньше колонки страницы собирали из <table>. Внешне результат был похожим, но смысл ломался: таблица «говорит» скринридеру «это данные строк и столбцов», хотя там просто блоки макета. Сегодня раскладку делают через CSS (flex/grid), а таблицу оставляют исключительно для табличных данных.

Старый подход (таблица как макет):

Меню сайта Основной контент страницы 
<table>
  <tr>
    <td>Меню сайта</td>
    <td>Основной контент</td>
  </tr>
</table>

Современный подход (CSS-раскладка):

Основной контент страницы
<div style="display:flex">
  <nav>Меню сайта</nav>
  <main>Основной контент</main>
</div>

2. input без label → label + input

Поле с одним placeholder кажется понятным, но подсказка исчезает при вводе, не озвучивается как подпись и не кликается. Правильно — явный <label>, связанный через for/id.

Старый подход (только placeholder):

<input type="text" placeholder="Имя">

Современный подход (label + input + name):

<label for="name">Имя</label>
<input id="name" name="name" type="text">