Tablas en HTML

  • 19 de diciembre de 2001
  • Valoración:
  • 11 Comentarios
  • Manuales de HTML
Vemos lo que son las tablas, para que sirven y en qué casos podemos utilizarlas. Vemos la tabla más simple posible.
Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos. HTML dispone de una gran variedad de etiquetas para crear tablas, de las cuales veremos una introducción en este artículo.

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.

Hoy, gran parte de los diseñadores de páginas basan su maquetación en este tipo de artilugios. En efecto, una tabla nos permite organizar y distribuir los espacios de la manera más adecuada. 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.

Actualizado: Estamos en 2011 y hablar de las tablas como solución para maquetación ha pasado a la historia. Las webs de primera y segunda generación utilizaban este recurso intensivamente para maquetar contenidos en páginas web, además de otros como los píxeles transparentes para conseguir efectos como márgenes o espacios en blanco. Sin embargo, las webs actuales, o tercera generación, han acabado con todas esas técnicas que no hacían más que ensuciar el código fuente de las páginas web, mezclando presentación y contenido. Actualmente toda la maquetación de una página se organiza con CSS, lo que nos da un mayor control de todos los elementos de la página y la posibilidad de separar todos los estilos para definir el aspecto de una web en un fichero aparte del HTML.

Por ello, en el momento actual las tablas se utilizan mucho menos que en el pasado y realmente la recomendación es usarlas solo en los casos en los que necesitemos incluir en una página información tabulada, es decir, dispuesta en filas y columnas. Todo uso basado en tablas para procurar colocar elementos en determinadas posiciones de la página sería incorrecto en las técnicas actuales de diseño de páginas web.

Como veremos a continuación, existen diversas etiquetas que se deben utilizar en una forma determinada para la creación de tablas. Por ello, puede que en un principio nos resulte un poco complicado trabajar con estas estructuras pero, con un poco de práctica podremos crear tablas con absoluta soltura. Si deseamos mostrar datos de una manera sencilla de leer, dispuestos en filas y columnas, tarde o temprano observaremos que las tablas son la mejor solución y apreciaremos las posibilidades nos ofrecen.

Para empezar, nada más sencillo que por el principio: las tablas son definidas por las etiquetas <table> y </table>.

Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e imágenes que darán forma y contenido a la tabla.

Las tablas son descritas por líneas de izquierda a derecha. Cada una de estas líneas es definida por otra etiqueta y su cierre: <tr> y </tr>

Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por otro par de etiquetas: <td> y </td>. Dentro de estas etiquetas será donde coloquemos nuestro contenido.

Aquí tenéis un ejemplo de estructura de tabla:

<table>
<tr>
<td>Celda 1, linea 1</td>
<td> Celda 2, linea 1</td>
</tr>
<tr>
<td> Celda 1, linea 2</td>
<td> Celda 2, linea 2</td>
</tr>
</table>

El resultado:

Celda 1, linea 1 Celda 2, linea 1
Celda 1, linea 2 Celda 2, linea 2

Nota: Hasta aquí hemos visto todas las etiquetas que necesitamos conocer para crear tablas. Existen otras etiquetas, pero lo que podemos conseguir con ellas se puede conseguir también usando las que hemos visto.

Por poner un ejemplo, señalamos la etiqueta <th>, que sirve para crear una celda cuyo contenido esté formatedo como un título o cabecera de la tabla. En la práctica, lo que hace es poner en negrita y centrado el contenido de esa celda, lo que se puede conseguir aplicando las correspondientes etiquetas dentro de la celda. Así:

<td align="center"><b>contenido de la celda</b></td> .

A partir de esta idea simple y sencilla, las tablas adquieren otra magnitud cuando les incorporamos toda una batería de atributos aplicados sobre cada tipo de etiquetas que las componen. A lo largo de los siguientes capítulos nos adentraremos en el estudio de estos atributos de manera a proporcionaros los útiles indispensables para una buena puesta en página.

Podemos continuar las explicaciones de tablas en los artículos:

- Atributos para filas y celdas
- Atributos de la tabla y conclusión
- Bordes de tabla en HTML 4

Adicionalmente, queremos destacar la existencia de un vídeo que trata sobre varios de los temas explicados en este y los próximos artículos: Videotutorial sobre las tablas en HTML.

Autor

Rubén Alvarez

Redactor de DesarrolloWeb.com

Comentarios

Albert Cassadó

24/7/2004
Faltaria detallar como poner un titulo a la tabla con las etiquetas
<caption>Nombre de la tabla</caption>
entre la etiqueta <table> i la primera celda.

sandy cervantes

20/3/2009
Las tablas son realmente de una gran utilidad, bien elaboradas captaran la atencion e interes del publico a quien va dirigida la información.
Si bien parece un tanto complejo el realizarlas, tambien lo es que siguiendo paso por paso las instrucciones señaladas, es decir, poner en práctica, podremos lograr muy buenos resultados.

Javier

10/2/2010
Tablas dinamica
quiero hacer una tabla como la que tienes de noticias yo hice una pero el texto pasa muy rapido y no se alcanza a leer lo que dice me gustaria tener una tabla como la que tienes tu de noticias

napo

22/3/2010
agradecimiento
a aquellos que han hecho posible la informacion de las tablas gracias por esas formas de darnos una mano

ladera agustin

15/7/2010
HTML
El trabajo que has hecho referente a HTML es excelente, tiene buena explicación y esta bien documentado

SHERLIN

05/2/2011
HTML
EL TRABAJO QUE HAS HECHO REFERENTE A HTML ES EXCELENTE,TIENE BUENA PRECENTACION Y ESTA BIEN DOCUMENTADA

Daniel

21/2/2011
Corrección semántica
Me encantan los artículos que publicas. En concreto éste me parece muy completo y muy elaborado. Sólo quería comentarte que hay una expresión que no es correcta en castellano. La expresión es "más óptima". No es correcta porque "óptimo/a" es un superlativo, de tal forma que no puede ser mayor o menor, más o menos. Siempre es lo mejor. Si algo es "más óptimo" que otra cosa, significa que la otra cosa no era óptima. Digamos que óptimo sólo puede ser un objeto.

Sólo eso, es que me ha parecido todo muy correcto excepto ese detalle, y al chocarme tanto me ha resultado interesante comentártelo.

Gatita salvaje

08/5/2013
Es una mierda pinchada en un palo
NO me gusta nada, no está bien documentado y es muy liante

loc@3000

13/5/2013
menuda mierda
Es muy liante, y no hay quien lo entienda

olaaaaa

13/5/2013
caca
caca, caca, caca, ,caca

y a ti que te importa

14/5/2013
caca
eso no es más que caca. Por tu culpa tengo que hacer eso que has puesto en mi clase de informatica. cacacacacacacac

Compartir