Melhor maneira de centralizar o texto em uma célula de tabela

click fraud protection

Se você for um Web designer novato, pode ter dúvidas sobre como centralizar o texto dentro de uma célula de tabela. Com este guia, aprenda esta técnica em apenas alguns minutos. É fácil - mesmo se você nunca tentou antes.

Começando

Centrando o texto dentro de uma célula é melhor feito com CSS, da mesma forma que você centralizaria o texto em outro elemento em sua página da web. Antes de começar, entretanto, você precisa decidir o que exatamente deseja ser centrado. Com uma tabela, você tem várias opções, incluindo todas as células da tabela; cada célula de cabeçalho na tabela cada célula no cabeçalho, corpo ou pé da mesa. Você também pode centralizar uma célula específica ou conjunto de células na tabela.

Além disso, você deve criar um folha de estilo interna no cabeçalho do seu documento ou anexado ao documento como um folha de estilo externa. Você colocará os estilos para centralizar as células da tabela nessa folha de estilo.

Como centralizar cada célula na mesa

Adicione as seguintes linhas à sua folha de estilo:

instagram viewer
td, th {
alinhamento de texto: centro;
}

Como centralizar cada célula de cabeçalho na tabela

Adicione as seguintes linhas à sua folha de estilo:

º {
alinhamento de texto: centro;
}

Centrando cada célula na cabeça, corpo ou pé da mesa

Para centralizar essas células, você precisa adicionar tags de tabela que nem sempre são usadas, como.

thead th, thead td {
alinhamento de texto: centro;
}
tbody th, tbody td {
alinhamento de texto: centro;
}
tfoot th, tfoot td {
alinhamento de texto: centro;
}

Remova os estilos das áreas que você não deseja centralizar.

Como centralizar uma célula ou células específicas em uma tabela

Para fazer isso, você precisa definir uma classe nas células que deseja centralizar.

Adicione o seguinte atributo às células da tabela que você deseja centralizar:

Em seguida, adicione o seguinte à sua folha de estilo:

.centered-cell {
alinhamento de texto: centro;
}

Você pode adicionar esta classe a qualquer célula da sua tabela.

Empacotando

Não hesite em usar esses estilos em qualquer uma das células da sua tabela. Você pode usá-los em células mescladas ou em células individuais e o texto dentro será centralizado.

instagram story viewer