XHTML

 

Tablas

Las etiquetas

Disponemos de las siguientes etiquetas para crear una tabla:

Un ejemplo:

<table>
<caption>Torneo de Linares</caption>
<tr>
<th>Jugadores</th>
<th>Clasifiación</th>
</tr>
<tr>
<td>Garry Kasparov</td>
<td>1</td>
</tr> <tr>
<td>Anatoly Karpov</td>
<td>2</td>
</tr> <tr>
<td>Vladimir Kraminik</td>
<td>2</td>
</tr>
</table>

Atributos de la etiqueta <table>

La etiqueta <table> dispone de una serie de atributos que nos permiten modificar su borde y los márgenes de las celdas. Para cambiar el tamaño del borde de la tabla, usamos border con un valor en píxeles. Si no indicamos nada, los navegadores suelen tomar como valor por defecto 1 o 0. Si no queremos ningún borde, debemos utilizar border="0". Si lo que queremos es cambiar la distancia entre una celda y otra, empleamos
el atributo cellspacing con un valor en píxeles. Y para modificar la distancia del contenido de la celda a los bordes de esta, usamos cellpadding.

<table border="2" cellpadding="10" cellspacing="30">
<caption>Torneo de Linares</caption>
<tr>
<th>Jugadores</th>
<th>Clasifiación</th>
</tr>
<tr>
<td>Garry Kasparov</td>
<td>1</td>
</tr> <tr>
<td>Anatoly Karpov</td>
<td>2</td>
</tr> <tr>
<td>Vladimir Kraminik</td>
<td>3</td>
</tr>
</table>

Expandir celdas

El atributo colspan de la etiqueta <td> o <th> sirve para expandir una celda horizontalmente.

Por ejemplo:

<table border="2" cellpadding="5" cellspacing="5">
<caption>Torneo de Linares</caption>
<tr>
<th colspan="2">Jugadores</th>
<th>Clasifiación</th>
</tr>
<tr>
<td>Garry Kasparov</td> <td>Anatoly Karpov</td>
<td>1</td>
</tr> <tr>
<td colspan="2">Vladimir Kraminik</td>
<td>2</td>
</tr>
</table>

En la etiqueta de la primera celda de la primera fila aparece el atributo colspan y su valor 2. Este código indica que esta celda se extenderá a la derecha hasta tener una longitud equivalente a 2 celdas.

El atributo rowspan de la etiqueta <td> o <th> sirve para expandir una celda verticalmente.

Por ejemplo:

<table border="2" cellpadding="10" cellspacing="5">
<caption>Torneo de Linares</caption>
<tr>
<th>Jugadores</th>
<th>Clasifiación</th>
</tr>
<tr>
<td>Garry Kasparov</td>
<td rowspan="2">1</td>
</tr>
<tr>
<td>Anatoly Karpov</td>
</tr>
<tr>
<td>Vladimir Kraminik</td>
<td>2</td>
</tr>
</table>

En la etiqueta <td> de la segunda celda de la segunda fila aparece el atributo rowspan y su valor es 2. Este código indica que esta celda se extenderá abajo hasta tener una altura equivalente a 2 celdas.

Ejercicios

Ejercicio 1

Crea un documento XHTML con una tabla de 3 filas, 5 columnas, un borde de 1 píxel, un margen de relleno de celdas de 5 píxeles y sin espacio entre las celdas.

Ejercicio 2

Utiliza el atributo colspan para obtener tablas con la siguiente estructura:

   
     
 
     
   
       

Ejercicio 3

Utiliza el atributo rowspan para obtener tablas con la siguiente estructura:

   
 
   
   
 
 
   
 
   
 

Ejercicio 4

Utiliza los atributos rowspan y colpsan para obtener tablas con la siguiente estructura: