sesion nº7 creacion de tablas en html ing. edgar cruz

Sesión 07:

Ing. Edgar A. Cruz Huaman

INSTITUTO SUPERIOR TECNOLÓGICO INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”“SAN PEDRO”

Creación de Tablas HTML.

INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman

I. Cómo se crea una tablaI. Cómo se crea una tabla

• <TABLE>…</TABLE>.

• Filas : <TR>…</TR>

• Encabezado de Tabla : <TH>…</TH>

• Datos de Tabla : <TD>…</TD>


Ejercicio Nº 01Ejercicio Nº 01


II. Bordes de la TablaII. Bordes de la Tabla

• Atributo BORDER=“n”.– <Table border=“5”>

• Ejercicio 2:


III. Insertar un título para la tablaIII. Insertar un título para la tabla


IV. Alineamiento de tablasIV. Alineamiento de tablas

• <TABLE border="1" align="right">


V. Alineamiento de celdas y filasV. Alineamiento de celdas y filas

• Alineamiento horizontal:– ALIGN="left“– ALIGN="center“– ALIGN="right“

• Alineamiento vertical:– VALIGN="top"– VALIGN="middle“– VALIGN=" bottom"


VI. Ancho de tablas y celdasVI. Ancho de tablas y celdas

• Atributos: WIDTH y HEIGHT• <TABLE border =“1” width="600" height="500">• <TABLE border =“1” width=“80%" height=“900">


VI. Etiqueta <DIV>VI. Etiqueta <DIV>

• <TD width="300"><div align="center">Texto

centrado<br></div>

<div align="right">Texto a la derecha<br></div>

</TD>


Ejemplo1Ejemplo1


VII. Atributo NOWRAPVII. Atributo NOWRAP

• <TD nowrap>Texto en una sola linea.

</TD>


EjemploEjemplo


VIII. Celdas que abarcan varias filas o columnas.

VIII. Celdas que abarcan varias filas o columnas.

• Atributos: ROWSPAN y COLSPAN.

• <TD ROWSPAN="2">

Celda de dos filas

</TD>


IX. Márgenes y separación de celdasIX. Márgenes y separación de celdas

• CELLSPACING

• CELLPADDING

• <TABLE BORDER="1" cellspacing="10" cellpadding=“50">


EjemploEjemplo

sesion nº7 creacion de tablas en html ing. edgar cruz

Education