GUIA DE TABLAS HTML

Guía 6 Tablas (I)
En este tema vamos a ver cómo trabajar con tablas. Podremos insertar tablas, filas y columnas, y modificar sus propiedades.
Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño.
Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas esposible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizarse.
Tabla
Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna.
 
 

imagen y texto
 
 
COLUMNA
 
 
Texto dentro de una celda
 
 

 
 
 
  

FILA
CELDA
 
Para crear una tabla hay que insertar las etiquetas y . Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla.
Fila
Es necesario insertar las etiquetas y por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiqetas y .
Por ejemplo, para crear una tabla con cinco filas escribiríamos:

  ...
  ...  ...
  ...
  ...

Columna o celda
Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas.
Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila.
Es necesario insertar las etiquetas y porcada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas y .
Entre las etiquetas y se podrá especificar el contenido de cada una de las celdas. Por ejemplo, para insertar la siguiente tabla:

Sabado
Domingo
Curso HTML
Curso Dreamweaver
Curso Frontpage
Curso Flash
Habría que escribir:

  
    Sabado    Domingo
  
  
    Curso HTML
    Curso Dreamweaver
  
  
    Curso Frontpage
    Curso Flash
  

Unidad 6. Tablas (II)
Formato de la tabla
Es posible modificar los siguientes atributos de una tabla:
Atributo
Significado
Posibles valores
width
ancho de la tabla
un número, acompañado de % cuando se desee que sea en porcentaje
height
altura de la tabla
un número, acompañadode % cuando se desee que sea en porcentaje
cellpadding
espacio entre el contenido de las celdas y el borde
un número
cellspacing
espacio entre celdas
un número
border
grosor del borde
un número
align
alineación de la tabla dentro de la página
left (izquierda)
right (derecha)
center (centro)
bgcolor
color de fondo
número hexadecimal
background
imagen de fondo
número hexadecimalbordercolor
color del borde
número hexadecimal
 
Por ejemplo, para modificar la tabla de la página anterior para que quedase como la siguiente:
Sabado
Domingo
Curso HTML
Curso Dreamweaver
Curso Frontpage
Curso Flash
Habría que escribir:

  ...

Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes comprobar cambiando el ancho dela ventana de tu navegador y verás que el ancho de la tabla varía para ocupar siempre la mitad de la ventana), que el borde (border) tiene un grosor de dos píxeles (es más ancho que las separaciones internas de la tabla que tienen grosor 1), que la tabla está alineada al centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla
es negro (#000000) yel fondo naranja (#FFCC99).













Formato de las celdas
 

Es posible modificar los siguientes atributos de una celda:
Atributo
Significado
Posibles valores
width
ancho de la tabla
un número, acompañado de % cuando se desee que sea en porcentaje
height
altura de la tabla
un número, acompañado de % cuando se desee que sea en porcentaje
align
alineación...