Explicação detalhada do uso real do layout da tabela HTML

Quando a tabela será usada

Agora, as tabelas <tabela> geralmente não são mais usadas para o layout geral das páginas da web. No entanto, quando confrontados com certos projetos específicos, como entrada de formulários e apresentação de dados, os formulários podem ser a escolha mais apropriada.

A impressão intuitiva de uma tabela é que os elementos são organizados por várias células, que podem ver claramente linhas e colunas. Isso pode ser associado ao Excel. Da posição do Excel no processamento e estatística do Excel, podemos entender o significado das tabelas nas páginas da web.

Simplificando, quando você pode sentir intuitivamente que vários elementos estão organizados no conceito de linhas e colunas, o uso de tabelas tornará você muito mais fácil. Por exemplo, o formulário de inscrição em caniuse.com:

Usar uma tabela é simples, mas às vezes a tabela acaba com cada grade, o que pode não ser o que você deseja. Por exemplo, se algumas grades tiverem quebras de linha, a tabela inteira parecerá muito desagradável porque as quebras de linha. Especialmente para tabelas usadas para a apresentação de dados, a alocação de largura é um tópico muito importante. Pode ser necessário calcular cuidadosamente a largura total da tabela para os dados que podem ser apresentados em cada coluna de grades.

Isso ocorre porque uma tabela possui suas próprias características no layout e seguirá certos princípios e determinará seu layout real por meio de cálculos. Em seguida, este artigo usa exemplos reais de teste de tabela para explorar como as tabelas calculam seu próprio layout.

Este artigo se concentra apenas nos métodos mais comuns de aplicação de tabelas e não lista todos os casos. Os navegadores diferentes têm análises diferentes de alguns conceitos de tabelas, mas os cálculos de layout são basicamente consistentes (se houver diferenças, serão mencionadas separadamente).

Os próximos formulários de teste serão apresentados dessa maneira (o conteúdo é retirado da trajetória de zero):

Ao mesmo tempo, a tabela definirá o colapso da borda: colapso; e espaçamento de fronteira: 0;. Essa também é a prática mais comum para a aplicação de tabelas e o normalize.css usa essa parte como a definição de inicialização.

O atributo CSS-layout definido no elemento <table> determinará o algoritmo aplicado à tabela durante o cálculo do layout. Possui dois valores, automático e fixo. Em casos normais, o valor do valor padrão é usado.

A diferença entre esses dois algoritmos é se o layout de largura da tabela está relacionado ao conteúdo de dados na tabela. Este artigo discutirá o princípio do cálculo do layout das tabelas ao tomar esses dois valores.

Layout automático da tabela -auto

A característica do layout automático da tabela é que o layout de largura da tabela está relacionado a todo o conteúdo de dados na tabela. Ele precisa obter todo o conteúdo da tabela antes que o layout da largura final possa ser determinado e depois exibido juntos.

Dessa maneira, o ponto principal é que o conteúdo é relevante. E se a tabela definir uma largura fixa (500px aqui) e todas as células não definirem largura (apenas discutindo CSS define larguras), o que acontece? Veja os resultados:

Na tabela acima, a parte em branco é escrita com & nbsp; espaços. Após a comparação, podemos encontrar os seguintes pontos:

As 2º e 3º colunas têm a mesma largura.

A largura da coluna 1 e a proporção de largura de qualquer coluna a seguir parece ser 2: 1.

Adicione a borda e as margens internas, e as larguras de todas as colunas são resumidas, iguais à largura definida pela tabela.

Não há largura definida em cada célula; portanto, o layout da largura é totalmente determinado pelos dados de conteúdo específicos (informações de texto). Como explicar esse resultado? Você pode primeiro inferir intuitivamente essa lógica:

Etapa 1: selecione o texto com o maior número de conteúdo de texto de cada coluna (entenda que, se o texto não envolver a linha, o texto ocupará a maior largura) como o representante.

Etapa 2: Compare as larguras dos representantes de cada coluna e atribua -lhes a largura total da tabela, incluindo fronteiras e margens internas de acordo com sua relação proporcional de largura.

Referindo -se à lógica acima e, em seguida, olhando para a tabela anterior, há algum motivo? Observe que a taxa de largura mencionada anteriormente parece ser 2: 1, será isso? Vamos dar uma olhada na versão que remove as margens internas:

Use a ferramenta de depuração front-end para examinar a largura das células acima, e você descobrirá que esta tabela é diferente de antes e a proporção é muito próxima de 2: 1 (sim, também há um ponto pequeno por causa da borda, mas sem a borda, você não pode distinguir as colunas).

Pode -se observar que, ao analisar o relacionamento proporcional de largura, a largura do conteúdo, a margem interna e a borda serão levados em consideração. Isso também mostra que não é uma medida do número de palavras, mas uma medida da largura que as palavras podem ocupar no estado de nenhuma quebra de linha (os 2: 1 aqui vem do fato de que os caracteres chineses são iguais em largura). Use as margens internas naturalmente apenas para fazer uma mesa mais bonita :).

O que acontece quando há uma definição de largura? Aqui está uma tabela com uma largura definida em parte das células:

Seu código HTML correspondente é: