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.

HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.

1,891 views

Published on

Published in: Education
  • Login to see the comments

HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.

  1. 1. Universidad Estatal de BolívarCaedis Las NavesTema:Tipos de listas y tablasIntegrantes:Jenny Andachi Chávez, GuicelaOcampo OrtizTutor:Licd. Marcelo BañoCiclo:7mo Informática EducativaAño electivo:2013SIGUIENTE
  2. 2.  Antes de nada, 3 cosas para tener claras enlas tablas HTML:• La etiqueta de inicio <table> y la etiqueta decierre </table> inician y finalizan la tabla.Lógico:• * <tr> es la abreviatura de "table row" (esdecir, fila de la tabla) e inicia y finaliza las filashorizontales. Lógico también.• * <td> es la abreviatura de "table data" (esdecir, datos de la tabla). Esta etiqueta inicia yfinaliza cada una de las celdas quecomponen las filas de la tabla. Todo sencillo ylógico.Universidad Estatal de BolívarCaedis Las NavesEJEMPLO
  3. 3. Código:<table><tr><td>Celda 1</td><td>Celda 2</td><tr><td>Celda 3</td><td>Celda 4</td></table>Universidad Estatal de BolívarCaedis Las NavesATRIBUTOS
  4. 4.  Y veremos algo así:Ahora les explicare cada atributo del código para que puedan modificarlo a sugusto...bgcolor="blue": podemos reemplazar "blue" por otro color pero atención los coloresse reemplazan con los nombres pero en Ingles.border="4":con esto podemos definir el grosor del borde reemplazándolo siemprecon un numero.bordercolor="yellow": acá podremos modificar el color del borde según el nombreen ingles del color que quieras.cellpadding="2": indica el espacio entre el borde de la celda y el contenido de lacelda.cellspacing="2":indica el espacio entre cada celda.align="center": indica la alineación de la tabla si es center o right o left.Universidad Estatal de BolívarCaedis Las NavesEJEMPLO
  5. 5.  Código:<table bgcolor="blue" border="4"bordercolor="yellow" cellpadding="2"cellspacing="2" align="center"><tr><td>Celda 1</td><td>Celda 2</td><tr><td>Celda 3</td><td>Celda 4</td></table>Universidad Estatal de BolívarCaedis Las NavesSIGUIENTE
  6. 6. * FRAME=" void / above / below / hsides /lhs / rhs / vsides / box/border ". Este atributo es complementario a BORDER y sólofunciona con Internet Explorer, y posibilita, en una tabla conbordes, especificar cual o cuales de los exteriores serán visibles.Podemos especificar pues:- void - no se ven los bordes.- above - borde superior.- below - borde inferior.- hsides - bordes superior e inferior.>- lhs - borde izquierdo.- rhs - borde derecho.- vsides - bordes laterales.- box - todos los bordes.- border - todos los bordes.Universidad Estatal de BolívarCaedis Las NavesEtiqueta <TABLE> y sus atributos.EJEMPLO
  7. 7. Universidad Estatal de BolívarCaedis Las Naves<TABLE BORDER="1" CELLSPACING="0"FRAME="above"><TR><TD>UNO</TD><TD>DOS</TD></TR></TABLE><TABLE BORDER="1" CELLSPACING="0"FRAME="vsides"><TR><TD>UNO</TD><TD>DOS</TD></TR></TABLE>SALIR
  8. 8. Listas Desordenadas: Se usa la etiqueta <ul> (y la etiqueta decierre). Ul proviene de las palabras en inglés unorder list (listadesordenadas). Cada elemento se pone con la etiqueta<li>, sin etiqueta de cierre. Ejemplo:<p>Países distribuidores</p><ul><li>México<li>Estados Unidos<li>Canadá</ul></p>Resultado: Países distribuidores México Estados Unidos CanadáTipos de listas
  9. 9. o circle square• DiscEstos se pueden poner con el atributo type, ya sea en laetiqueta <ul> o <li>:<ul type="square"><li>México<li type="circle">Estados Unidos<li>Canadá</ul>Resultado: Méxicoo Estados Unidos• Canadá
  10. 10. Como la otra lista, cada elemento se ponecon <li>:<p>Reglas</p><ol><li>No fumar<li>No gritar<li>Tener paciencia</ol>

×