Descarga contenido exclusivo en
Ofimática y Programación + Tecnología

viernes, 4 de diciembre de 2015



Google HTML Service - Alinear elementos en celdas con CSS y HTML


La alineación de elementos puede ser difícil en un editor HTML ya que las propiedades no siempre están a la vista para conseguir lo de... thumbnail 1 summary



La alineación de elementos puede ser difícil en un editor HTML ya que las propiedades no siempre están a la vista para conseguir lo deseado con un solo clic y puede ser más rápido simplemente escribir el código.

El código para alinear elementos es bastante sencillo, fácil de entender y fácil de aplicar en algunos casos y un poco más complejo en otros. Como ejemplo veremos como alinear los elementos adentro de la celda de una tabla.


Atributos obsoletos

Los siguientes son atributos marcados como obsoletos, aun validos de usar ya que logran el objetivo pero ya no recomendados:
  • align. Para la alineación horizontal, el cual puede tener los valores left (izquierda), center (centro) o right (derecha) y justify (justificado).
  • valign. Para la alineación vertical, el cual puede tener los valores top (arriba), middle (medio) o bottom (abajo)


A continuación las combinaciones posibles:


      <td valign="top" align="left">
        Top-Left
      </td>
Top-Left



      <td valign="top" align="center">
        Top-Center
      </td>
Top-Center



      <td valign="top" align="right">
        Top-Right
      </td>
Top-Right



      <td valign="middle" align="left">
        Middle-Left
      </td>
Middle-Left



      <td valign="middle" align="center">
        Middle-Center
      </td>
Middle-Center



      <td valign="middle" align="right">
        Middle-Right
      </td>
Middle-Right



      <td valign="bottom" align="left">
        Bottom-Left
      </td>
Bottom-Left



      <td valign="bottom" align="center">
        Bottom-Center
      </td>
Bottom-Center



      <td valign="bottom" align="right">
        Bottom-Right
      </td>
Bottom-Right




Lo mismo se aplica a imágenes:


      <td valign="middle" align="center">
        <img src="https://images....png">
      </td>




Con estilos CSS

Los anteriores son los atributos marcados como obsoletos, si bien estos aun funcionan lo recomendado es usar estilos CSS:

style="text-align: xxx". Este es el código usado para la alineación horizontal. Al igual que align debe aplicarse a la celda:


      <td style="text-align: left">
        Left
      </td>
Left



      <td style="text-align: center">
        Center
      </td>
Center



      <td style="text-align: right">
        Right
      </td>
Right




style="vertical-align: xxx". Este es el código usado para la alineación vertical. Al igual que valign debe aplicarse a la celda:


      <td style="vertical-align: top">
        Top
      </td>
Top



      <td style="vertical-align: center">
        Center
      </td>
Center



      <td style="vertical-align: bottom">
        Bottom
      </td>
Bottom


vertical-align tiene otros usos que no se contemplan aquí, en esta entrada solo se ve lo concerniente a la alineación de elementos en las celdas


No hay comentarios

Publicar un comentario en la entrada