Тег <tr>: строка с согласованным набором ячеек
Tr объединяет ячейки одной строки таблицы. Порядок td и th определяет соответствие колонкам, поэтому пропущенная ячейка может сдвинуть смысл всех следующих значений.
Назначение
Tr объединяет ячейки одной строки таблицы. Порядок td и th определяет соответствие колонкам, поэтому пропущенная ячейка может сдвинуть смысл всех следующих значений.
Как это работает
Строки обычно размещают внутри thead, tbody или tfoot. Для отсутствующего значения сохраняйте отдельную ячейку с понятным обозначением. Colspan и rowspan используйте только при реальном объединении областей таблицы.
Пример
<table><caption>Проверка учебных файлов</caption><thead><tr><th scope="col">Файл</th><th scope="col">Размер</th><th scope="col">Состояние</th></tr></thead><tbody><tr><th scope="row">index.html</th><td>2 КБ</td><td>Готов</td></tr><tr><th scope="row">notes.html</th><td>Не измерен</td><td>Черновик</td></tr></tbody></table>Что должно получиться
Каждая строка имеет три ячейки, а неизвестный размер выражен текстом. Состояние черновика остаётся в своей колонке и не смещается на место размера.
Граница применения и частая ошибка
Не помещайте абзацы или блоки прямо в tr вместо ячеек. Не делайте всю строку псевдокнопкой без продуманной клавиатурной модели; обычная ссылка в нужной ячейке часто понятнее. Пустая строка не является способом создания внешнего отступа.
Самостоятельная проверка
Уберите одну ячейку в копии и проследите нарушение соответствия колонкам. Верните её с явным текстом отсутствующего значения. Затем добавьте строку и проверьте структуру таблицы валидатором.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.