Создание лучших HTML-таблиц

Как ни странно, одна из самых сложных веб-технологий для освоения - одна из самых ранних, доступных браузеру после простого текста и изображений. Проблема еще больше сегодня с таким количеством различных типов устройств, о которых нужно подумать.

Совершенные таблицы практически невозможно создать, если они не содержат так мало элементов, что могут возникнуть проблемы. Виды ошибок, которые могут возникнуть, включают в себя:

  • Неправильная перенос текста
  • Обоснование ошибок
  • Рендеринг таблицы вне экрана
  • Проблемы с прокруткой
  • Ошибка высоты строки
  • Ошибки ширины столбца
  • Общее уродство или неопрятность

В этой статье мы рассмотрим, как избежать подобных проблем, чтобы у ваших столов был лучший шанс создать хорошее впечатление.

Стратегии избегания, чтобы избежать

Поскольку таблицы очень трудно получить правильно, некоторые люди стараются избегать их использования. Некоторые распространенные стратегии используют CSS для создания поддельной таблицы и используют изображение таблицы данных, не внедряя его в код.

Обе эти стратегии избегания имеют недостатки и их следует избегать. При использовании CSS для имитации таблицы отсутствует семантическая структура, присущая таблице, что может создать проблемы с удобством использования и доступностью.

Изображение таблицы не будет страдать от проблем, перечисленных во введении, но ухудшает ваш потенциал SEO и не может быть легко изменено, если ваши данные нуждаются в обновлении. Он также вводит проблемы юзабилити и доступности.

Рамки твои друзья

Общие платформы, такие как Bootstrap и Foundation, содержат много инструментов, экономящих время, и таблицы не являются исключением. Создать классную таблицу в Bootstrap несложно, но у нее есть некоторые ограничения, если вы просто создаете стойку, не добавляя к вашим усилиям индивидуальные настройки.

Выглядит не все

Поскольку контент и стиль всегда должны быть независимыми, имеет смысл сначала построить таблицу в обычном HTML, чтобы убедиться, что она будет хорошо выглядеть до применения какого-либо специального стиля таблицы.

Это также может быть полезно для напоминания о том, что для хорошего построения таблицы требуется нечто большее, чем просто хороший внешний вид. Это также должна быть полезная система доставки информации. Если цель таблицы не в том, чтобы передавать информацию, то вам не следует использовать таблицу для всего, что вы делаете.

Цель для доступности

Некоторым людям трудно видеть и читать печатный текст, поэтому рекомендуется сделать таблицы доступными для них. Вы можете узнать все, что вам нужно знать о том, чтобы сделать ваши столы более доступными из WebAIM.

Рассмотрите возможность присвоения значений идентификаторов компонентам таблицы.

Для максимального контроля над каждой частью таблицы (строки, ячейки), вы можете рассмотреть возможность присвоения им отдельных значений идентификаторов. Добавление значений классов также даст вам еще большую гибкость.

Выполнение этих действий создает для вас гораздо больше работы, поэтому это практично только тогда, когда вам нужно иметь возможность точно настроить любой элемент по ссылке. Если вы решите сделать это, вы сможете напрямую манипулировать любым элементом таблицы, используя JavaScript и CSS.

Одна из сложностей создания таблиц заключается в том, что мы объявляем строки, а не столбцы. Столбцы создаются динамически, рассчитывается в зависимости от того, сколько элементов данных вы поместите в каждую строку. Вот почему таблицы увеличивают время загрузки вашей страницы.

По сути, это означает, что столбцы существуют только в абстрактном смысле до отображения страницы, поэтому вы не можете дать им какую-либо ссылку. Предоставляя первому элементу TD в строке класс, например «firstCol», вы предоставляете способ прямой ссылки на столбец.

Компактные столы лучшие

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

Разработчики Bootstrap экспериментировали с адаптивными таблицами, но таблицы и адаптивность не сочетаются друг с другом. Разработка таблиц с самого начала, чтобы они помещались на экране мобильного устройства в портретном режиме, - разумный шаг.

Таблицы всегда должны быть прокручиваемыми

Рекомендуется всегда устанавливать значение переполнения таблицы на auto, но не на саму таблицу. Вместо этого, оберните таблицу внутри div, примерно так:

Тогда есть много PHP-кода, который создает тело таблицы, заканчиваясь этим:

Часть, которая выполняет работу по прокрутке таблицы, находится на первой строке, где div для переноса таблицы имеет фиксированную высоту и имеет значение переполнения, установленное на auto. Если вы сделаете это с самой таблицей, а не с оберткой вокруг таблицы, это может привести к непредвиденным последствиям.

Позвоните в тяжелых нападающих, если вам нужно

Для простых таблиц это излишне, но когда у вас есть таблица, которая действительно нуждается в таких преимуществах, как регулируемая ширина столбца и сортировка столбца, есть несколько мощных приложений jQuery, которые были созданы, чтобы помочь с задачей построения сложных таблиц.

Самый большой и, скорее всего, лучший Flexigrid, Это похоже на таблицу Java Swing и работает аналогичным образом.

Возможности Flexigrid могут даже оказаться слишком большими для того, что вам нужно, поэтому в этом случае вы можете рассмотреть TableSorter, что немного проще.

Хотя возможности этих инструментов могут быть интересными, важно, чтобы они добавляли еще больше времени загрузки вашей страницы. Лучше всего сохранять такие вещи, когда они действительно нужны.

Инструменты автоматического преобразования обычно не дают лучших результатов

Доступны плагины CMS, которые позволяют преобразовывать таблицы документов в таблицы HTML. Это далеко не так хорошо, как создание таблицы вручную, поэтому, если вы хотите получить превосходные результаты, автоматизация такого типа не подходит.

Ваша собственная автоматизированная система в порядке, однако

Использование PHP для построения ваших таблиц из информации базы данных всегда хорошая идея, и определенно предпочтительнее, чем вводить все вручную. Разница здесь в том, что у вас есть полный контроль над тем, как работает автоматизация.

Когда вы используете стороннюю автоматизацию, сторонний автор должен делать предположения относительно вашей таблицы. Это означает, что в итоге вы получите общую таблицу, в которой может отсутствовать множество функций по сравнению с созданием таблицы самостоятельно.

Используйте таблицы соответствующим образом, и они будут вознаграждать вас

Хорошие таблицы разработаны, они не просто случаются. Когда вы разрабатываете систему доставки информации, вы хотите, чтобы она была эффективной и действенной. Убедитесь, что ваши таблицы предназначены именно для этого, и ваш сайт получит максимальную выгоду от их включения.

изображение заголовка любезно предоставлено

Богдан Рэнца

Богдан является одним из основателей Inspired Mag, накопив за этот период почти 6-летний опыт. В свободное время он любит изучать классическую музыку и изучать изобразительное искусство. Он тоже одержим исправлениями. У него уже есть 5.