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.

Publicaciones relacionadas:

Color de una fila HTML Ocultar celdas vacías Color del encabezado en una tabla HTML Color a una tabla HTML Dar color a la última fila de una tabla