Artículos
CSS

Alinear texto en una tabla

14/Jun/2015

Cuando creamos una tabla en HTML e insertamos texto dentro de ella, este texto siempre quedará alineado a la izquierda. Es decir, sucede lo mismo que cuando insertamos texto en cualquier otra parte de una página HTML. En el ejemplo de hoy vamos a ver como podemos alinear texto en una tabla.

A la hora de alinear texto en una tabla lo primero que tenemos que tener en cuenta es sobre que elemento manipulamos el texto y lo alineamos. Y e que debemos de recordar las partes de las que normalmente consta una tabla en HTML.

Si vemos un ejemplo de tabla:


...
País Capital Superficie Habitantes
España Madrid 504.645 km2 46,6 M

Vemos que hay algunos elementos principales en HTML como son table, el cual representa a toda la tabla, tr que representa las filas, th que representa las cabeceras y td que representa las celdas. Así que dependiendo del elemento sobre el que queramos alinear el texto deberemos de utilizar uno u otro.

Lo siguiente que vamos a aprender es qué atributo HTML nos sirve para alinear el texto. En este caso el atributo CSS que vamos a utilizar el text-align.

Algunos de los valores que admite text-align como valores son:

  • left, para alinear el texto a la izquierda.
  • rigth, para alinear el texto a la derecha.
  • center, para centrar el texto.
  • justify, para que sea un texto justificado.

Ahora ya solo nos queda combinar el atributo text-align con los elementos html para conseguir alinear texto en una tabla.

Por ejemplo podríamos hacer las siguientes cosas… Centrar los títulos.

table th {
  text-align: center;
}

Alinear todo el texto de las filas a la derecha:

table tr {
  text-align: right;
}

Centrar solo el contenido de la cuarta fila de la tabla:

table tr:nth-child(4) {
  text-align: center;
}

Y así todos los ejemplos que se te ocurran para alinear texto en una tabla.

Código Fuente

Descárgate el código fuente de Alinear texto en una tabla
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
4 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios