Predefinição:Cabeçalho de divisão diagonal
Uso
[editar código]Esta prédefinição simula uma célula de cabeçalho de tabela dividida diagonalmente, um dispositivo frequentemente usado para rotular cabeçalhos de linhas e colunas de maneira compacta, como neste exemplo:
para de | sólido | líquido | gasoso |
|---|---|---|---|
| sólido | transformação sólido-sólido | fusão | sublimação |
| líquido | solidificação | — | ebulição/evaporação |
| gasoso | ressublimação/deposição | condensação/liquefação | — |
Para usá-la, crie uma célula de cabeçalho usando ! seguido por {{cabeçalho de divisão diagonal|cabeçalho de linha|cabeçalho de coluna}}.
Como o efeito é obtido desenhando uma linha diagonal na célula, os dois cabeçalhos ainda fazem parte da mesma célula e podem facilmente ultrapassar a linha. Uma solução é preencher os cabeçalhos com espaços não separáveis ( ), quebras de linha (<br />), e/ou CSS . O usuário da prédefinição é responsável por verificar se ela não ultrapassa nos navegadores da Web comuns.
| Fonte Wiki | Resultado renderizado | ||||||||
|---|---|---|---|---|---|---|---|---|---|
{| class="wikitable"
! {{Cabeçalho de divisão diagonal|de|para}}
! sólido !! líquido !! gasoso
|-
! sólido
| transformação sólido-sólido || fusão || sublimação=
|}
|
|
Cor de fundo e células que não são do cabeçalho
[editar código]Um terceiro parâmetro pode ser adicionado para alterar a cor de fundo padrão da célula de cabeçalho. Alterá-lo para transparent (ou outra cor, como white ou #ffffff) permite que a prédefinição seja aplicada a células que não são do cabeçalho. Prefixe com | em vez de !, como nesta matriz de recompensa amigo ou inimigo?:
- Exemplo
par 2 par 1 |
"Amigo" | "Inimigo" |
|---|---|---|
| "Amigo" | 1 1 |
2 0 |
| "Inimigo" | 0 2 |
0 0 |
- Código
{| class="wikitable" style="margin:0 auto;text-align:center;"
! {{Cabeçalho de divisão diagonal | par 1 | {{color|#900|par 2}} | yellow}}
! style="width:6em;background:yellow;"| {{color|#900|"Amigo" }}
! style="width:6em;background:yellow;"| {{color|#900|"Inimigo" }}
|-
! style="width:6em;background:yellow;"| "Amigo"
| {{Cabeçalho de divisão diagonal | 1 | {{color|#900|1}} | palegreen}}
| {{Cabeçalho de divisão diagonal | 0 | {{color|#900|2}} | transparent}}
|-
! style="width:6em;background:yellow;"| "Inimigo"
| {{Cabeçalho de divisão diagonal | 2 | {{color|#900|0}} | transparent}}
| {{Cabeçalho de divisão diagonal | 0 | {{color|#900|0}} | pink}}
|}
Abrangendo colunas e linhas e tabelas recolhíveis e classificáveis
[editar código]A prédefinição é compatível com tabelas recolhíveis e células usando colspan ou rowspan, caso em que se coloca o atributo colspan/rowspan entre ! e {{cabeçalho de divisão diagonal ...}}. Não é compatível com tabelas classificáveis, pois as setas de classificação não são desenhadas, mas esse problema pode ser resolvido usando uma segunda linha de cabeçalho:
- Exemplo
n Cidade |
2025 | 2026 | ||
|---|---|---|---|---|
| Dezembro | Janeiro | Fevereiro | ||
| Roma | Rome | 8 | 1 | 6 |
| Veneza | Venice | 3 | 5 | 7 |
| Florença | Florence | 4 | 9 | 2 |
- Código
{| class="wikitable sortable mw-collapsible" style="margin:0 auto;text-align:center;"
! colspan="2" rowspan="2" {{Cabeçalho de divisão diagonal| Cidade|''n''}}
! {{#expr:{{CURRENTYEAR}} - 1}}
! colspan="2"|{{CURRENTYEAR}}
|-
! Dezembro !! Janeiro !! Fevereiro
|-
! Roma !! ''Rome''
| 8 || 1 || 6
|-
! Veneza !! ''Venice''
| 3 || 5 || 7
|-
! Florença !! ''Florence''
| 4 || 9 || 2
|}
Dados da prédefinição
[editar código]Simula uma célula de cabeçalho de tabela dividida diagonalmente
| Parâmetro | Descrição | Tipo | Estado | |
|---|---|---|---|---|
| linhas | 1 | cabeçalho dos cabeçalhos de linha, mostrado no canto inferior esquerdo
| String | obrigatório |
| colunas | 2 | cabeçalho dos cabeçalhos das colunas, mostrado no canto superior direito
| String | obrigatório |
| cor de fundo | 3 | cor de fundo opcional, use <code>transparent</code> para fundo padrão de células que não são do cabeçalho
| String | opcional |
Notas técnicas
[editar código]- É possível criar uma versão sem a saturação de linha por Krautzberger. Esta funciona desenhando uma linha e usando uma grade CSS 2x2 com os cantos inferior esquerdo e superior direito.
- Consulte caniuse para obter suporte do recurso css-grid necessário; compare com gradientes css (sem prefixo) subjacentes à implementação atual.
- Nenhuma das implementações oferece suporte ao layout de texto ao longo da diagonal, pois o navegador não reconhece a forma triangular. As formas CSS podem ser uma solução, mas a abordagem mais fácil dentro da forma ainda não foi padronizada.