La mejor forma de centrar el texto en una celda de tabla

click fraud protection

Si es un diseñador web novato, es posible que tenga preguntas sobre cómo centrar el texto dentro de la celda de una tabla. Con esta guía, aprenda esta técnica en solo unos minutos. Es fácil, incluso si nunca antes lo ha intentado.

Empezando

Centrado de texto dentro de una celda se hace mejor con CSS, al igual que centraría el texto en otro elemento de su página web. Sin embargo, antes de comenzar, debe decidir qué es exactamente lo que desea centrar. Con una tabla, tiene varias opciones, incluidas todas las celdas de la tabla; cada celda del encabezado de la tabla, cada celda del encabezado, cuerpo o pie de la tabla. También puede centrar una celda específica o un conjunto de celdas dentro de la tabla.

Además, debe crear un hoja de estilo interna en el encabezado de su documento o adjunto al documento como un hoja de estilo externa. Pondrá los estilos para centrar las celdas de su tabla en esa hoja de estilo.

Cómo centrar cada celda en la tabla

Agregue las siguientes líneas a su hoja de estilo:

instagram viewer
td, th {
alineación de texto: centro;
}

Cómo centrar cada celda de encabezado en la tabla

Agregue las siguientes líneas a su hoja de estilo:

th {
alineación de texto: centro;
}

Centrado de cada celda en la cabeza, el cuerpo o el pie de la mesa

Para centrar estas celdas, debe agregar etiquetas de tabla que no siempre se usan, como.

thead th, thead td {
alineación de texto: centro;
}
tbody th, tbody td {
alineación de texto: centro;
}
tfoot th, tfoot td {
alineación de texto: centro;
}

Elimine los estilos de las áreas que no desea centrar.

Cómo centrar una celda o celdas específicas en una tabla

Para hacer esto, necesita establecer una clase en las celdas que desea centrar.

Agregue el siguiente atributo a las celdas de la tabla que desea centrar:

Luego agregue lo siguiente a su hoja de estilo:

.centered-cell {
alineación de texto: centro;
}

Puede agregar esta clase a cualquier celda de su tabla.

Terminando

No dude en utilizar estos estilos en cualquiera de las celdas de su tabla. Puede usarlos en celdas combinadas o en celdas individuales y el texto dentro estará centrado.

instagram story viewer