Было время, когда таблицами вёрстали вообще всё — и меню, и колонки текста, и даже целые макеты страниц. Сегодня для этого есть Flexbox и Grid, и таблицы вернулись туда, где им и место — для представления табличных данных.
Расписание поездов, сравнение тарифов, статистика по месяцам — вот типичные случаи, где таблица действительно нужна, потому что данные организованы строками и столбцами и связаны между собой именно так. Тег table вместе с thead, tbody и tr, td создаёт структуру, которую браузер и скринридер понимают однозначно.
Тег th обозначает заголовочную ячейку — и это не просто вопрос жирного шрифта. Скринридер, дойдя до обычной ячейки, может озвучить соответствующий заголовок столбца или строки, если разметка сделана правильно, с использованием атрибута scope у th.
На маленьких экранах широкие таблицы становятся проблемой — их приходится либо прокручивать горизонтально, либо перестраивать в вертикальный список карточек через CSS. Оба подхода рабочие, выбор зависит от объёма и характера данных.
Если хочется освежить в памяти все теги, из которых строится таблица, и посмотреть примеры вёрстки сложных случаев вроде объединённых ячеек, стоит заглянуть в раздел про тег table на MDN.
Многие забывают про тег caption, который добавляет таблице подпись, связанную с ней программно, а не просто заголовок абзацем сверху. Мелкая деталь, но именно из таких деталей складывается ощущение, что сайт сделан аккуратно, а не наспех.
Ещё один частый вопрос — нужна ли таблице рамка и полосатая заливка строк. Это уже вопрос оформления, а не разметки: сама структура таблицы от внешнего вида никак не зависит, и одну и ту же разметку можно стилизовать совершенно по-разному под разные разделы сайта.
