Informática Secundaria y Bachillerato

TABLAS

Las etiquetas básicas para crear una tabla son:

<table>: Inserta una tabla.
<tr>: Inserta una fila de celdas.
<td>: Inserta una celda.
<th>: Inserta una celda de encabezado.

Los atributos básicos para crear una tabla son:

<width>: Define el ancho de la tabla. Puede darse en pixeles o en porcentaje.
<border>: Define el grosor del borde.
<align>: Define la ubicación de la tabla en el documento.
<bgcolor>: Define el color del fondo de la tabla.

Las anteriores son las características básicas para crear una tabla. Otras, como fuente del texto, tamaño de las letras, distancias entre los bordes y el contenido, etc, se nos darán por defecto.

Veamos un ejemplo de tabla elemental:

Las tablas más elementales de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr>para crear cada fila y <td> para crear cada columna.

Éste es el código:

<table border="1" width="80%" align="center" bgcolor="#088A85">
  <tr>
    <td>Celda 1, fila 1</td><td>celda 2, fila 1</td><td>celda 3, fila 1</td>
    <td>Celda 4, fila 1</td><td>Celda 5, fila 1</td>
  </tr>
  <tr>
    <td>Celda 1, fila 2</td><td>celda 2, fila 2</td><td>celda 3, fila 2</td>
    <td>Celda 4, fila 2</td><td>Celda 5, fila 2</td>
  </tr>
  <tr>
    <td>Celda 1, fila 3</td><td>celda 2, fila 3</td><td>celda 3, fila 3</td>
    <td>Celda 4, fila 3</td><td>Celda 3, fila 3</td>
  </tr>
  <tr>
    <td>Celda 1, fila 4</td><td>celda 2, fila 4</td><td>celda 3, fila 4</td>
    <td>Celda 4, fila 4</td><td>Celda 5, fila 4</td>
  </tr>
</table>

Y ésta es la tabla:

Celda 1, fila 1	celda 2, fila 1	celda 3, fila 1	Celda 4, fila 1	Celda 5, fila 1
Celda 1, fila 2	celda 2, fila 2	celda 3, fila 2	Celda 4, fila 2	Celda 5, fila 2
Celda 1, fila 3	celda 2, fila 3	celda 3, fila 3	Celda 4, fila 3	Celda 3, fila 3
Celda 1, fila 4	celda 2, fila 4	celda 3, fila 4	Celda 4, fila 4	Celda 5, fila 4

A continuación se muestra el código HTML de una tabla sencilla:

<table border="1" width="250px" align="center">
<tr align="center">
  <th><center><strong>Curso</strong></center></th>
  <th><center><strong>Horas</strong></center></th>
  <th><center><strong>Horario</strong></center></th>
</tr>

<tr>
  <td>CSS</td>
  <td>20</td>
  <td>16:00 - 20:00</td>
</tr>

<tr>
  <td>HTML</td>
  <td>20</td>
  <td>16:00 - 20:00</td>
</tr>

<tr>
  <td>Dreamweaver</td>
  <td>60</td>
  <td>16:00 - 20:00</td>
</tr>
</table>

Si ponemos este código en la edición HTML para crear una entrada en nuestro blog de Blogger, éste será el resultado:

Curso	Horas	Horario
CSS	20	16:00 - 20:00
HTML	20	16:00 - 20:00
Dreamweaver	60	16:00 - 20:00

Tabla de una columna con encabezado

Aunque las etiquetas <th> y </th> encierran un encabezado, algunos navegadores no lo ubican en el centro. Para asegurarnos que el encabezado quede en el centro lo encerramos entre las etiquetas<center> y </center>:

Éste es el código:

<table border="1" width="253px" align="center">
<tr>
<th>
<center>Enlaces</center>
</th>
</tr>
<tr>
<td>
XML en 10 puntos
</td>
</tr>
<tr>
<td>
Pautas de Accesibilidad al Contenido en la Web 1.0
</td>
</tr>
<tr>
<td>
Especificación del Modelo de Objetos del Documento (DOM), Nivel 1
</td>
</tr>
<tr>
<td>
Document Object Model (DOM) Level 2
</td>
</tr>
</table>

Así se verá la tabla:

Enlaces

XML en 10 puntos

Pautas de Accesibilidad al Contenido en la Web 1.0

