Predefinição:Cabeçalho de divisão diagonal

Documentação da predefinição[ver] [editar] [histórico] [purgar]

​

Uso

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= |}	para de 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

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

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		2023	2024
		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

Simula uma célula de cabeçalho de tabela dividida diagonalmente

Parâmetros da predefinição[Editar dados da predefinição]

Parâmetro		Descrição	Tipo	Estado
linhas	1	cabeçalho dos cabeçalhos de linha, mostrado no canto inferior esquerdo Exemplo ''eixo y''	String	obrigatório
colunas	2	cabeçalho dos cabeçalhos das colunas, mostrado no canto superior direito Exemplo {{color|#6cf|eixo x}}	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 Padrão #eaecf0 Exemplo transparent	String	opcional

Notas técnicas

• É 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.