Настройка диапазона строк в colgroup?
https://stackoverflow.com/questions/1006089
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Простой (надеюсь) вопрос HTML.
Допустим, у меня есть группа столбцов, состоящая из трех столбцов.Но он также охватывает 9 строк.Но на самом деле я хочу, чтобы было 3 уровня столбцов (по сути, 3 столбца, разделенных на 9 строк).Единственными целями на самом деле являются:
а) Избегайте встроенных таблиц (по разным причинам) B) Сохраняйте модульные секции.в) обеспечить стилизацию семантически модульных областей.
В итоге у меня будет что-то вроде:
| 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 |
Мне удалось заставить группы столбцов работать, чтобы объединить три столбца, но попытка добавить «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.
Таким образом, все данные в четверке 1 связаны, и все данные в суперстроке 1 связаны, и все данные в суперстроке 1 связаны.Итак, используя приведенные выше данные,
«a» имеет прямую связь с «f», «C» и «G», но «f», «C» и «G» не имеют прямой связи друг с другом.
Другой способ думать об этом — судоку, где каждый четырехугольник, столбец и строка содержат набор от 1 до 9, что делает любую из 81 точки данных непосредственно связанной с любыми другими точками данных, с которыми она разделяет строку, столбец или четырехугольник. но не к каким-либо точкам данных.
Быстрое обновление:
И последнее, извините.Важно, чтобы эти отношения были семантически сгруппированы в HTML, чтобы, если кто-то использует программу чтения с экрана или нетрадиционный браузер, он мог знать, где он находится в таблице в любой момент, например: «Вы находитесь в Quad 1, Super». Колонка 1, Столбец 4, Суперстрока 1, Строка 1.Данные — «Огайо».
Это значительно упрощает стилизацию, кросс-браузерную совместимость, доступность, а также перемещение, например, AccessKeys, Scope и т. д.
Решение
При условии <colgroup> единственный семантический метод группировки столбцов и <tbody> является единственным семантическим средством группировки строк, я бы рекомендовал придерживаться чего-то простого:
<table>
<colgroup id="colgroup1">
<col id="colA" />
<col id="colB" />
</colgroup>
<colgroup id="colgroup2">
<col id="colC" />
<col id="colD" />
</colgroup>
<tbody id="rowgroup1">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr id="row1">
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr id="row2">
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
</tr>
</tbody>
<tbody id="rowgroup2">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr id="row3">
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
<tr id="row4">
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
</tr>
</tbody>
</table>
Это позволит вам стилизовать четырехугольники, сохраняя при этом чистую семантическую структуру.Я не уверен, насколько гибко вы будете иметь стиль, но у вас есть несколько вариантов:
<style type="text/css">
table { border-collapse:collapse; font-family:sans-serif; font-size:small; }
td, th { border:solid 1px #000; padding:2px 10px; text-align:center; }
th { background-color:#000; color:#fff; font-size:x-small; }
colgroup { border:solid 3px #000; }
tbody { border:solid 3px #000; }
</style>
table {
border-collapse: collapse;
font-family: sans-serif;
font-size: small;
}
td,
th {
border: solid 1px #000;
padding: 2px 10px;
text-align: center;
}
th {
background-color: #000;
color: #fff;
font-size: x-small;
}
colgroup {
border: solid 3px #000;
}
tbody {
border: solid 3px #000;
}<table>
<colgroup id="colgroup1">
<col id="colA" />
<col id="colB" />
</colgroup>
<colgroup id="colgroup2">
<col id="colC" />
<col id="colD" />
</colgroup>
<tbody id="rowgroup1">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr id="row1">
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr id="row2">
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
</tr>
</tbody>
<tbody id="rowgroup2">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr id="row3">
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
<tr id="row4">
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
</tr>
</tbody>
</table>Другие советы
А <table> может иметь несколько <tbody> дочерние элементы, которые представляют группы строк.Я не использовал <colgroup> элемент раньше, поэтому я оставлю его для добавления кем-то другим, но вот решение, которое позволит вам удовлетворить ваши потребности в стиле, сохраняя при этом его семантику:
<table>
<tbody>
<tr>
<th scope="col">col 1</th>
<th scope="col">col 2</th>
<th scope="col">col 3</th>
</tr>
<tr>
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="col">col 4</th>
<th scope="col">col 5</th>
<th scope="col">col 6</th>
</tr>
<tr>
<td>row 4</td>
<td>row 4</td>
<td>row 4</td>
</tr>
<tr>
<td>row 5</td>
<td>row 5</td>
<td>row 5</td>
</tr>
<tr>
<td>row 6</td>
<td>row 6</td>
<td>row 6</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="col">col 7</th>
<th scope="col">col 8</th>
<th scope="col">col 9</th>
</tr>
<tr>
<td>row 7</td>
<td>row 7</td>
<td>row 7</td>
</tr>
<tr>
<td>row 8</td>
<td>row 8</td>
<td>row 8</td>
</tr>
<tr>
<td>row 9</td>
<td>row 9</td>
<td>row 9</td>
</tr>
</tbody>
</table>
Я основывал это на информации из спецификация HTML 5, но он также должен быть допустимым HTML 4.
Если я правильно помню, то <colgroup> тег не работает должным образом ни в одном браузере (ну, возможно, в Opera).Я бы избегал этого любой ценой.
На вашем месте я бы составил простую таблицу, в которой каждый <td> представляет «квадрат», затем создайте таблицу внутри этой ячейки для остальных данных.
На самом деле семантически правильный способ — это вложенные таблицы.В вашем примере есть таблица квадратов 2x2, а каждый квадрат представляет собой таблицу значений 3x3.Нет ничего семантически неправильного в использовании для этого вложенной таблицы.Не запутайтесь в толпе противников вложенных html-таблиц.Это связано с использованием вложенных таблиц для макета страницы.
Использование вложенных таблиц также дает вам больше контроля над стилем CSS.Использование cols и colgroups дает вам лишь очень ограниченный контроль над стилем.Единственные свойства CSS, которые вы можете установить для столбца или группы столбцов, — это граница, фон, с и видимость.
Я думаю, что проще всего пропустить элемент colgroup-element и вместо этого использовать простой стиль класса:
<table>
<tr class="colgroup1">
<th>col1</th><th>col2</th><th>col3</th>
</tr>
<tr class="colgroup1">
<td>row1</td><td>row1</td><td>row1</td>
</tr>
<tr class="colgroup1">
<td>row2</td><td>row2</td><tr>row2</td>
</tr>
<tr class="colgroup2">
<th>col4</th><th>col5</th><th>col6</th>
</tr>
<tr class="colgroup2">
<td>row3</td><td>row3</td><td>row3</td>
</tr>
<tr class="colgroup2">
<td>row4</td><td>row4</td><td>row4</td>
</tr>
<tr class="colgroup3">
<th>col7</th><th>col8</th><th>col9</th>
</tr>
<tr class="colgroup3">
<td>row5</td><td>row5</td><td>row5</td>
</tr>
<tr class="colgroup3">
<td>row6</td><td>row6</td><td>row6</td>
</tr>
</table>
Затем вы можете легко настроить таргетинг на различные группы цветов с помощью CSS:
.colgroup1 th {
// Styles here
}
.colgroup2 th {
// Styles here
}
.colgroup3 th {
// Styles here
}
// Same for tds.
Редактировать: мне нравится как Рори Фицпатрик использует несколько тел таблиц.Если это действительно так, то я бы выбрал это решение и просто поместил имя класса в каждый тег тела таблицы.CSS останется прежним
