sesion nº7 creacion de tablas en html ing. edgar cruz
DESCRIPTION
Tópicos Especiales: Sesion Nº7 Creacion De Tablas En Html - En esta sesion aprendera como crear tablas y modificarlas atraves de puro codigo. Etiquetas TH, TR, TD, bordes, captio, align, div, nowrap, rowspan, colspan, cellpadding, cellspacing, etc.TRANSCRIPT
![Page 1: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/1.jpg)
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.
![Page 2: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/2.jpg)
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>
![Page 3: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/3.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
Ejercicio Nº 01Ejercicio Nº 01
![Page 4: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/4.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
II. Bordes de la TablaII. Bordes de la Tabla
• Atributo BORDER=“n”.– <Table border=“5”>
• Ejercicio 2:
![Page 5: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/5.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
Ejercicio Nº 03Ejercicio Nº 03
![Page 6: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/6.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
III. Insertar un título para la tablaIII. Insertar un título para la tabla
![Page 7: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/7.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
Ejercicio Nº 04Ejercicio Nº 04
![Page 8: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/8.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
IV. Alineamiento de tablasIV. Alineamiento de tablas
• <TABLE border="1" align="right">
![Page 9: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/9.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
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"
![Page 10: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/10.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
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">
![Page 11: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/11.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
Ejercicio Nº 05Ejercicio Nº 05
![Page 12: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/12.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
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>
![Page 13: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/13.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
Ejemplo1Ejemplo1
![Page 14: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/14.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
VII. Atributo NOWRAPVII. Atributo NOWRAP
• <TD nowrap>Texto en una sola linea.
</TD>
![Page 15: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/15.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
EjemploEjemplo
![Page 16: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/16.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
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>
![Page 17: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/17.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
Ejercicio Nº 07Ejercicio Nº 07
![Page 18: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/18.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
IX. Márgenes y separación de celdasIX. Márgenes y separación de celdas
• CELLSPACING
• CELLPADDING
• <TABLE BORDER="1" cellspacing="10" cellpadding=“50">
![Page 19: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/19.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
EjemploEjemplo
![Page 20: Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz](https://reader036.vdocuments.mx/reader036/viewer/2022070319/5583338dd8b42adb148b4e06/html5/thumbnails/20.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman