TABLAS

Las tablas en HTML son elementos muy útiles y su principal uso es organizar el contenido de las páginas. Directamente no podemos situar una imagen o un texto donde queramos, así que las tablas nos ayudan a conseguirlo.

Elementos básicos de una tabla:

  • Etiqueta <table></table>: sirve para definir una tabla. Sus atributos son:
Atributo Valor Descripción
summary texto

Contiene un resumen del propósito de la tabla y de la estructura para navigadores no visuales como los navegadores Braille.

align left|center|right Indica la posición de la tabla dentro del elemento que lo contiene.
width píxeles ó % Indica el ancho de la tabla.
height píxeles ó % Indica el alto de la tabla.
border entero Indica el grosor del borde de la tabla en pixels. Con border=0 no se muestra el borde.
cellspacing píxeles Indica el número de espacios en blanco que se deben insertar entre las celdas (ver figura)
cellpadding píxeles Indica el número de espacios en blanco que se deben insertar dentro de la celda (ver figura)
bgcolor color Color de fondo de la tabla

  • Etiqueta <caption></caption>: título de la tabla. Atributos:

    align = top | bottom | left | right. Especifica la posición del título con respecto a la tabla.

  • La etiqueta <tr></tr> sirve para definir las filas de la tabla
  • La etiqueta <th></th> define una celda de encabezamiento y <td></td> define una celda de datos.

    Atributos de las celdas:

Atributo Valor Descripción
rowspan entero

número de filas abarcado por la celda actual

colspan entero número de columnas abarcado por la celda actual
align left|center|right|justify| alineación de los datos y la justificación del texto de una celda
valign top|middle|bottom|baseline posición vertical de los datos dentro de una celda
bgcolor color Color de fondo de la celda

Ejemplo:

<table width="90%" border="1" cellspacing="3" cellpadding="1" align="center" bgcolor="#BC3F3F">
    <caption><b>Título</b></caption>
    <tr>
        <th align="center" valign="middle" bgcolor="#802B2B"><font color="#FFFFFF">Cabecera 1</font></th>
        <th align="center" valign="middle" bgcolor="#802B2B"><font color="#FFFFFF">Cabecera 2</font></th>
    </tr>
    <tr>
        <td align="center"><font color="#FFFFFF">1</font></td>
        <td align="center"><font color="#FFFFFF">2</font></td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <font color="#FFFFFF">3</font>
            <font color="#FFFFFF">4</font>
        </td>
    </tr>
    <tr>
        <td align="center"><font color="#FFFFFF">5</font></td>
        <td rowspan="2" bgcolor="#DDDDDD" align="center">
            <font color="#FFFFFF">6</font>
            <font color="#FFFFFF">8</font>
        </td>
    </tr>
    <tr>
        <td align="center"><font color="#FFFFFF">7</font></td>
    </tr>
</table>

Título
Cabecera 1 Cabecera 2
1
2
3
4
5
6
8
7

Las tablas se pueden anidar.

Ejercicio:

En el documento index.html crear la siguiente tabla:

TABLA PRUEBA
Texto1
Texto 2
TABLA 2
celda 1
celda 2
celda 3
celda 4
Otra fila

 

   Ejemplo de Tabla para crear la estructura de una página web:
Menú Cabecera
contenido
pié

   El código HTML sería:

   <table width="90%" height="90%" border="1" cellspacing="3" cellpadding="1" align="center">
      <tr>
   	   <td rowspan="3" width="20%"> Menú</td>
	   <td height="15%">Cabecera</td>
      </tr>
      <tr height="80%">
	   <td>contenido</td>
      </tr>
      <tr>
	   <td>pié</td>
      </tr>
   </table>