Definir rowspan em colgroup?
https://stackoverflow.com/questions/1006089
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Simples (espero), pergunta HTML.
Vamos dizer que tenho um grupo de colunas que se estende por 3 colunas. Mas também se estende por 9 linhas. Mas, na verdade, eu quero que haja 3 níveis de colunas (Então, basicamente, 3 colunas, divididos em 9 linhas). Os únicos objetivos realmente são:
a) evitar a incorporação de tabelas (por várias razões) b) manter as seções modular. c) permitir a denominar das áreas semanticamente modulares.
Assim, no final, eu teria algo visualmente como:
| 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 |
Eu era capaz de obter os grupos de colunas para o trabalho para manter as 3 colunas juntos, mas uma tentativa de adicionar "rowspan" failed.Trying para embrulhar os grupos de linhas em tr marcas não era bom em tudo. e, tanto quanto eu um tell, não há real "rowgroup" tag.
Update:
Depois de obter feedback, eu percebi que eu deveria dar mais detalhes sobre o que eu tenho em mente.
Vou usar o quad prazo, super-coluna, super-fila para se referir a grupos de dados. Então pegue este exemplo:
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 |
Por causa da simplicidade, basta imaginar que toda a parte superior escrevi super-col. 1 - 6
Assim, os dados no quad 1 é tudo relacionado, e os dados no super-linha 1 é tudo relacionado, e os dados no super-col 1 é tudo relacionado. Assim, usando os dados acima,
'A' tem uma relação directa com 'f', 'C', e 'G', mas 'F', 'C', e 'G' têm nenhuma relação directa uns com os outros.
Outra maneira de pensar sobre isso é Sudoku, onde cada quad, coluna e linha conter o conjunto de 1-9, fazendo qualquer um dos 81 pontos de dados relacionados diretamente para quaisquer outros pontos de dados que compartilha uma linha, coluna ou quad com, mas não a quaisquer pontos de dados.
atualização rápida:
Uma última coisa, me desculpe. É importante que essas relações ser agrupados semanticamente no HTML para que, se alguém estar usando um leitor de tela ou navegador não-tradicional, eles podem saber onde eles estão na tabela, em qualquer ponto, ou seja, "Você está em Quad 1, Super Col 1, coluna 4, Super linha 1, linha 1. Os dados são 'Ohio' ".
Isso faz styling, compatibilidade cross-browser, acessibilidade tudo muito mais fácil, bem como um movendo-se como Teclas de acesso, Scope, etc.
Solução
Dado que <colgroup> é o único método semântico de colunas de agrupamento e <tbody> é o único meio semânticas do agrupamento de linhas, eu recomendo ficar com algo simples:
<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>
Isto irá permitir que você quads de estilo, mantendo uma estrutura limpa, semântica. Eu não tenho certeza quanta flexibilidade você terá em estilo, mas você tem algumas opções:
<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>
Outras dicas
A <table> pode ter vários filhos <tbody>, que representam grupos de linhas. Eu não usei o elemento <colgroup> antes, então eu vou deixar isso para outra pessoa a acrescentar, mas aqui é uma solução que irá permitir-lhe atingir suas necessidades de estilo ao mesmo tempo mantendo-semântica:
<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>
Eu baseei este em informações do HTML 5 especificação , mas deve ser válido HTML 4 também.
Se bem me lembro, a tag <colgroup> não funciona corretamente em qualquer navegador (bem, Opera talvez). Eu evitá-lo a todo custo.
Se eu fosse você, eu tinha acabado de fazer uma tabela simples, onde cada <td> representa um "quad", em seguida, fazer uma tabela dentro dessa célula para o resto dos dados.
A forma semanticamente correto é tabelas aninhadas, na verdade. Seu exemplo tem uma tabela 2x2 de quads e cada quad é uma tabela 3x3 de valores. Não há nada semanticamente errado em usar uma tabela aninhada para isso. Não fique confuso sobre a multidão anti-nested-html-mesa. Isso tem a ver com o uso de tabelas aninhadas para layout da página.
Usando tabelas aninhadas também lhe dá mais controle sobre CSS styling. Usando cols e colgroups só lhe dá controle de styling muito limitado. As únicas propriedades CSS que podem ser configuradas em uma col ou colgroup são beira, fundo, com e visibilidade.
Eu acho que o mais fácil é para ignorar o colgroup elemento todos juntos e ir com classe simples que denomina em vez disso:
<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>
Em seguida, você pode direcionar os diferentes colgroups facilmente em CSS:
.colgroup1 th {
// Styles here
}
.colgroup2 th {
// Styles here
}
.colgroup3 th {
// Styles here
}
// Same for tds.
Editar: Eu gosto de como Rory Fitzpatrick usa vários corpos de mesa. Se isso é realmente válido, então eu iria com essa solução e basta colocar um nome de classe de cada tag corpo da tabela. O CSS permanecerá o mesmo
