Html

REPUBLICA BOLIVARIANA DE VENEZUELA
UNIVERSIDAD PEDAGOGICA EXPERIMENTAL LIBERTADOR
INSTITUTO PEDAGOGICO RURAL “EL MACARO

Tablas HTML

Autor
Maikel Bello
Informática cohorte A 2008-1

Turmero, marzo, 2012
Tablas HTML
Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de información. Aún cuando muchos sitios son construidos (por su naturaleza) sinusar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve esencial.
Creación de tablas HTML
Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde cada una de ellas contiene un grupo de celdas (y no al revés). Las tablas, como toda estructura en los documentos HTML, son definidas usando elementos. Entonces, una tabla simple puede serinsertada en un documento HTML usando tres elementos: el elemento HTML table (estructura contenedora principal), el elemento HTML tr (contenedor de fila) y el elemento HTML td (celda). Veamos un ejemplo:
Código
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda5</td>
<td>Celda 6</td>
</tr>
</table>
Vista
Celda 1 | Celda 2 | Celda 3 |
Celda 4 | Celda 5 | Celda 6 |
Nota: los bordes en este ejemplo fueron establecidos mediante el uso de CSS para mejorar la visualización. Te recomiendo evitar el uso de atributos presentacionales como "border" ya que son candidatos a ser desaprobados en el futuro.
Además, nota que, lasceldas vacías deben ser declaradas utilizando sus respectivos tags para lograr una forma correcta en el código. Cuando el contenido de una celda debe ser vacío, deberías usar una espacio en blanco ( ) como su contenido. Esto hará que tu página sea más compatible ya que algunos navegadores tienen problemas representando celdas vacías.

Formato de tablas.
Es posible modificar lossiguientes 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ñado de % 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 | unnú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 hexadecimal |
bordercolor | color del borde | número hexadecimal |

Por ejemplo, para modificar una quedara de la siguiente manera:
Sabado | Domingo|
Curso HTML | Curso Dreamweaver |
Curso Frontpage | Curso Flash |

Habría que escribir:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99">
</table>
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 de la ventana de tu navegador y verás queel 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) y el 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 horizontal del contenido de la celda | left (izquierda)...