Строки таблиці

При великій кількості рядків у таблиці стає важко порівнювати дані з різних колонок між собою. Для цього потрібно візуально відрізняти один рядок таблиці від іншого — або за допомогою ліній, або за рахунок додавання фонового кольору.

Спочатку розглянемо варіант використання горизонтальних ліній. На малюнку 1 показаний один із можливих способів акцентування уваги на рядках таблиці. Кожен рядок зверху і знизу обрамляється лінією, завдяки цьому погляд відвідувача ковзає вздовж них і не перескакує на сусідній рядок. При цьому дані, що знаходяться в колонках, також пов’язуються між собою, але вже завдяки одночасному вирівнюванню по лівому краю і порожньому простору між колонками.

Лінії між рядками встановлюються досить просто, для цього слід додати стилеве властивість border-bottom до селектора TD. Якщо навколо таблиці є рамка, то нижня границя вийде подвійної товщини. У цьому випадку можна прибрати нижню лінію у останнього рядка або приховати нижню границю у таблиці (приклад 1).

Малюнок 1. Таблиця з рядками, виділеними за допомогою ліній

У даному прикладі подвійна лінія внизу таблиці не виникає внаслідок застосування властивості border-collapse із значенням collapse до селектора TABLE. Цей параметр відстежує появу подвійних ліній у місцях дотику комірок і замінює їх одинарними лініями. Зверніть увагу, що в різних браузерах можуть виникнути розбіжності щодо кольору залишених ліній у тому випадку, якщо колір межі навколо таблиці не співпадає з кольором ліній під рядками.