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.
