Сравнительная таблица для сайта

Сравнительная таблица для сайта: для чего нужен

Сравнительная таблица помогает клиенту выбрать между тарифами, товарами или услугами, не задавая вопросов. Напишите столбцы и строки, используя да и нет, чтобы получить ✓ и ✗, и выберите столбец для выделения рамкой и значком.

На телефоне таблица прокручивается в сторону с закреплённым первым столбцом. В HTML используются table с th и scope и скрытый текст «Да» и «Нет» рядом с символами, чтобы программа чтения с экрана читала каждую ячейку с нужным заголовком.

Как пользоваться

1. Напишите столбцы через вертикальную черту.
2. Напишите каждую строку со значением для каждого столбца.
3. Выберите выделение и скопируйте код.

Когда использовать

• Сравнить тарифы услуги.
• Сравнить модели товара.
• Показать отличия от конкурентов.

Частые вопросы

Как это выглядит на телефоне?

Таблица прокручивается в сторону внутри рамки, а первый столбец с названием каждого пункта остаётся закреплённым при прокрутке. Так человек никогда не теряет из виду, что сравнивает.

Доступны ли символы ✓ и ✗?

К каждому символу прилагается скрытый текст («Да» или «Нет») для программы чтения с экрана, а в таблице используются th с scope для строк и столбцов, поэтому каждая ячейка озвучивается с нужным заголовком.

Для чего нужен выделенный столбец?

Чтобы привлечь внимание к рекомендуемому вами варианту: с рамкой и значком. Используйте для одного столбца; если выделить несколько, эффект пропадёт.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты