Простой (надеюсь) HTML-вопрос.
Допустим, у меня есть группа столбцов, которая охватывает 3 столбца. Но он также охватывает 9 рядов. Но на самом деле я хочу, чтобы было 3 уровня столбцов (по сути, 3 столбца, разделенных на 9 строк). Единственными целями на самом деле являются:
а) избегайте встраивания таблиц (по разным причинам) б) сохраняйте модульность разделов. c) позволяют стилизовать семантически модульные области.
Итак, в конце концов, у меня было бы что-то визуально похожее на:
| col 1 | col 2 | col 3 |
| row 1 | row 1 | row 1 |
| row 2 | row 2 | row 2 |
| row 3 | row 3 | row 3 |
| col 4 | col 5 | col 6 |
| row 4 | row 4 | row 4 |
| row 5 | row 5 | row 5 |
| row 6 | row 6 | row 6 |
| col 7 | col 2 | col 3 |
| row 7 | row 7 | row 7 |
| row 8 | row 8 | row 8 |
| row 9 | row 9 | row 9 |
Мне удалось заставить группы столбцов работать так, чтобы 3 столбца были вместе, но попытка добавить «rowspan» не удалась. Попытка обернуть группы строк в теги tr была бесполезна. и, насколько я знаю, настоящего тега «rowgroup» не существует.
Обновлять:
Получив обратную связь, я понял, что должен дать более подробную информацию о том, что я имею в виду.
Я буду использовать термины «квадрат», «суперстолбец», «суперстрока» для обозначения групп данных. Итак, возьмите этот пример:
Quad 1 Quad 2
super-row1 | a | b | c || d | e | f |
super-row2 | 1 | 2 | 3 || 4 | 5 | 6 |
super-row3 | A | B | C || D | E | F |
Quad 3 Quad 4
super-row4 | g | h | i || j | k | l |
super-row5 | 7 | 8 | 9 || 0 | 1 | 2 |
super-row6 | G | H | I || J | K | L |
Для простоты представьте, что сверху я написал суперстолбец 1–6.
Таким образом, все данные в quad 1 связаны, и данные в суперстроке 1 все связаны, и данные в суперстолбце 1 все связаны. Итак, используя приведенные выше данные,
«a» имеет прямое отношение к «f», «C» и «G», но «f», «C» и «G» не имеют прямого отношения друг к другу.
Другой способ представить это — судоку, где каждая четверка, столбец и строка содержат набор от 1 до 9, что делает любую из 81 точки данных напрямую связанной с любыми другими точками данных, с которыми она делит строку, столбец или четверку. но не к любым точкам данных.
Быстрое обновление:
И последнее, извините. Важно, чтобы эти отношения были семантически сгруппированы в HTML, чтобы, если кто-то использует программу чтения с экрана или нетрадиционный браузер, они могли знать, где они находятся в таблице в любой момент, например: «Вы находитесь в Quad 1, Super Col 1, Column 4, Super Row 1, Row 1. Данные: «Огайо».
Это значительно упрощает стилизацию, кросс-браузерную совместимость, доступность, а также перемещение, такое как AccessKeys, Scope и т. д.
