Alinear texto en una tabla

14/Jun/2015 CSS , ,

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:

  1. <th>País</th>
  2. <th>Capital</th>
  3. <th>Superficie</th>
  4. <th>Habitantes</th>
  5. </tr>
  6. <td>España</td>
  7. <td>Madrid</td>
  8. <td>504.645 km<sup>2</sup></td>
  9. <td>46,6 M</td>
  10. </tr>
  11. ...
  12. </table>

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.

  1. table th {
  2. text-align: center;
  3. }

Alinear todo el texto de las filas a la derecha:

  1. table tr {
  2. text-align: right;
  3. }

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

  1. table tr:nth-child(4) {
  2. text-align: center;
  3. }

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

Vídeos sobre CSS


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D