Cómo centrar texto en una celda de tabla

Si es un diseñador web novato, es posible que tenga preguntas sobre cómo centrar el texto dentro de una celda de tabla. Con esta guía, domine esta técnica en solo unos minutos.

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

Empezando

Centrar el texto dentro de una celda se realiza 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 en qué quiere centrarse exactamente. Con una tabla, tiene varias opciones, incluidas todas las celdas de la tabla; cada celda de encabezado en la tabla cada celda en el encabezado de la tabla, el cuerpo de la tabla o el 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 una hoja de estilo interna en el encabezado de su documento o adjuntarla como una hoja de estilo externa. Pondrá los estilos para centrar las celdas de la tabla en esa hoja de estilos.

Cómo centrar cada celda en la tabla

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

 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 {
text-align: center;
}

Centrando cada celda en la mesa Cabeza, cuerpo o pie

Para centrar estas celdas, debe agregar etiquetas de tabla que no siempre se usan, como, y. Luego, rodeará las celdas de su mesa con estas etiquetas para identificar la cabeza, el cuerpo y el pie de la mesa. Después de eso, agregará lo siguiente a su hoja de estilo:

 thead th, thead td {
alineación de texto: centro;
}
tbody th, tbody td {
alineación de texto: centro;
} < br /> tfoot th, tfoot td {
text-align: center;
}

Elimine los estilos de las áreas en las que no desea centrarse.

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

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

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

  class = "centrado-celda" > 

Luego agregue lo siguiente a su hoja de estilo:

 .centered-cell {
text-align: center;
}

Puede agregar esta clase a cualquier celda de su tabla.

Terminando

No dude en usar 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.

Rate article
labsfabs.com
Add a comment