Tabela central CSS
Exemplo 01: Criando uma tabela no centro da página da web usando a tag de estilo CSS em um arquivo html
Nesse caso, estaremos criando uma tabela que será alinhada ao centro da página da web. O método CSS de etiqueta de estilo será utilizado neste caso. A propriedade da margem será usada neste exemplo para alinhar centralmente uma tabela em nosso navegador.
Neste script, abriremos a etiqueta da cabeça primeiro. Na etiqueta da cabeça, abriremos a tag de estilo CSS. Na tag de estilo, daremos à tabela e a seus elementos algumas propriedades de estilo. Primeiro será o tamanho, a forma e a cor da borda; Então, vamos dar um pouco de preenchimento. No final da tag de estilo, atribuiremos a propriedade "margem" e depois fecharemos o estilo e a tag de cabeça. Depois disso, abriremos a etiqueta corporal, na qual criaremos nossa tabela usando a tag de tabela. Dentro da tag da tabela, daremos dois conjuntos de linhas. Na primeira linha, a etiqueta "Th" será usada, que atribuirá o título da coluna da tabela. Em seguida, criaremos a segunda linha com a tag "TR" e forneceremos a esta linha alguns dados para as colunas usando a tag "TD".
Como podemos ver na saída acima, a tabela está alinhada ao centro da página devido à propriedade da margem automática que foi atribuída no cabeçalho do arquivo.
Exemplo 02: Usando a técnica CSS embutida para alinhar uma tabela no centro de uma página HTML
Neste exemplo, usaremos a propriedade de margem com a função automática, que alinhará a tabela ao centro da página da web. A abordagem CSS embutida será usada neste exemplo para alcançar o objetivo.
Neste script, começaremos diretamente da etiqueta corporal. Começaremos com a tag H1 para dar à página um título. Em seguida, iniciaremos a tag de tabela na qual daremos a chamada de estilo e daremos uma borda com sua forma, tamanho e cor como a propriedade. Em seguida, daremos um pouco de preenchimento à mesa, e a propriedade da margem com a função automática será chamada. A tag "tr" será usada para adicionar duas linhas à tabela. Usaremos a tag "Th" para fornecer a coluna dos nomes da tabela e a tag "TD" para atribuir dados à segunda linha da tabela. A palavra -chave do estilo CSS embutida será aplicada às tags "Th" e "TD" para fornecer recursos estilísticos aos componentes da tabela de forma independente. As propriedades de estilo incluem a borda com forma, tamanho, cor e preenchimento.
Depois de salvar o script anterior e abri -lo em qualquer navegador de sua escolha, obteremos a saída aérea. Como podemos ver que alinhamos com sucesso a tabela com o centro da página usando a abordagem CSS embutida.
Exemplo 03: Usando propriedades CSS de margem-esquerda e margem direita para alinhar uma tabela ao centro da página em um arquivo html
Neste exemplo, a abordagem CSS de etiqueta de estilo será usada. Aqui, criaremos uma tabela que será centrada na página. A propriedade da margem será separada em dois pedaços, esquerda e direita, que serão utilizados para alinhar centralmente uma tabela na página do nosso navegador neste exemplo.
A etiqueta da cabeça será aberta primeiro neste script. A tag de estilo CSS será aberta na etiqueta da cabeça. Daremos à tabela e suas partes algumas características estilísticas com a tag de estilo. O tamanho, a forma e a cor da fronteira virão em primeiro lugar, seguido de estofamento. Após a etiqueta de estilo, atribuiremos as propriedades "margem-direita" e "margem-esquerda" e daremos a eles valores percentuais antes de fechar o estilo e as tags de cabeça. Depois disso, abriremos a etiqueta corporal e começaremos fornecendo à página um cabeçalho usando a tag H1. A tag de tabela será usada para construir nossa tabela. Daremos dois conjuntos de linhas dentro da tag da tabela.
A tag "Th" será usada na primeira linha para atribuir o título da coluna da tabela. Em seguida, usando a tag "tr", criaremos a segunda linha e usaremos a tag "TD" para preencher as colunas com dados. Depois disso, fecharemos todas as tags e salvaremos o arquivo para preservar as modificações que serão exibidas em nosso navegador, como visto abaixo:
A tabela está alinhada ao meio da página, conforme mostrado na saída acima, devido à margem-esquerda e às propriedades da direita na margem definida no cabeçalho do arquivo.
Exemplo 04: Usando propriedades CSS de margem-esquerda e margem direita com a função automática para alinhar uma tabela ao centro da página
Neste exemplo, a abordagem CSS de etiqueta de estilo será usada. Aqui, faremos uma tabela que existe no centro da página. A propriedade da margem será dividida em duas seções, à esquerda e à direita, que serão usadas para alinhar centralmente uma tabela em nosso exemplo usando o recurso de automóvel na página do nosso navegador.
Neste script, a etiqueta da cabeça será aberta primeiro. Na etiqueta da cabeça, a etiqueta do estilo CSS será aberta. Com a etiqueta de estilo, daremos à tabela e seus componentes algumas qualidades estilísticas. O preenchimento virá após o tamanho, a forma e a cor da fronteira. Antes de fechar o estilo e as tags de cabeça, adicionaremos as propriedades "margem direita" e "margem-esquerda" após a tag de estilo e dará a eles a função automática como seu valor. A tag de tabela será utilizada para construir nossa mesa.
Dentro da tag da tabela, daremos dois conjuntos de linhas. A tag "Th" será usada na primeira linha para dar a coluna para a mesa. Em seguida, usando a tag "tr", construiremos a segunda linha e a tag "TD" será usada para preencher as colunas com dados. Depois disso, fecharemos todas as tags e salvaremos o arquivo para preservar as mudanças que serão visíveis em nosso navegador.
Como os valores da margem-esquerda e da derrota na margem no cabeçalho do arquivo estão definidos como automáticos, a tabela está alinhada ao centro da página, como mostrado na saída acima.
Conclusão
Discutimos inúmeros métodos que o CSS fornece para alinhar uma tabela no centro de uma página da web neste artigo. A propriedade da margem foi explorada e implementada na linguagem de marcação de hipertexto para realizar esse fenômeno. Usamos a propriedade de margem com várias propriedades diferentes atribuídas, como função automática e valores percentuais, para alinhar a tabela no centro. Implementamos todos os exemplos no bloco de notas ++ neste artigo.