Установка rowspan на colgroup? - PullRequest
Новая
       21

Установка rowspan на colgroup?

1 голос
/ 17 июня 2009

Простой (я надеюсь), вопрос 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, super-column, super-row для обозначения групп данных. Итак, возьмем этот пример: 

               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, так что, если кто-то использует программу чтения с экрана или нетрадиционный браузер, он может знать, где он находится в таблице в любой заданной точке, т.е. Колонка 1, Колонка 4, Супер Строка 1, Строка 1. Данные «Огайо».

Это значительно упрощает стилизацию, кросс-браузерную совместимость, доступность, а также такие перемещения, как AccessKeys, Scope и т. Д.

Ответы [ 5 ]

10 голосов
/ 26 июня 2009

Учитывая, что <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>
2 голосов
/ 17 июня 2009

A <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.

1 голос
/ 01 июля 2009

Семантически правильный способ - это вложенные таблицы. В вашем примере есть таблица квадратов 2x2, а каждый квад - таблица значений 3x3. Нет ничего семантически неправильного в использовании для этого вложенной таблицы. Не смущайтесь из-за толпы анти-вложенных html-таблиц. Это связано с использованием вложенных таблиц для макета страницы.

Использование вложенных таблиц также дает вам больший контроль над стилями CSS. Использование cols и colgroups дает вам очень ограниченный контроль стиля. Единственные свойства CSS, которые вы можете установить для col или colgroup, - это border, background, with и visibility.

1 голос
/ 30 июня 2009

Если я правильно помню, тег <colgroup> не работает должным образом ни в одном браузере (ну, может быть, в Opera). Я бы избежал этого любой ценой.

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

0 голосов
/ 17 июня 2009

Я думаю, что проще всего пропустить элемент colgroup вместе и использовать вместо этого простую стилизацию класса: 

<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 останется прежним

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...