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

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

Começando

Centralizar o texto dentro de uma célula é melhor feito com CSS, assim como você centralizaria o texto em outro elemento na sua página da Web. Antes de começar, no entanto, você precisa decidir exatamente o que deseja centralizar. Com uma tabela, você tem várias opções, incluindo todas as células da tabela; cada célula de cabeçalho na tabela toda célula na cabeça da tabela, corpo da tabela ou pé da tabela. Você também pode centralizar uma célula específica ou um conjunto de células na tabela.

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

Como centralizar cada célula na tabela

Adicione as seguintes linhas à sua folha de estilos:

td, th {texto-alinhar: centro;}

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

Adicione as seguintes linhas à sua folha de estilos:

º {texto-alinhar: centro;}

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

Para centralizar essas células, você precisa adicionar tags de tabela que nem sempre são usadas, como , e . Em seguida, você cercará as células da tabela com essas tags para identificar a cabeça, o corpo e o pé da mesa. Depois disso, você adicionará o seguinte à sua folha de estilos:

thead thead thead {texto-alinhar: centro;}tbody th, tbody td {texto-alinhar: centro;}tfoot th, tfoot td {texto-alinhar: centro;}

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

Como centralizar uma célula específica ou células 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:

class = "célula centrada" >

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

.centered-cell {texto-alinhar: centro;}

Você pode adicionar essa 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.