Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz

2,989 views

Published on

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.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Sesion Nº7 Creacion De Tablas En Html Ing. Edgar Cruz

  1. 1. Sesión 07: Ing. Edgar A. Cruz Huaman INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Creación de Tablas HTML.
  2. 2. I. Cómo se crea una tabla <ul><li><TABLE>…</TABLE>. </li></ul><ul><li>Filas : <TR>…</TR> </li></ul><ul><li>Encabezado de Tabla : <TH>…</TH> </li></ul><ul><li>Datos de Tabla : <TD>…</TD> </li></ul>
  3. 3. Ejercicio Nº 01
  4. 4. II. Bordes de la Tabla <ul><li>Atributo BORDER=“n”. </li></ul><ul><ul><li><Table border=“5”> </li></ul></ul><ul><li>Ejercicio 2: </li></ul>
  5. 5. Ejercicio Nº 03
  6. 6. III. Insertar un título para la tabla
  7. 7. Ejercicio Nº 04
  8. 8. IV. Alineamiento de tablas <ul><li><TABLE border= &quot;1&quot; align= &quot;right&quot; > </li></ul>
  9. 9. V. Alineamiento de celdas y filas <ul><li>Alineamiento horizontal: </li></ul><ul><ul><li>ALIGN=&quot;left“ </li></ul></ul><ul><ul><li>ALIGN=&quot;center“ </li></ul></ul><ul><ul><li>ALIGN=&quot;right“ </li></ul></ul><ul><li>Alineamiento vertical: </li></ul><ul><ul><li>VALIGN=&quot;top&quot; </li></ul></ul><ul><ul><li>VALIGN=&quot;middle“ </li></ul></ul><ul><ul><li>VALIGN=&quot; bottom&quot; </li></ul></ul>
  10. 10. VI. Ancho de tablas y celdas <ul><li>Atributos: WIDTH y HEIGHT </li></ul><ul><li><TABLE border =“1” width=&quot;600&quot; height=&quot;500&quot;> </li></ul><ul><li><TABLE border =“1” width=“80%&quot; height=“900&quot;> </li></ul>
  11. 11. Ejercicio Nº 05
  12. 12. VI. Etiqueta <DIV> <ul><li><TD width=&quot;300&quot;> </li></ul><ul><ul><li><div align=&quot;center&quot;> Texto centrado<br> </div> </li></ul></ul><ul><li><div align=&quot;right&quot;> Texto a la derecha<br> </div> </li></ul><ul><li></TD> </li></ul>
  13. 13. Ejemplo1
  14. 14. VII. Atributo NOWRAP <ul><li><TD nowrap>Texto en una sola linea. </li></ul><ul><li></TD> </li></ul>
  15. 15. Ejemplo
  16. 16. VIII. Celdas que abarcan varias filas o columnas. <ul><li>Atributos: ROWSPAN y COLSPAN. </li></ul><ul><li><TD ROWSPAN=&quot;2&quot;> </li></ul><ul><li>Celda de dos filas </li></ul><ul><li></TD> </li></ul>
  17. 17. Ejercicio Nº 07
  18. 18. IX. Márgenes y separación de celdas <ul><li>CELLSPACING </li></ul><ul><li>CELLPADDING </li></ul><ul><li><TABLE BORDER=&quot;1&quot; cellspacing=&quot;10&quot; cellpadding=“50&quot;> </li></ul>
  19. 19. Ejemplo
  20. 20. PREGUNTAS?

×