Html

Tablas en HTML

13 febrero, 2011

Una tabla en un conjunto de celdas donde podemos alojar distintos contenidos.

En un principio nos podría parecer que las tablas son raramente útiles y que pueden ser utilizadas principalmente para listar datos como agendas, resultados y otros datos de una forma organizada. Nada más lejos de la realidad.

Una tabla permite organizar y distribuir los espacios de una página de la manera más optima. Nos puede ayudar a generar texto en columnas como los periódicos, prefijar los tamaños ocupados por distintas secciones de la página o poner de una manera sencilla un pie de foto a una imagen.

Características de las tablas

  • Definimos las tablas con la etiqueta <table>.
  • La tabla está dividida en filas definidas con la etiqueta <tr>.
  • Y a su vez cada fila dividida en celdas definidas con la etiqueta <td>.
  • Las celdas pueden contener texto, imágenes, formularios, listas, otras tablas, etc.

Un ejemplo de tablas es el siguiente:

Nombre Apellido
Pedro Marcos

El código HTML de este ejemplo es:

<table border="1px">
<tr>
<td>Nombre</td>
<td>Apellido</td>
</tr>
<tr>
<td>Pedro</td>
<td>Marcos</td>
</tr>
</table>

Bordes de las tablas

Para que se visualicen los bordes de una tabla, debemos agregar el atributo border junto con el valor expresado en pixels, de lo contrario no se verán los bordes que dividen las celdas de la tabla.

Ejemplo de tabla con bordes

Borde 3 pixels

Código de tabla con bordes

<table border="3px">
<tr>
<td>Borde</td>
<td>3 pixels</td>
</tr>
</table>

Ejemplo de tabla sin bordes

Esta tabla es Sin bordes

Código de tabla sin bordes

<table>
   <tr>
      <td>Esta tabla es</td>
      <td>Sin bordes</td>
   </tr>
</table>

Nota: al no colocar el atributo border, los bordes no se visualizan pero la tabla existe.

Encabezados de las tablas

Los encabezados de una tabla se definen con la etiqueta <th>. La etiqueta <th> siempre muestra los encabezados remarcados.

Nombre Apellido
Pedro Garcia
Juan Perez
<table border="1px">
   <tr>
      <th>Nombre</th>
      <th>Apellido</th>
   </tr>
   <tr>
      <td>Pedro</td>
      <td>Garcia</td>
   </tr>
   <tr>
      <td>Juan</td>
      <td>Perez</td>
   </tr>
</table>

Márgenes de las celdas

Es el espacio que se encuentra entre los bordes de la celda y su contenido.

Definimos los márgenes con el atributo cellpadding.

Nombre Apellido
Pedro Marcos
<table border="1px" cellpadding="20px">
   <tr>
      <th>Nombre</th>
      <th>Apellido</th>
   </tr>
   <tr>
      <td>Pedro</td>
      <td>Marcos</td>
   </tr>
</table>

Nota: en este ejemplo podemos observar que el atributo cellpadding deja 20 pixels mínimo entre las palabras dentro de cada celda y los bordes de las mismas.

Espaciado entre celdas

Es el espacio que se encuentra entre celda y celda. El mismo está definido con el atributo cellspacing.

Nombre Apellido
Pedro Garcia
<table border="1px" cellspacing="15px">
   <tr>
      <th>Nombre</th>
      <th>Apellido</th>
   </tr>
   <tr>
      <td>Pedro</td>
      <td>Garcia</td>
   </tr>
</table>

Nota: en este ejemplo el atributo cellspacing deja un espacio de 15 pixels entre las celdas de la tabla

Etiquetas y atributos de las tablas

Hemos visto que las tablas están compuestas de líneas que, a su vez, contienen celdas. Las celdas son delimitadas por las etiquetas <td> o por las etiquetas <th> (si queremos texto en negrita y centrado) y constituyen un entorno independiente del resto del documento. Esto quiere decir que:

  • Podemos usar prácticamente cualquier tipo de etiqueta dentro de la etiqueta <td> para, de esta forma, dar forma a su contenido.
  • Las etiquetas situadas en el interior de la celda no modifican el resto del documento.
  • Las etiquetas de fuera de la celda no son tenidas en cuenta por ésta.

Algunos atributos útiles para la construcción de nuestras tablas. Empecemos viendo atributos que nos permiten modificar una celda en concreto o toda una línea, etiqueta td, tr, th:

align Justifica el texto de la celda del mismo modo que si fuese el de un párrafo.
valign Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda.
bgcolor Da color a la celda o línea elegida.
bordercolor Define el color del borde.

Otros atributos que pueden ser únicamente asignados a una celda y no al conjunto de celdas de una línea son:

background Nos permite colocar un fondo para la celda a partir de un enlace a una imagen.
height Define la altura de la celda en pixels o porcentaje.
width Define la anchura de la celda en pixels o porcentaje.
colspan Expande una celda horizontalmente.
rowspan Expande una celda verticalmente.

Los atributos propios de la etiqueta table son:

align Alinea horizontalmente la tabla con respecto a su entorno.
background Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.
bgcolor Da color de fondo a la tabla.
border Define el número de pixels del borde principal.
bordercolor Define el color del borde.
cellpadding Define, en pixels, el espacio entre los bordes de la celda y el contenido de la misma.
cellspacing Define el espacio entre los bordes (en pixels).
height Define la altura de la tabla en pixels o porcentaje.
width Define la anchura de la tabla en pixels o porcentaje.

En la siguiente imagen podemos ver graficamente todos los valores que hemos comentado:

tabla en html

Propiedasdes de las tablas

Tablas anidadas

Al igual que en las listas podemos anidad unas listas dentro de otras, podemos hacer esto mismo con las tablas. Es muy útil a la hora de diseñar. En teoría podmoes anidar infinitas tablas, aunque algunos navegadores pueden llegar a no mostrar correctamente el contenido.

Ejemplo de tabla anidada

Esto es un párrofoEsto es otro párrafo Esta celda contiene otra tabla:

A B
C D

Código de ejemplo

<table border="1px">
<tr>
  <td>
   <p>Esto es un párrofo</p>
   <p>Esto es otro párrafo</p>
  </td>
  <td>Esta celda contiene otra tabla:
    <table border="1px">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
</table>

Ejemplos prácticos

Ejemplo de una tabla en HTML

También podría gustarte