Curso de HTML y CSS: creación, estructura y uso de tablas

Escrito por Adrián Crespo
HTML
0

Aunque sería muy discutible y no todo el mundo piensaría igual, en RedesZone creemos que las tablas en HTML desempeñan un papel muy importante a la hora de llevar a cabo la programación de sitios web haciendo uso de este lenguaje. En la nueva entrega del curso de HTML y CSS no solo vamos a aprender a crear tablas, sino que aprenderemos todo lo relacionado con su estructura y la utilización.

Hay que tener en cuenta que hoy en día, en la programación HTML las tablas pueden ser utilizadas no solo para organizar información, sino que puede servir para distribuir los componentes en una pantalla, o incluso para contener otra tabla con información.

Aunque a la hora de distribuir componentes veremos algo más adelante en el curso que nos va a ayudar y que estéticamente queda mucho más profesional que utilizar una tabla, de momento vamos a regirnos por estas.

Estructura y creación de las tablas HTML

Aunque pueda parecer algo muy engorroso al principio, una vez que se ve la mecánica resulta muy fácil. Partimos de que si queremos crear una tabla, en primer lugar hay que hacer uso de las etiquetas <table></table>, lo que nos debería hacer pensar que todo lo que vaya dentro de esas dos etiquetas será el contenido de la tabla. Teniendo ya la etiqueta de la tabla vamos a aclarar que para declarar filas hay que utilizar las etiquetas <tr></tr>. Es decir, todos los elementos que vayan dentro de estas etiquetas formarán parte de la misma fila. Pero nos queda un tema importante: las columnas. En este caso la forma que tenemos de crear columnas es con las etiquetas <td></td>. Aunque tampoco os queremos mentir, estas etiquetas no crean columnas como tal, sino que permiten la división en celdas de una fila, creando las columnas. Lo que queremos decir es que  se pueden hacer filas con las etiquetas <tr></tr>, pero en el caso de las columnas no es posible y no existe una etiqueta que desempeña tal función.

Para ver esto, vamos a recurrir a un ejemplo en el que vamos a crear una tabla de dos filas y “dos” columnas.

<table>
  <tr>
    <td>Fila 1º, celda numero 1</td>
    <td>Fila 1º, celda numero 2</td>
  </tr>
  <tr>
    <td>Fila 2º, celda numero 1</td>
    <td>Fila 2º, celda numero 2</td>
  </tr>
</table>

Esto se trata de la estructura básica de una tabla y que siempre se cumple. Sin embargo, no nos hemos olvidado de los encabezados. Aunque podría recurrir a la creación de una fila normal haciendo uso de celdas normales, os vamos a enseñar otra etiqueta que permite crear encabezados de columnas en tablas HTML, las etiquetas <th></th>.

Un ejemplo con el que lo vais a ver de forma fácil:

<table border=”1″>
<tr>
<th>Columna 1</th><th>Columna 2</th><th>Columna 3</th>
</tr>
<tr>
<td>Celda de la columna 1</td><td>Celda de la columna 2</td><td>celda de la columna 3</td>
</tr>
</table>

Parámetros de altura, anchura y separación de elementos

Con lo visto en anterioridad se pueden crear tablas de forma básica sin ningún tipo de forma. Sin embargo, todas las etiquetas que conforman las tablas admiten ciertos parámetros que permiten la modificación de la apariencia de estas.

En la siguiente tabla hemos querido recoger la relación entre los modificadores y las etiquetas para tratar de facilitar la comprensión de cuándo se puede utilizar cada uno de ellos.

curso de HTML y CSS parametros etiquetas de tablas

Nota: hay que tener en cuenta que vista la tabla anterior es posible asignar una altura diferente a cada una de las celdas que conforman una fila. Esto no debería suponer un problema para los navegadores y muchos los mostrarían, pero hay que tener en cuenta que la tabla podría mostrarse descuadrada.

Estética de las tablas HTML

Para elegir la ubicación del texto dentro de las celdas, se puede recurrir a dos parámetros que se pueden utilizar en la etiqueta <td>. Nos referimos a los parámetros align y valign, y en ls siguiente tabla se puede ver cómo se usan y qué valores pueden tomar.

curso de HTML y CSS parametros texto tablas

Un ejemplo de todo lo visto hasta el momento

Que mejor para entender todo lo referido con las tablas que hacer un ejemplo en el que se pueda encontrar todo lo que hemos visto en la entrega de hoy del curso de HTML y CSS.

<table width=”70%” cellspacing=”3″ cellpadding=”5″>
<tr>
<td width=”70%” height=”80″ align=”right” valign=”bottom”>Fila numero 1, celda numero 1</td>
<td width=”30%” height=”80″>Fila numero 1, celda numero 2</td>
</tr>
<tr>
<td width=”70%”>Fila numero 2, celda numero 1</td>
<td width=”30%”>Fila numero 2, celda numero 2</td>
</tr>
</table>

Incluso si se quiere personalizar un poco más la apariencia de las celdas se pueden utilizar los parámetros bgcolor y bordercolor, que permiten la asignación de un color de fondo de celda y al borde de la misma, respectivamente.

Pon una tabla en tu vida, pero no muchas más

Como podéis ver las tablas pueden resultar muy cómodas a la hora de determinar la ubicación de elementos en nuestra página web. Sin embargo, y a pesar de que estas pueden contener botones, espacios de texto o incluso otras tablas en su interior, no conviene tampoco abusar de tablas en el diseño de una página, ya que es una de las tareas que más tiempo lleva a los navegadores: conseguir interpretar tablas y ubicar los elementos de forma correcta.

En el siguiente capítulo vamos a comenzar a ver los principales tipos de “input” que existen en HTML y que podemos incluir en nuestro diseño.