Facultad de Ingeniera

TABLAS con HTML

Ing. Ral Jimenez

Facultad de Ingeniera

Tablas con HTML

En esta parte podremos insertar
tablas, filas y columnas, y modificar
sus propiedades.
La mayora de las pginas web se
basan en tablas, ya que resultan de
gran utilidad al mejorar notablemente
las opciones de diseo.
Ing. Ral Jimenez

Facultad de Ingeniera

Creacin de Tablas :
<TR> = Filas

<TD> = Columnas

Ing. Ral Jimenez

Facultad de Ingeniera

Atributos de una Tabla

Atributo

Significado

Posibles valores

width

ancho de la tabla

un nmero, acompaado de % cuando se

desee que sea en porcentaje

height

altura de la tabla

un nmero, acompaado de % cuando se

desee que sea en porcentaje

cellpadding

espacio entre el contenido de las

celdas y el borde

un nmero

cellspacing

espacio entre celdas

un nmero

border

grosor del borde

un nmero

align

alineacin de la tabla dentro de la

pgina

left (izquierda)
right (derecha)
center (centro)

bgcolor

color de fondo

nmero hexadecimal

background

imagen de fondo

nmero hexadecimal

bordercolor

color del borde

nmero hexadecimal

Ing. Ral Jimenez

Facultad de Ingeniera

Por Ejemplo,
Modificando la tabla de la pgina anterior de la forma :

Sbado

Domingo

Curso HTML

Curso Dreamweaver

Curso Frontpage

Curso Flash

<table width="50%" border="2" align="center"

cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99">
...

</table>
Ing. Ral Jimenez

Facultad de Ingeniera

Formato de Celdas
: Es posible modificar los siguientes atributos de una celda:
Atributo

Significado

Posibles valores

width

ancho de la tabla

un nmero, acompaado de % cuando se desee que sea en

porcentaje

height

altura de la tabla

un nmero, acompaado de % cuando se desee que sea en

porcentaje

align

alineacin horizontal del

contenido de la celda

left (izquierda)
right (derecha)
center (centro)

valign

alineacin vertical del

contenido de la celda

baseline (lnea de base)

bottom (inferior)
middle (medio)
top (superior)

bgcolor

color de fondo

nmero hexadecimal

background

imagen de fondo

nmero hexadecimal

bordercolor

color del borde

nmero hexadecimal

Tambin es posible modificar estos atributos de toda una fila, especificndolos

en la etiqueta <tr>, en lugar de en la etiqueta <td>.
Ing. Ral Jimenez

Facultad de Ingeniera

Ing. Ral Jimenez

Facultad de Ingeniera

Combinar Celdas

Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que
se utilizan para combinar celdas.
A travs del atributo colspan se especifica el nmero de columnas por las
que se extender la celda, y a travs del atributo rowspan se especifica el
nmero de filas por las que se extender la celda.

Ing. Ral Jimenez

Facultad de Ingeniera

Ing. Ral Jimenez

Facultad de Ingeniera

MAQUETA CON TABLAS

Facultad de Ingeniera

Ing. Ral Jimenez

Maqueta

Facultad de Ingeniera

Ing. Ral Jimenez

Facultad de Ingeniera

ACTIVIDAD
Mediante el uso de tablas con
HTML, disee la pagina de su
Hoja de Vida.

Tecnologa para el Comercio Exterior

Ing. Ral Jimenez Drago