Как сгруппировать столбцы в таблице данных: используя вложенные таблицы или colspan?
Я работаю над веб-приложением, и мне нужно сгруппировать набор столбцов под одним заголовком в таблице данных. Я рассматриваю два подхода:
Использование Колспана:
Это кажется простым и сохраняет структуру HTML простой.
Однако меня беспокоит, как он будет масштабироваться с более сложными структурами данных и есть ли какие-либо ограничения.
Использование вложенных таблиц:
Этот подход может обеспечить большую гибкость для сложных группировок, но я опасаюсь, что это может усложнить поддержку кода и повлиять на доступность.
Какой метод считается лучшим методом группировки столбцов в таблице данных?
Есть ли какие-либо конкретные плюсы и минусы использования colspan по сравнению с вложенными таблицами, о которых мне следует знать?
Есть ли лучший способ структурировать мою таблицу данных для обеспечения доступности и удобства обслуживания?
Спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В моем случае я использую вот так, но если вы экспортируете в формате CSV, добавьте вторую голову в свой JS.
<table id = "tblAcumuladoHrsExtras" class = "table table-hover table-striped table-bordered nowrap" width = "100%">
<thead>
<tr>
<th class = "text-center" colspan = ""></th>
<th class = "text-center" colspan = "2">Hrs Extras Dobles</th>
<th class = "text-center" colspan = "2">Hrs Extras Triples</th>
<th class = "text-center" colspan = "2">TOTALES</th>
</tr>
<tr>
<th>Fecha Nómina</th>
<th>Cant Hrs Ex.</th>
<th>Importe Hrs Ex.</th>
<th>Cant Hrs Ex.</th>
<th>Importe Hrs Ex.</th>
<th>Cant Hrs Ex.</th>
<th>Importe Hrs Ex.</th>
</tr>
</thead>
<tbody></tbody>
TL;DR Используйте colspan
Вот несколько причин
- Это семантично. Браузер, специальные приложения и устройства, а также поисковые системы (если вам интересно) будут лучше понимать сайт.
- Это то, для чего они предназначены. Как вы можете прочитать здесь, если вы хотите иметь сложные заголовки с вложенными уровнями, это лучший вариант. Вложенные таблицы, хотя и доступны, никогда не предлагаются и не очень рекомендуются, поскольку они усложняют дизайн (подробнее об этом ниже).
- Его легче поддерживать. Да, возможно, учтите, что вложенная таблица дает вам больше гибкости, но прослушивание событий, стилизация и многие другие базовые вещи могут легко усложниться. Например, если вы не устраните должным образом все пробелы между таблицами и не обработаете должным образом отступы и поля, вы можете увидеть невыравнивание. А прослушиватели событий можно настроить более простым способом: например, если вы хотите создать в своей таблице некоторые функции выбора, как вы собираетесь связать тот факт, что строка 15 является строкой 13 во встроенной таблице? вам придется выполнить некоторую сложную логику, чтобы точно определить, где вы находитесь, если вы хотите перемещаться по таблице, и если вы не установите события должным образом, вы можете получить двойное срабатывание событий. С colspan ваша пятая строка всегда будет пятой. Если вам нужна какая-либо ячейка, вы можете перейти к родительской ячейке, а затем поискать любую другую соседнюю ячейку.
Вы можете использовать таблицы вложенности, но вам нужно быть очень осторожными с событиями и стилями. Вероятно, вам придется удалить все стили из самой таблицы и обеспечить стилизацию только внешней таблицы или иметь определенные стили для каждой таблицы/уровня. Если вы хотите сохранить доступность, вы можете использовать атрибуты aria для имитации таблицы, например aria-colspan и aria-role
Если вам нужна большая гибкость, вы можете попытаться создать таблицу на основе самих данных, например, написать функцию json2table или что-то в этом роде, чтобы HTML-код генерировался на основе данных, и у вас был только один источник для обновления (и не было чтобы добавить столбец к данным, а затем в HTML каждый раз, когда данные изменяются). Кроме того, если вы заботитесь о доступности, вы можете использовать другие дополнительные атрибуты aria, такие как aria-level и тому подобное.
Удачи