Tablas HTML
Una tabla en html viene marcada por las etiquetas <table> </table>. Entre esas dos etiquetas definiremos la tabla, las celdas que queremos, las columnas y las características de cada uno de estos parámetros. Pero vamos a empezar explicándote la etiqueta <table>.
Ya hemos dicho que esta etiqueta nos indica que empieza una tabla, pero… ¿podemos predefinir características de esa tabla? Por supuesto que sí. Una tabla admite muchos parámetros. Nosotros vamos a explicarte los principales.
La tabla HTML: <table>
Como ya ocurre con la etiqueta body, a una tabla también lo podemos definir el fondo de la misma. Esto lo podemos conseguir con el parámetro “bgcolor”, que nos pondrá un color de fondo, o “background” para poner una imagen de fondo. Recuerda que si la imagen es más pequeña que la tabla, ésta se repetirá tanto a lo ancho como a lo largo.
<table bgcolor="#FF0000">
<table background=”URL”>
Otro aspecto que podemos definir de la tabla es el borde. Esto lo haremos con el parámetro “border”. Como en todas los parámetros que ya hemos visto escribiremos: border= “x” siendo la x un número. Ese número indicará el grosor del borde. Si no ponemos borde o lo escribimos “0”, la tabla no mostrará borde ninguno. Por supuesto, también podemos darle color al borde, escribiendo la etiqueta “bordercolor” e indicando el color que queramos para nuestro borde.
<table bgcolor="#FFFF00" border="10" bordercolor="black" >
El parámetro “width” indircará la anchura de la tabla. Esta anchura la podemos poner en píxeles (width= “300”) o con porcentaje (width= “100%”).
<table bgcolor="#FFFF00" border="10" bordercolor="black" width="300" >
Dos parámetros más son cellspacing (que define el espacio entre las celdas de la tabla) y cellpadding (que le marca a la tabla el espacio que debe dejar alrededor del texto dentro de una celda).
Como ejemplo, escribiremos el hipotético supuesto de querer una tabla que sea ancha al 100%, con un borde azul de un píxel de grosor y con un cellpadding de 10 y con un cellspacing de 10. El código quedaría de la siguiente forma.
<table width="100%" border="1" bordercolor="#0000FF" cellspacing="10" cellpadding="10"></table>
Una vez explicadas las tablas, vamos a pasar a explicarte las partes fundamentales de las mismas.
Las filas: <tr>
Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas <tr> con su correspondiente cierre </tr>. El contenido de las columnas que están dentro de la fila lo podemos alínear tanto horizontal como verticalmente.
Para alinearlo verticalmente utilizaremos el atributo “valign” para poder alinearlo arriba de la celda (“top”), en el centro (“middle”) o debajo (“bottom”).
Para alinearlo horizontalmente utilizaremos el atributo “align”. Con este atributo podremos alinear el contenido de las celdas en el centro (“center”), a la izquierda (“left”), a la derecha (“right”) o justificado (“justify”).
Por supuesto a las filas también les podemos definir el color de fondo (“bgcolor”) y el color del borde (“bordercolor”).
Las celdas <td>
Las celdas que van dentro de cada fila tenemos que escribirlas con la etiqueta <td> y su correspondiente cierre </td>.
Al igual que en las filas, en las celdas podemos definir la alineación del contenido que está dentro con los atributos “valign” (vertical) y “align” (horizontal).
<td valign="top">
<td valign="middle">
<td valign="bottom">
<td align="left">
<td align="center">
<td align="right">
Agrupación de celdas
La unificación de celdas es un mecanismo mediante el cual un autor puede combinar o fusionar dos o más celdas adyacentes (
td y th) en una tabla. Este efecto puede lograrse utilizando los atributos colspan, para unificación horizontal, y rowspan, para unificación vertical. Estos atributos pueden tomar un valor entero mayor a cero, que representa el número de celdas que participarán en la unificación.La idea detrás de este mecanismo se explica por sí misma: cuando el atributo
colspan es establecido en una celda, indica a los intérpretes que la misma debe abarcar, no solamente su propio espacio, sino también el espacio de un número de celdas contiguas hacia su derecha. Lo mismo sucede para el atributo rowspan pero hacia abajo. Debido a la estructura de las tablas en HTML, La unificación sólo puede hacerse hacia la derecha o hacia abajo.En el siguiente ejemplo, una celda de la tabla está ocupando el espacio de tres celdas, como lo indica su atributo
colspan. Nota cómo la declaración de las dos celdas a la derecha de esta celda particular han sido omitidas en el código. Esto es algo muy apropiado, ya que el espacio de estas celdas ha sido tomado por la anterior.<table class="egt">
<tr>
<th></th>
<th>Día 1</th>
<th>Día 2</th>
<th>Día 3</th>
<th>Día 4</th>
</tr>
<tr>
<th>Mike (lastimado)</th>
<td colspan="3">0 km</td>
<td>4 km</td>
</tr>
<tr>
<th>Susan</th>
<td>23 km</td>
<td>18 km</td>
<td>19 km</td>
<td>15 km</td>
</tr>
</table>
| Día 1 | Día 2 | Día 3 | Día 4 | |
|---|---|---|---|---|
| Mike (lastimado) | 0 km | 4 km | ||
| Susan | 23 km | 18 km | 19 km | 15 km |
Ahora probaremos el atributo
rowspan. Aunque la idea de unificación es la misma (excepto por la dirección), la estructura de las tablas en HTML hace que la unificación vertical sea un tanto diferente. En la unificación horizontal todo sucedía en la misma fila (la declaración del atributo colspan y la omisión de las celdas contiguas). En la unificación vertical, el atributo rowspan se establece en la celda de una fila en particular y la omisión de las celdas unificadas se realiza en las filas subsiguientes, una a una. Esto significa que si una celda en la primera fila abarca el espaio de tres celdas verticalmente, las filas dos y tres tendrán una celda faltante cada una. Veámoslo con un ejemplo.<table class="egt">
<tr>
<th></th>
<th>Básico</th>
<th>Completo</th>
</tr>
<tr>
<th>Instalación</th>
<td rowspan="2">Gratis!</td>
<td>$49.99</td>
</tr>
<tr>
<th>Primer año</th>
<td>$19.99</td>
</tr>
<tr>
<th>Segundo año</th>
<td>$9.99</td>
<td>$29.99</td>
</tr>
</table>
| Básico | Completo | |
|---|---|---|
| Instalación | Gratis! | $49.99 |
| Primer año | $19.99 | |
| Segundo año | $9.99 | $29.99 |
Si prestas atención verás que la segunda fila del ejemplo anteior, tiene una celda que abraca dos espacios. Por lo tanto, la tercera fila tiene una celda faltante en el código, a saber, su segunda. Esto significa que la segunda celda declarada (en el código) en la tercera fila ("$19.99") representa a la tercera celda de esa fila y no a la segunda.
Cuando se utilizan conjuntamente en una misma tabla, los atributos colspan y rowspan deben ser cuidadosamente declarados de forma que no produzcan celdas superpuestas.
Las celdas <th>
Las celdas escritas con la etiqueta <th> y su correspondiente cierre, admiten los mismos atributos que las etiquetas <td> y funcionan de la misma forma, salvo que el contenido que esté dentro de una etiqueta <th> está considerado como el encabezado de la tabla, por lo que se creará en negrita y centrado sin que nosotros se lo indiquemos.
A continuación vamos a ponerte un pequeño ejemplo de una tabla que combina todas las cosas que hemos ido viendo en el artículo. Estúdiate primero el código, visualiza cómo quedaría la tabla y luego mírala:
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
<tr>
<td rowspan="2" valign="middle" align="left">Este texto está alineado al centro
verticalmente y a la izquierda horizontalmente</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
| Encabezado 1 | Encabezado 2 | Encabezado 3 |
|---|---|---|
| Este texto está alineado al centro verticalmente y a la izquierda horizontalmente | ||
nowrap
nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligará al navegador a no romper esa línea, o sea, a no hacer ningún salto de línea. Con este atributo en la celda, el navegador no respeta el ancho predefinido de la tabla, si es que lo hubiera, y respeta el ancho de la frase, ya que no puede partirla.
Por tanto, si la frase es más larga que el ancho definido de la tabla, ésta se estirará todo lo necesario para albergar la frase sin saltos de línea. El siguiente código nos mostrará como escribir este atributo en la etiqueta de la celda:
<table width="400" border="1" cellpadding="10" cellspacing="0" bordercolor="#000000">
<tr>
<td nowrap>Aunque este texto sea más ancho que los 400 píxeles
de la tabla, ésta no puede dividir mediante saltos de línea
el contenido de la misma, por lo que se estira para albergar toda la frase.</td>
</tr>
</table>
Y a continuación podemos ver el efecto del atributo:
| Aunque este texto sea más ancho que los 400 píxeles de la tabla, ésta no puede dividir mediante saltos de línea el contenido de la misma, por lo que se estira para albergar toda la frase. |
Etiqueta “caption”
Esta etiqueta sirve para poder ponerle un título o encabezado a la tabla. Puedes poder el encabezado arriba o abajo, dónde tu prefieras, mediante la etiqueta “align”: “align=top” para ponerlo arriba y “align=bottom” para ponerlo abajo. En el siguiente ejemplo nosotros lo hemos puesto abajo.
<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
<caption align="bottom">Encabezado de la tabla.</caption>
<tr>
<td align="center">Tablita de ejmplo para la etiqueta "caption"</td>
</tr>
</table>
| Tablita de ejmplo para la etiqueta "caption" |
EJERCICIO
Crea un documento con una tabla HTML que tenga la apariencia de la tabla indicada a continuación. La primera fila debe estar compuesta por elementos de encabezado de tabla (th). No te preocupes por el centrado de los textos, sino únicamente por que las subdivisiones en la tabla aparezcan correctamente.
Tutorial de HTML (XI)
[…] Tutorial de HTML (X) […]
ResponderEliminar[…] Tutorial de HTML (X) […]
ResponderEliminar