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.
Resumen del Contenido
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:

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:
|
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
- Tablas sin bordes
Cómo crear tablas sin bordes. - Tabla con encabezados
Cómo crear encabezados de tabla. - Tabla con un título, caption
Cómo agregar un título a una tabla. - Tabla celdas que abarcan más de una fila o columna
Cómo combinar celdas de una tabla. - Etiquetas dentro de una tabla
Cómo mostrar los elementos dentro de otros elementos. - Relleno de celda, cellpadding
Cómo utilizar cellpadding para crear más espacio en blanco entre el contenido de la celda y sus fronteras. - Espaciado entre celdas, cellspacing
Cómo utilizar cellspacing para aumentar la distancia entre las células. - El atributo frame en una tabla
Cómo utilizar el atributo «frame» para el control de los bordes de una tabla.