Especificación del Modelo de Objetos del Documento (DOM), Nivel 1

Document Object Model (DOM) Level 2

La etiqueta <table> encierra todas las filas y columnas de la tabla. Las etiquetas <tr> (del inglés "table row") definen cada fila de la tabla y encierran todas las columnas. Por último, la etiqueta <td> (del inglés"table data cell") define cada una de las columnas de las filas, aunFusión de columnas

La siguiente es una tabla compleja en la que se han fusionado dos columnas simples para formar una columna más ancha:

Fila de una columna
Primera columna de una fila de dos	Segunda columna de una fila de dos

Para obtener una tabla como la de la imagen anterior, se debe utilizar el siguiente código:

<table border="1" width="250px" align="center">
<tr>
  <th colspan="2">Fila de una columna</th>
</tr>

<tr>
  <td>Primera columna de una fila de dos</td>
  <td>Segunda columna de una fila de dos</td>
</tr>
</table>

La primera fila de la tabla está formada sólo por una columna, mientras que la segunda fila está formada por dos columnas. En principio, podría pensarse en utilizar el siguiente código HTML para definir la tabla:

Sin embargo, si se utiliza el código anterior, el navegador visualiza de forma incorrecta la tabla, ya que las tablas en HTML deben disponer de una estructura regular. En otras palabras, todas las filas de una tabla HTML deben tener el mismo número de columnas. Por lo tanto, si se quieren mostrar menos columnas en una fila, se fusionan mediante el atributo colspan, que indica el número de columnas simples que va a ocupar una determinada celda.

En el ejemplo anterior, la celda de la primera fila debe ocupar el espacio de dos columnas simples, por lo que el código HTML debe ser:

<td colspan="2">Fila de una columna</td>.

Fusión de filas

A: Primera fila fusionada	C: Fila que fusiona A y B
B: Segunda fila fusionada

De forma equivalente, si se quiere diseñar una tabla HTML que fusiona filas, como la siguiente:

A: Primera fila fusionada C: Fila que fusiona A y B

B: Segunda fila fusionada

El código HTML que se debe utilizar es el siguiente:

<table border="1" width="250px" align="center">
<tr>
  <td>A: Primera fila fusionada</td>
  <td rowspan="2">C: Fila que fusiona A y B</td>
</tr>

<tr>
  <td>B: Segunda fila fusionada</td>
</tr>
</table>

De forma análoga a la fusión de columnas del ejemplo anterior, la fusión de filas debe indicarse de forma especial. Como las tablas HTML tienen que ser regulares, todas las columnas deben tener el mismo número de filas. Así, si en el ejemplo anterior se utilizara el siguiente código:

La tabla anterior no se visualizaría correctamente. Como la segunda columna de la tabla ocupa el espacio de las dos filas, el código HTML debe indicar claramente que esa celda va a ocupar dos filas, de manera que todas las columnas de la tabla cuenten con el mismo número de filas.

Utilizando los atributos rowspan y colspan, es posible diseñar tablas tan complejas como las que se muestran en los siguientes ejemplos.

Fusión de múltiples columnas:

A			B
C	D		E
F
G	H	I	J

El código HTML necesario para fusionar las columnas de la tabla anterior es el siguiente:

<table border="1" width="250px" align="center">
<tr>
  <td colspan="3">A</td>
  <td>B</td>
</tr>

<tr>
  <td>C</td>
  <td colspan="2">D</td>
  <td>E</td>
</tr>

<tr>
  <td colspan="4">F</td>
</tr>

<tr>
  <td>G</td>
  <td>H</td>
  <td>I</td>
  <td>J</td>
</tr>
</table>

Fusión de múltiples filas:

A	B	C	D
E	F		G
E	H
I	J	K

El código HTML necesario para fusionar las filas de la tabla anterior es el siguiente:

<table border="1" width="250px"align="center">
  <tr>
    <td>A</td>
    <td>B</td>
    <td rowspan="3">C</td>
    <td>D</td>
  </tr>
  <tr>
    <td rowspan="2">E</td>
    <td>F</td>
    <td rowspan="3">G</td>
  </tr>
  <tr>
    <td>H</td>
  </tr>
  <tr>
    <td>I</td>
    <td>J</td>
    <td>K</td>
  </tr>
</table>

clases

TABLAS