I. Cómo se crea una tabla

UNIVERSIDAD CATÓLICA LOS
ÁNGELES DE CHIMBOTE
Sesión: Creación de Tablas
05-A HTML.
ING. CIP Edgar A. Cruz Huaman
I. Cómo se crea una tabla
•
•
•
•
<TABLE>…</TABLE>.
Filas
: <TR>…</TR>
Encabezado de Tabla : <TH>…</TH>
Datos de Tabla
: <TD>…</TD>
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
Ejercicio Nº 01
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
II. Bordes de la Tabla
• Atributo BORDER=“n”.
– <Table border=“5”>
• Ejercicio 2:
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
Ejercicio Nº 03
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
III. Insertar un título para la tabla
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
Ejercicio Nº 04
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
IV. Alineamiento de tablas
• <TABLE border="1" align="right">
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
V. Alineamiento de celdas y filas
• Alineamiento horizontal:
– ALIGN="left“
– ALIGN="center“
– ALIGN="right“
• Alineamiento vertical:
– VALIGN="top"
– VALIGN="middle“
– VALIGN=" bottom"
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
VI. Ancho de tablas y celdas
• Atributos: WIDTH y HEIGHT
• <TABLE border =“1” width="600" height="500">
• <TABLE border =“1” width=“80%" height=“900">
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
Ejercicio Nº 05
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
VI. Etiqueta <DIV>
• <TD width="300">
<div align="center">Texto centrado<br></div>
<div align="right">Texto a la derecha<br></div>
</TD>
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
Ejemplo1
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
VII. Atributo NOWRAP
• <TD nowrap>Texto en una sola linea.
</TD>
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
Ejemplo
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
VIII. Celdas que abarcan varias filas o
columnas.
• Atributos: ROWSPAN y COLSPAN.
• <TD ROWSPAN="2">
Celda de dos filas
</TD>
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
Ejercicio Nº 07
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
IX. Márgenes y separación de celdas
• CELLSPACING
• CELLPADDING
• <TABLE BORDER="1" cellspacing="10"
cellpadding=“50">
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
Ejemplo
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman
UNIVERSIDAD CATÓLICA LOS ÁNGELES DE CHIMBOTE
Ing. Edgar A. Cruz Huaman