Alinear texto en una tabla

14/Jun/2015 CSS , , 1 Comentario

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


Un comentario en “Alinear texto en una tabla”

Víctor Cuervo

juan perez

buen aporte

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*