Alinear texto en una tabla

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 es que debemos de recordar las partes de las que normalmente consta una tabla en HTML.

Si vemos un ejemplo de tabla:

<table>
<tbody>
<tr>
	<th>País</th>
	<th>Capital</th>
	<th>Superficie</th>
	<th>Habitantes</th>
</tr>
<tr>
	<td>España</td>
	<td>Madrid</td>
	<td>504.645 km<sup>2</sup></td>
	<td>46,6 M</td>
</tr>
</tbody>
</table>

Veremos 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, manipulando el elemento th.

table th {
  text-align: center;
}

Alinear todo el texto de las filas a la derecha, para ello aplicamos el atributo text-align sobre el elemento de la fila tr:

table tr {
  text-align: right;
}

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

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

En este caso nos apoyamos en el selector nth-child que puede seleccionar un elemento en función de su orden entre los hijos de su elemento padre. Combina el poder de text-align con los selectores adecuados para lograr la alineación deseada en tu tabla.

Y así todos los ejemplos que se te ocurran para alinear texto en una tabla utilizando las propiedades de CSS.

Twittear

Compartir3

3 Compartir